[HTML MARK] HTML 마크태그로 형광펜 효과내기

HTML5 에서 추가된 태그 중 <mark> 태그가 있습니다. mark 태그는 인라인 태그이기 때문에 태그를 사용한 영역에만 적용됩니다. 따라서 선택한 부분에 형광펜 효과를 줄 수 있습니다. 즉, 특정 부분을 강조할 때 사용합니다.

기존에 html4 에서는 해당 효과를 넣기 위해서는 별도의 스타일시트를 사용해야 가능했지만, html5 에서는 <mark> 태그로 쉽게 표시할 수 있습니다.

[HTML MARK] 마크태그로 형광펜 효과내기

<mark> 내용 </mark>

▲위와 같이 HTML 코드를 입력해보겠습니다. 강조를 원하는 내용에 <mark> ~ </mark> 태그를 입력해주세요.

▲확인한 결과 마크 태그를 입력한 부분에 노란색으로 강조 표시, 형광펜 효과가 나타났습니다. 마크 태그는 기본적으로 노란색으로 표시되며 background-color 속성을 사용하여 마크 태그의 배경색을 노란색이 아닌 다른 색으로 변경이 가능합니다.

▲기존 코드에서 background-color 속성값을 넣었습니다. 오렌지 색상으로 입력해보겠습니다.

▲그럼, 노란색으로 강조되었던 부분이 오렌지 색상으로 바뀌어 나타나게 됩니다.

이상, 형광펜 효과를 나타낼 수 있는 <mark> 태그에 대해서 알아보았습니다.