​​ HTML5, <mark> 태그 알아 보기

HTML5, <mark> 태그 알아 보기

 

<mark> 태그는 텍스트의 내용 중 하이라이트 표시를 하여 특정 문장이나 단어를 강조하고 싶은 경우에 사용할 수 있습니다. 티스토리의 경우에 에디터 자체에 글자의 배경색 기능이 있으므로 티스토리를 이용하시는 분들에게는 큰 의미는 없습니다. 마크 태그가 이런 의미를 가지고 있다 정도로만 이해하시면 될 것 같습니다.

다만, 마크 태그는 노란색을 기본 색상으로 하므로 이러한 점에서 모든 색상을 선택할 수 있는 티스토리 에디터와는 다르다고 할 수도 있습니다.

 

마크 태그의 소스 코드 예제의 모습은 아래와 같습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
mark 태그는 단어를 
<mark>강조하고 싶은 경우에</mark>
 배경에 하이라이트 색상을 주는 역할을 합니다.
  </body>
</html>

 

위의 코드에서 body 태그 내용에 들어간 부분을 나타내면 아래와 같이 보이게 됩니다.

mark 태그는 단어를 강조하고 싶은 경우에 배경에 하이라이트 색상을 주는 역할을 합니다.

 

마크 태그는 기본적으로 노란색으로 고정되어 있지만 원할 경우에는 색상을 지정하여 변경하는 것이 가능합니다.

아래의 소스 태그처럼 head 태그 부분에 <style>mark{background-color:red}</style> 과 같은 형식을 추가하여 노란색 이외의 색상을 적용하는 것이 가능합니다. 

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
<style>mark{background-color:red}</style>
  </head>
  <body>
mark 태그는 단어를 
<mark>강조하고 싶은 경우에</mark>
 배경에 하이라이트 색상을 주는 역할을 합니다.
  </body>
</html>

 

위의 소스를 적용한 브라우저 페이지의 모습은 아래와 같습니다.

 

 

댓글

Designed by JB FACTORY