웹 페이지에서 링크를 클릭했을 때 해당 섹션이 시각적으로 강조되면 사용자 경험이 크게 향상됩니다. HTML 앵커(Anchor)로 이동한 현재 위치를 CSS만으로 간단하게 하이라이트하려면 :target 선택자를 사용하면 됩니다.
:target 선택자란?
:target은 URL의 조각 식별자(fragment identifier, 예: #tut1)와 일치하는 ID를 가진 요소가 현재 대상이 될 때 적용되는 CSS 의사 클래스입니다. 즉, 사용자가 페이지 내 앵커 링크를 클릭해 특정 요소로 이동하면, 그 요소에 자동으로 스타일이 적용됩니다.
예제 코드
아래 코드는 네 개의 과목 링크 중 하나를 클릭하면 해당 튜토리얼 제목이 주황색 배경과 흰색 글자, 그리고 회색 테두리로 강조되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
:target {
border: 2px solid #D4D4D4;
background-color: orange;
color: white;
}
</style>
</head>
<body>
<p>아래 과목 중 하나를 클릭해 보세요.</p>
<p><a href="#tut1">수학</a></p>
<p><a href="#tut2">Java</a></p>
<p><a href="#tut3">C++</a></p>
<p><a href="#tut4">C</a></p>
<p>데모용 텍스트입니다.</p>
<p>데모용 텍스트입니다.</p>
<p>데모용 텍스트입니다.</p>
<p>데모용 텍스트입니다.</p>
<p>데모용 텍스트입니다.</p>
<p id="tut1"><b>수학 튜토리얼</b></p>
<p id="tut2"><b>Java 튜토리얼</b></p>
<p id="tut3"><b>C++ 튜토리얼</b></p>
<p id="tut4"><b>C 튜토리얼</b></p>
</body>
</html>동작 원리
예제에서 각 링크의 href 속성은 #tut1, #tut2처럼 페이지 내 요소의 ID를 가리킵니다. 링크를 클릭하면 브라우저가 해당 ID를 가진 요소로 스크롤하고, 동시에 그 요소가 :target 상태가 되어 지정한 스타일(주황색 배경, 흰색 글자, 회색 테두리)이 적용됩니다.
참고 사항
- :target은 모든 최신 브라우저에서 지원되므로 별도의 JavaScript 없이도 활용할 수 있습니다.
- 목차(Table of Contents), FAQ 아코디언, 탭 메뉴 등 페이지 내 탐색 기능을 구현할 때 유용하게 사용됩니다.
- 전환 효과를 추가하고 싶다면 transition 속성을 함께 사용하면 더 부드러운 하이라이트 연출이 가능합니다.