mark element - by. UXKM
- Publishing
- HTML
- 문자 콘텐츠(Text-level semantics)
- mark element
요약 설명
<mark>
요소는 텍스트의 하이라이트(강조 표시)를 위한 시맨틱 태그로, 사용자에게 주목할 필요가 있는 중요한 정보나 검색어와 일치하는 부분 등을 시각적으로 강조할 때 사용됩니다.
기본적으로 형광펜 효과처럼 배경색이 적용되며, 강조의 의미보다는 참조나 관심 유도를 위한 시각적 강조에 적합합니다. 본문 중 특정 단어나 문장을 부각시킬 때 의미 기반 마크업으로 활용할 수 있습니다.
주요 역할 및 특징
-
문맥적으로 중요한 텍스트 강조
-
<mark>
는 특정 텍스트가 현재 문맥에서 중요하거나 관련성이 있음을 나타냅니다. - 예: 검색 결과의 하이라이트, 중요 공지 사항 등.
-
-
의미론적 강조
단순히 텍스트를 스타일링하는 것이 아니라, 문맥적 중요성을 강조하는 의미론적 역할을 합니다.
-
브라우저 렌더링
-
기본적으로 배경색이 노란색(
background-color: yellow;
)으로 표시됩니다. - CSS를 사용하여 스타일을 변경할 수 있습니다.
-
기본적으로 배경색이 노란색(
-
스크린 리더와의 연계
스크린 리더는
<mark>
를 특별히 강조하여 읽을 수 있습니다. -
다른 강조 요소와의 관계
<mark>
는 문맥적으로 중요한 텍스트를 강조하며,<em>
과<strong>
은 의미적으로 "강조"하거나 "강한 중요성"을 나타냅니다.
CSS 기본 값
<mark>
요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.
기본 문법
속성
<mark>
요소는 고유 속성을 가지지 않으며,
글로벌 속성(class
, id
, style
, aria-*
, data-*
등)만 사용할 수 있습니다.
예제
CSS로 스타일 변경
접근성을 고려한 강조
주의사항
-
<mark>
는 단순히 시각적 효과를 위해 사용하지 말고, 텍스트가 현재 문맥에서 중요함을 나타낼 때만 사용하세요. - 기본 노란색 배경이 적합하지 않은 경우 CSS로 변경할 수 있지만, 사용자가 여전히 강조된 정보를 쉽게 식별할 수 있도록 디자인해야 합니다.