CSS의 :target 선택자를 사용하면 URL의 해시(#) 조각과 일치하는 HTML 앵커 요소, 즉 현재 활성화된 대상 요소에 스타일을 적용할 수 있습니다. 페이지 내 링크를 클릭해 특정 섹션으로 이동했을 때 해당 섹션을 시각적으로 강조하고 싶다면 :target 선택자가 가장 간단한 해결책입니다.
:target 선택자란?
:target은 의사 클래스(pseudo-class)로, 문서 URL에서 # 뒤에 오는 식별자와 ID가 일치하는 요소를 선택합니다. 예를 들어 URL이 page.html#section1이라면 id="section1"을 가진 요소가 타깃이 되어 스타일이 적용됩니다.
이 선택자는 다음과 같은 상황에서 유용하게 활용됩니다.
- 목차나 내비게이션 링크 클릭 시 이동한 섹션 강조
- 탭 메뉴나 아코디언 콘텐츠 전환 효과 구현
- JavaScript 없이 순수 CSS만으로 인터랙티브 UI 제작
예제 코드
아래 코드를 실행하면 과목 링크를 클릭할 때마다 해당 튜토리얼 항목이 주황색 배경으로 하이라이트되는 것을 확인할 수 있습니다.
<!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>코드 설명
스타일 부분에서 :target 선택자에 border, background-color, color 속성을 지정했습니다. 링크(예: #tut1)를 클릭하면 브라우저는 해당 ID를 가진 요소로 스크롤하면서 동시에 그 요소를 타깃으로 인식하여 지정된 스타일을 적용합니다.
참고 사항
:target 선택자는 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 잘 지원되므로 호환성 걱정 없이 사용할 수 있습니다. 다만 URL 해시가 변경되기 전까지는 스타일이 유지되며, 다른 링크를 클릭하면 이전 타깃의 스타일은 자동으로 해제됩니다.