정보실

웹학교

정보실

html HTML로 할 수 있는 일 - 텍스트 삭제 및 삽입 표시

본문

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


HTML : 


<h1>Show insertion and deletion of text</h1>

<article>
	<p>
		‘Welcome to Hogwarts,’ said Professor McGonagall. ‘The start-of-term banquet will <ins>begin</ins> <del>commence</del> shortly, but before you take your seats in the Great Hall, you will be sorted into your houses. The Sorting 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 <ins>Slytherin</ins> <del>Thunderbird</del>. Each house has its own noble history and each has produced outstanding witches and wizards. While you are at Hogwarts, your triumphs will earn your house points, 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. <ins>I hope each of you will be a credit to whichever house becomes yours.</ins>
</p>
</article>


CSS : 


body {
	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;
	text-decoration-skip-ink: none;
}

ins {
 text-decoration: green underline wavy;
}

del {
  text-decoration: line-through;
	text-decoration-color: indianred;
}




페이지 정보

조회 102회 ]  작성일19-07-07 11:27

웹학교