CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.

가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.

div:target { color: red; }



# CSS3 :target 예제보기
아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.

<div class="view">
  <div id="no1" class="no">div 01</div>
  <div id="no2" class="no">div 02</div>
  <div id="no3" class="no">div 03</div>
</div>
<nav>
  <a href="#no1"><button>1</button></a>
  <a href="#no2"><button>2</button></a>
  <a href="#no3"><button>3</button></a>
</nav>

그럼 아래는 css 코드입니다. :target된 태그에는 color 속성을 적용하였습니다.

.view .no {
  background: #e9e9e9;
  float: left;
  padding: 20px;
  margin: 5px;
}
.view .no:target {
  color: #f63;
}
nav {
  clear: both;
}

CSS3의 :target은 현재 활성화된 콘텐츠 영역 및 nav 영역을 강조하기 위해서 많이 사용됩니다. CSS를 사용하지 않는 경우 자바스크립트를 사용하는 것도 방법입니다. 하지만 css를 활용하면 간단하게 구현할 수 있습니다.

참고로, IE 9 이상부터만 정상적으로 동작이 가능합니다.



# :target 예제코드 동작해보기아래는 실제로 구현한 예제소스입니다. 직접 아래 링크를 클릭해서 어떻게 동작하는지 알아보세요!