[HTML] 취소선, 밑줄 그리기

HTML에서 취소선, 밑줄 그리기

HTML에서 글자에 취소선과 밑줄을 그리는 방법을 알아보도록 하겠다.

취소선 표현하기 <del>

See the Pen html example by anna (@hianna) on CodePen.

<del>태그는 'delete'의 약자이다.

글자에 취소선을 표현하기 위해서는 

<del> 태그 사이에 취소선을 그을 글자를 넣어주면 된다.

밑줄 표현하기 <ins>

See the Pen html example by anna (@hianna) on CodePen.

<ins> 태그는 'insert'의 약자이다.

밑줄을 표현하기 위해서는

위와 같이 <ins> 태그 사이에 밑줄을 그을 글자를 넣어주면 된다.

왜 <del> <ins>라는 태그명을 가졌을까?

<del>태그와 <ins>태그는 원래 문서의 변경사항을 표현하기 위한 태그이다.

문서가 변경되어 삭제된 내용에는 <del> 태그를,

문서가 변경되어 추가된 내용에는 <ins> 태그를 사용한다.

이렇게 표시하면, 

글을 보는 사람들은 '아 글의 내용이 변경되었구나!' 하는 것을 인지할 수 있게 된다.

태그명이 underline이나 cancel이 아닌

delete와 insert의 약자인 이유가 이것이다.

하지만, 보통은 단순히 텍스트의 밑줄이나 취소선을 나타내는

시각적인 효과를 위해 사용되고 있긴 하지만 말이다.