A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/mark below:

<mark> - HTML: Hypertext Markup Language

<mark>

Baseline Widely available

HTML <mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

시도해 보기 
<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

/* stylelint-disable-next-line block-no-empty */
mark {
}
특성

이 요소는 전역 특성을 포함합니다.

사용 일람

일반적인 <mark> 요소의 사용처는 다음과 같습니다.

참고: <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: " [강조 끝] ";
}

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.

명세 브라우저 호환성

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4