<mark>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <mark>
요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
시도해보기
특성
이 요소는 전역 특성을 포함합니다.
사용 일람
일반적인 <mark>
요소의 사용처는 다음과 같습니다.
- 인용문(
<q>
,<blockquote>
)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다. - 다른 경우,
<mark>
는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다. <mark>
를 표시만을 위한 용도로 사용하지 마세요.<span>
과 적절한 CSS를 대신 사용해야 합니다.
참고: <mark>
와 <strong>
요소의 차이점을 기억하세요. 텍스트에서, <mark>
는 연관성을 가진 부분을, <strong>
은 중요도를 가진 부분을 나타낼 때 사용합니다.
예제
관심 부분 표시하기
첫 예제의 <mark>
요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.
<blockquote>
It is a period of civil war. Rebel spaceships, striking from a hidden base,
have won their first victory against the evil Galactic Empire. During the
battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire’s
ultimate weapon, the DEATH STAR, an armored space station with enough power to
destroy an entire planet.
</blockquote>
상황에 맞는 구절 식별
다음 예제는 글의 검색 결과를 강조할 용도로 <mark>
를 사용합니다.
<p>
It is a dark time for the Rebellion. Although the Death Star has been
destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
forces from their hidden base and pursued them across the galaxy.
</p>
<p>
Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
freedom fighters led by Luke Skywalker has established a new secret base on
the remote ice world of Hoth.
</p>
다른 <mark>
와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 "match"
를 추가로 적용했습니다.
접근성 고려사항
대부분의 스크린 리더는 기본값에서 <mark>
요소의 존재를 표현하지 않습니다. 그러나 CSS content
속성과 ::before
, ::after
의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.
mark::before,
mark::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
mark::before {
content: " [강조 시작] ";
}
mark::after {
content: " [강조 끝] ";
}
스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.
명세
Specification |
---|
HTML Standard # the-mark-element |
브라우저 호환성
BCD tables only load in the browser