이 포스트에서는 HTML5에서 추가된 <mark> … </mark> 태그에 관한 내용입니다.
<mark> 태그는 비주얼적인 태그이면서도 특이하게도 HTML 4.01에서는 없었다가 HTML5에서 새로 생긴 태그입니다. 비주얼적인 태그는 HTML 문서에서 배제하는 추세임을 감안해 본다면 특이한 사례라는 생각이 들 수도 있겠습니다. 하지만 <mark> 태그가 추가된 이유는, 이미 글자를 굵게 하기 위한 태그로 <b>가 있음에도 <strong>이 따로 존재하는 이유와 같습니다. 즉, 시각적으로 강조하면서도 의미적으로도 강조의 의미를 부여하는 데 목적이 있습니다.
우선 <mark> 태그의 기능을 간단히 설명하자면, 이 태그는 문서의 특정 부분을 형광펜으로 칠한 효과를 내기 위한 태그입니다. mark를 영한사전에서 찾아보면 ‘표시하다’라는 뜻이 나오는 데서 알 수 있을 것입니다. 일단 다음 코드를 봅시다.
<p>HTML5에서는 다양한 태그가 추가되었습니다.<br /> 그 중에서 <mark>mark 태그는 형광펜으로 색칠된 효과를 줍니다.</mark> 시각적인 효과 뿐만 아니라 의미적으로 강조하는 기능도 있습니다.</p>
이 코드의 결과는 다음과 같습니다.
HTML5에서는 다양한 태그가 추가되었습니다.
그 중에서 mark 태그는 형광펜으로 색칠된 효과를 줍니다. 시각적인 효과 뿐만 아니라 의미적으로 강조하는 기능도 있습니다.
그 중에서 mark 태그는 형광펜으로 색칠된 효과를 줍니다. 시각적인 효과 뿐만 아니라 의미적으로 강조하는 기능도 있습니다.
이와 같이 형광펜으로 칠한 것처럼 <mark> … </mark> 태그로 감싼 부분이 노란 바탕으로 칠해져 있습니다.
하지만 노란 바탕만 가능한 것은 아닙니다. CSS를 사용하면 다른 색으로 바꾸는 것도 가능합니다. 다음 코드를 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mark tag colors sample</title>
<style type="text/css">
mark.pink { background-color: #ffaad4; }
mark.cyan { background-color: #aaffff; }
mark.blue { background-color: #aad4ff; }
</style>
</head>
<body>
<p>하나 둘 셋 다시 세어봐도<br />
널 찾을 수 없어<br />
<mark class="pink">내 맘 속에 잠 들어 있는 너를 꺼내</mark><br />
못다한 내 얘기들 모두 말할거야<br />
천천히 언제나 이대로<br />
나의 <mark class="cyan">사랑 별</mark> <mark class="blue">그리고 너</mark></p>
</body>
</html>
이 코드를 실행해 보면,
하나 둘 셋 다시 세어봐도
널 찾을 수 없어
내 맘 속에 잠 들어 있는 너를 꺼내
못다한 내 얘기들 모두 말할거야
천천히 언제나 이대로
나의 사랑 별 그리고 너
널 찾을 수 없어
내 맘 속에 잠 들어 있는 너를 꺼내
못다한 내 얘기들 모두 말할거야
천천히 언제나 이대로
나의 사랑 별 그리고 너
이렇게 다른 색깔의 형광펜으로 칠한 효과를 줄 수 있습니다.
이와 같이 HTML5에서 새로 추가된 <mark> 태그를 활용하여 형광펜 효과를 간단하게 추가할 수 있습니다.
1개의 댓글이 있습니다.