mark element - by. UXKM

  • Publishing
  • HTML
  • 문자 콘텐츠(Text-level semantics)
  • mark element
요약 설명

<mark> 요소는 텍스트의 하이라이트(강조 표시)를 위한 시맨틱 태그로, 사용자에게 주목할 필요가 있는 중요한 정보나 검색어와 일치하는 부분 등을 시각적으로 강조할 때 사용됩니다.
기본적으로 형광펜 효과처럼 배경색이 적용되며, 강조의 의미보다는 참조나 관심 유도를 위한 시각적 강조에 적합합니다. 본문 중 특정 단어나 문장을 부각시킬 때 의미 기반 마크업으로 활용할 수 있습니다.

주요 역할 및 특징

  1. 문맥적으로 중요한 텍스트 강조
    • <mark>는 특정 텍스트가 현재 문맥에서 중요하거나 관련성이 있음을 나타냅니다.
    • 예: 검색 결과의 하이라이트, 중요 공지 사항 등.
  2. 의미론적 강조

    단순히 텍스트를 스타일링하는 것이 아니라, 문맥적 중요성을 강조하는 의미론적 역할을 합니다.

  3. 브라우저 렌더링
    • 기본적으로 배경색이 노란색(background-color: yellow;)으로 표시됩니다.
    • CSS를 사용하여 스타일을 변경할 수 있습니다.
  4. 스크린 리더와의 연계

    스크린 리더는 <mark>를 특별히 강조하여 읽을 수 있습니다.

  5. 다른 강조 요소와의 관계

    <mark>는 문맥적으로 중요한 텍스트를 강조하며, <em>과 <strong>은 의미적으로 "강조"하거나 "강한 중요성"을 나타냅니다.

CSS 기본 값

<mark> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<mark> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

상황별 예제

CSS로 스타일 변경

접근성을 고려한 강조

주의사항

  • <mark>는 단순히 시각적 효과를 위해 사용하지 말고, 텍스트가 현재 문맥에서 중요함을 나타낼 때만 사용하세요.
  • 기본 노란색 배경이 적합하지 않은 경우 CSS로 변경할 수 있지만, 사용자가 여전히 강조된 정보를 쉽게 식별할 수 있도록 디자인해야 합니다.