정보실

웹학교

정보실

html HTML로 할 수 있는 일 - Highlight text

본문

https://codepen.io/ananyaneogi/pen/WqEzPo 



HTML : 


<h1>Highlight Text</h1>

<article>
	<p>
		‘Welcome to Hogwarts,’ said Professor McGonagall. ‘The start-of-term banquet will begin shortly, but before you take your seats in the Great Hall, you will be sorted into your houses. <mark>The Sorting</mark> is a very important ceremony because, while you are here, your house will be something like your family within Hogwarts. You will have classes with the rest of your house, sleep in your house dormitory and spend free time in your house common room.
	</p>
	<p>
	‘The four houses are called Gryffindor, Hufflepuff, Ravenclaw and Slytherin. Each house has its own noble history and each has produced outstanding witches and wizards. While you are at Hogwarts, <mark>your triumphs will earn your house points</mark>, while any rule-breaking will lose house points. At the end of the year, the house with the most points is awarded the House Cup, a great honour. I hope each of you will be a credit to whichever house becomes yours.
</p>
</article>



CSS : 


body {
/* 	background-color: lightseagreen; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 30px;
}

h1 {
	font-size: 3rem;
	color: darksla;
	font-family: "Berkshire Swash", cursive;
	text-align: center;
}

p {
	font-size: 1.4rem;
	line-height: 1.4;
}

mark {
	background-color: blanchedalmond;
}




페이지 정보

조회 81회 ]  작성일19-07-07 11:19

웹학교