Selectors/Using :target

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

148/190

안녕하세요! 프론트엔드 강사입니다.

이번에는 CSS의 :target 가상 클래스(pseudo-class)에 대한 문서를 가져오셨군요! 이 속성은 페이지 내에서 '목차(TOC)'를 눌러 이동하거나, 특정 위치로 스크롤을 점프시키는 링크를 구현할 때 사용자 경험(UX)을 크게 높여주는 아주 훌륭한 기능입니다.

원본 문서의 내용 하나도 빠짐없이, 제 실무 팁까지 듬뿍 담아서 구어체로 알기 쉽게 번역해 드릴게요!

선택자에서 :target 가상 클래스 사용하기 (Using the :target pseudo-class in selectors)

URL이 https://en.wikipedia.org/wiki/URI_fragment(https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment#fragment)(URL 끝에 붙는 # 모양의 해시를 말해요!)를 사용해서 문서의 특정 부분을 가리킬 때, 사용자는 화면이 이동했어도 정확히 어느 부분을 보라는 건지 눈치채기 어려울 수 있습니다. 이 가이드에서는 사용자 경험(UX)을 향상시키기 위해 CSS를 사용하여 URL의 타겟(목적지)에 시선을 집중시키는 방법을 다룹니다.

💡 강사의 실무 팁 1
위키백과 같은 긴 문서를 읽다가 목차를 클릭하면 해당 문단으로 화면이 훅 내려가죠? 그때 내려간 문단의 배경색이 살짝 변하면서 "여기가 네가 누른 곳이야!" 하고 알려주는 효과를 보신 적 있을 거예요. 이 :target 속성을 사용하면 자바스크립트를 전혀 쓰지 않고도 그런 하이라이팅 효과를 아주 쉽게 구현할 수 있습니다!

타겟 고르기 (Picking a Target)

가상 클래스(pseudo-class)인 :target은 URL 프래그먼트 식별자를 사용하여 식별된 문서 내의 타겟 요소를 스타일링하는 데 사용됩니다.

예를 들어, https://developer.mozilla.org/en-US/docs/Web/CSS#reference라는 URL은 #reference라는 프래그먼트 식별자를 포함하고 있죠. HTML에서 식별자(identifier)는 id나 name 속성의 값으로 사용되는데, 이 둘은 같은 네임스페이스를 공유하기 때문입니다. 따라서 앞의 예시 URL은 문서 내에서 id="reference"를 가진 요소를 가리키게 됩니다.

다른 종류의 요소에는 타겟 스타일이 들어가지 않도록 막으면서, URL의 타겟이 되는 딱 그 h2 요소만 스타일링하려면 타입 선택자(type selector)와 함께 :target 가상 클래스를 사용하면 됩니다:

h2:target {
  outline: 2px solid;
}

문서의 특정 프래그먼트(조각)에만 딱 맞춰진 스타일을 만드는 것도 가능합니다. URL에 있는 식별자 값(ID 값)을 똑같이 선택자에 사용하면 되죠. 따라서 #reference라는 프래그먼트에만 배경색을 추가하려면 다음과 같이 작성합니다:

#reference:target {
  background-color: yellow;
}

💡 강사의 부연 설명 2
아이디 선택자(#)와 :target을 결합하면 아주 정교한 제어가 가능합니다. "주소창에 #reference가 붙었을 때, 아이디가 reference인 녀석 배경을 노란색으로 바꿔줘!"라는 명확한 지시가 되는 셈이죠.

모든 요소 타겟팅하기 (Targeting all elements)

만약 타겟이 된 모든 요소에 공통으로 적용될 "포괄적인(blanket)" 스타일을 만드는 것이 목적이라면, 전체 선택자(universal selector)가 아주 유용합니다. (이때 *는 생략 가능하므로 그냥 :target만 써도 됩니다):

:target {
  color: red;
}

예제 (Example)

다음 예제에는 동일한 문서 내의 요소들을 가리키는 5개의 링크가 있습니다. 예를 들어, "First" 링크를 선택하면 <h4 id="one"> 요소가 타겟 요소가 됩니다.

타겟 요소들은 가능한 한 브라우저 창의 맨 위(상단)에 배치되려고 하기 때문에, 링크를 클릭하면 문서가 새로운 스크롤 위치로 훅 점프할 수 있다는 점을 참고하세요.

<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

💡 강사의 실무 팁 3
방금 "문서가 새로운 스크롤 위치로 점프할 수 있다"고 했죠? 순수 HTML/CSS 환경에서는 화면이 딱딱하게 순간 이동하는 것이 기본값입니다. 이걸 훨씬 세련되게 만들려면, CSS html 태그에 scroll-behavior: smooth; 속성을 한 줄 추가해 보세요! 타겟을 향해 부드럽게 스르륵~ 굴러가듯 스크롤되는 멋진 효과를 단숨에 얻을 수 있습니다.

결론 (Conclusion)

프래그먼트 식별자(#)가 문서의 특정 부분을 가리키는 경우, 독자들은 화면이 갑자기 이동했을 때 도대체 문서의 어느 부분을 읽어야 하는지 혼란스러울 수 있습니다. 이때 URI(URL)의 타겟 요소에 :target을 활용해 눈에 띄는 스타일을 지정해 주면, 독자의 혼란을 크게 줄이거나 완전히 없앨 수 있습니다.