웹 개발을 위한 HTML 가이드 21편 - 하이라이트 태그

텍스트 관련 태그

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

제목

이번 글은 웹 개발을 위한 HTML 가이드 21편입니다. 이번 글의 주제는 하이라이트 태그입니다. 우리는 간혹 어떤 페이지 내에서 그 페이지와 연관이 있는 단어나 내용을 강조하고 싶을 때가 있습니다. 이 연관성에 초점을 두고 사용하는 태그가 바로 하이라이트를 위한 태그입니다. 이번에 알아볼 태그는 바로 mark태그입니다.

mark 태그

<h1>아이유 생일</h1>
<p>
  아이유의 생일은 <mark>5월 16일</mark>입니다.
</p>

크게 보기 (새 창)

mark태그의 기본적인 디자인은 노란색 배경입니다. 마치 형광펜으로 그은 것처럼 표시가 되어있죠. 그래서 하이라이트라고 하는 겁니다. mark태그는 HTML 5에서 처음 등장했습니다. 사용자들에게 원하는 부분을 찾는 수고를 덜하게끔 하기 위해서 하이라이트를 통해 표시를 할 때 사용합니다.

단어나 문장을 강조한다는 점에서 em태그나 strong태그와 비슷하죠. 하지만 이 두가지는 중요성을 강조하는 것이고 mark태그는 연관성을 강조한다는 것이 다릅니다. 따라서 중요하지 않더라도 주제와 연관이 있는 문구, 단어를 강조할 수 있습니다. 현재 이 글의 붉은색 배경의 텍스트가 바로 mark태그가 사용된 부분입니다.

이번 글에서는 하이라이트를 담당하는 태그인 mark태그에 대해서 알아봤습니다. mark태그는 em태그나 strong태그처럼 단어나 문장을 강조하지만 중요성이 아닌 연관성을 초점으로 두고 강조하는 점이 다릅니다. 이번 글에서 준비된 내용은 여기까지입니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글에서는 small태그에 대해서 알아봅시다.