웹 개발을 위한 HTML 가이드 19편 - 취소선과 밑줄 표현

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)
• 윗첨자와 아랫첨자 태그(sup, sub)
• 텍스트의 추가, 제외 태그(ins, del)
• 취소선(s)과 밑줄 표현현재 글
• 인용 태그(q, blockquote)
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

MS 오피스의 워드나 한컴 오피스의 한글 같은 경우 그리고 웹상에서 볼 수 있는 수많은 밑줄과 취소선들 또한 태그로 간단하게 처리할 수 있습니다. 이번 글 웹 개발을 위한 HTML 가이드 19편에서는 취소선과 밑줄을 나타내는 태그에 대해서 알아봅시다. 여러분이 웹 페이지를 구성하면서 텍스트에 밑줄이나 취소선을 넣고 싶다면 이번 글에서 알게 된 내용을 적용하면 됩니다.

이번 글의 내용은 가이드라고 하기 민망할 정도로 아주 간단하고 짧습니다. 가볍게 보고 넘어가시면 되겠습니다. 그럼 웹 개발을 위한 HTML 가이드 19편을 시작하도록 합시다.

취소선 태그(s)

취소선이라고 하면 가운데에 줄이 그어지는 것을 말합니다. 이렇게 줄이 그어지죠. 물론 색깔이 바뀌지는 않습니다. 이 글은 스타일이 입혀져 있어서 그렇다는 것을 이해하고 지나가주세요. 아무튼, 너무 간단하니까 간단하게 코드만 보고 넘어가도록 합시다. 취소선은 s태그로 구현합니다. 여는 태그가 있고 닫는 태그가 있습니다.

<p>아이유 <s>바보!</s>좋아!</p>

크게 보기 (새 창)

이 취소선이 의미하는 바는 더 이상 정확하지 않은 내용임을 나타내는 것입니다. 그저 취소선을 그어주는 것이 아니라 이 취소선이 그어진 내용은 현재에 이르러서는 정확하지 않고 확실하지 않다. 라는 의미로 사용됩니다. s태그는 사라졌다가 HTML 5버전이 되면서 다시 나타난 태그입니다. 이정도까지는 사실.. 몰라도 됩니다. 중요한 것은 이 태그의 의미입니다.

밑줄 태그???

밑줄을 만들어주는 태그는 u태그 입니다. 아니 정확히는 **밑줄을 만들어주는 태그는 u태그**였습니다. 하지만 HTML 5버전이 되면서 u태그는 새로운 의미를 얻었습니다. 더 이상 밑줄을 의미하지 않고 맞춤법이 틀렸을 때 이를 표시하는 것을 목적으로 주로 사용합니다. u태그는 s태그와 마찬가지로 재활용된 태그입니다.

그러니까 밑줄을 나타내는 태그는 없습니다. 밑줄을 만들려면 우리는 CSS를 배우지 않았지만, 밑줄은 CSS를 사용해야 합니다. 자 , 지금부터의 내용은 잠깐동안 머리가 아플 수 있습니다. 지금은 그냥 이런 게 있다. 라는 것만 보고 넘어가시면 됩니다.

<p>아이유가 <span class="underline">오마이걸</span>을 언급한 뒤로 오마이걸 영상을 자주 찾아보게 되었다.</p>

밑줄이 필요한 부분을 span태그로 감싸주는 게 먼저입니다. 그리고 클래스를 지정하세요. 여러번 사용될 수 있기 때문에 클래스를 지정하는 겁니다. 그 다음에 CSS를 지정해주면 됩니다. 보기만 하시면 됩니다.

.underline {
  text-decoration: underline;
}

이런식으로 지정하면 아래의 이미지와 같은 효과가 나타납니다. 다만 이 경우에는 CSS를 사용하면 큰 의미는 가지지 않는 밑줄을 만들어냅니다. 중요한 내용이라면 밑줄을 넣을 게 아니라 strong태그나 em태그를 사용하면 되겠죠.

크게 보기 (새 창)

분명히 짧은 내용인데 어떻게 간단하게 설명할 수 있을까를 고민해봤습니다. 제가 다시 공부하면서 남들에게 설명하고자 하는 취지로 만드는 가이드이다보니 쉽지가 않긴 하네요. 더 쉽게 설명할 수 있도록 트레이닝을 해봐야겠습니다. HTML 가이드인데 CSS가 간간히 튀어나오는 것은 어쩔 수가 없는 것 같긴 하지만요.

아무튼, 이번 글에서는 취소선과 밑줄에 대해서 알아봤습니다. 취소선은 태그를 이용하면 되지만 무작정 남발해서는 안됩니다. 밑줄의 경우에는 현재 HTML 상에서는 밑줄을 의미하는 태그는 존재하지 않는다는 것을 다시 한 번 이해하고 넘어가시면 되겠습니다.

이번 글의 내용은 여기까지 입니다. 다음 글에서는 인용 태그에 대해서 알아보도록 합시다.