<mark> 태그로 검색 하이라이트 구현하기 – 접근성과 SEO까지 챙기기

 

 

안녕하세요 😊
<mark>는 **중요 텍스트를 강조(하이라이트)**할 때 사용하는 시맨틱 태그입니다.
특히 검색 결과 강조, 읽기 가이드에 유용합니다.

1) 기본 사용

 

<p>다음 문장에서 <mark>중요한 키워드</mark>를 확인하세요.</p>

 

브라우저 기본값은 노란 형광펜 스타일로 표시됩니다.

2) 스타일 커스터마이징

 

mark {
  background: #fffd8a; /* 연한 노랑 */
  padding: 0 .2em;
  border-radius: .25em;
}

3) 검색 하이라이트 예시

 

<p>검색어: <strong>react</strong></p>
<p>결과: <mark>React</mark> Suspense improves loading UX.</p>

4) 접근성 & SEO

• <mark>는 단순 스타일이 아닌 **의미(semantics)**를 제공하므로 스크린리더와 검색엔진에 유리합니다.
• 단순 색상 강조만 필요하면 <span class="highlight">도 가능하지만, 맥락상 중요 키워드라면 <mark> 권장입니다.

5) 다크 모드 가독성 팁

 

@media (prefers-color-scheme: dark){
  mark { background: #665c00; color: #fff; }
}