[Html] 글자 배경색 mark 태그(형광펜 효과) 사용법 & 예제 총정리

학창 시절 공부를 할 때 글의 중요한 부분에 노란색 형광펜으로 표시해가며 공부를 한 기억이 있습니다. HTML5에도 형광펜과 똑같이 하이라이터 효과를 내는 태그가 생겼습니다. 바로 <mark> 태그입니다. 이번 포스팅에는 <mark> 태그의 사용법에 대해 알아보도록 하겠습니다.  

 

 mark태그(하이라이터 효과) 사용법 

<mark>강조할 텍스트</mark>

강조할 텍스트를 위와 같이 <mark> 태그로 감싸주면 하이라이터 표시가 됩니다.

 

 

See the Pen mark 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen.

 

 위와 같이 적용해볼 수 있겠습니다. 스타일을 적용하지 않으면 기본 색상인 노란색 바탕에 검은색 글씨가 됩니다.

 

CSS로 mark 태그 꾸미기

아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다.

 

See the Pen mark 태그 사용법2 by wjdxo513 (@wjdxo513) on CodePen.

 

색상과 mark태그의 배경색을 바꾸고 싶다면 background-color, 글자색을 바꾸고 싶다면 color로 바꾸시면 됩니다. CSS가 아니라 아래처럼 mark 태그에 직접 style을 주셔도 똑같이 동작합니다.

 

<mark style="background-color:blue; color:white;">

 

 

See the Pen mark 태그 사용법3 by wjdxo513 (@wjdxo513) on CodePen.

 

border-radius를 활용하여 하이라이터에 둥글게 라운딩 효과도 줄 수 있습니다.