웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.
가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.
div:target { color: red; }
# CSS3 :target 예제보기
아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.
그럼 아래는 css 코드입니다. :target된 태그에는 color 속성을 적용하였습니다.
CSS3의 :target은 현재 활성화된 콘텐츠 영역 및 nav 영역을 강조하기 위해서 많이 사용됩니다. CSS를 사용하지 않는 경우 자바스크립트를 사용하는 것도 방법입니다. 하지만 css를 활용하면 간단하게 구현할 수 있습니다.
참고로, IE 9 이상부터만 정상적으로 동작이 가능합니다.
클릭하면 선택된 엘리먼트의 색이 바뀐 모습을 보실 수 있습니다. 이 css 속성을 사용하면 나중에 클릭된 요소들을 구분하기 위해 스타일을 추가할 수 있게됩니다.
가상선택자 :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>
<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;
}
background: #e9e9e9;
float: left;
padding: 20px;
margin: 5px;
}
.view .no:target {
color: #f63;
}
nav {
clear: both;
}
CSS3의 :target은 현재 활성화된 콘텐츠 영역 및 nav 영역을 강조하기 위해서 많이 사용됩니다. CSS를 사용하지 않는 경우 자바스크립트를 사용하는 것도 방법입니다. 하지만 css를 활용하면 간단하게 구현할 수 있습니다.
참고로, IE 9 이상부터만 정상적으로 동작이 가능합니다.
# :target 예제코드 동작해보기
아래는 실제로 구현한 예제소스입니다. 직접 아래 링크를 클릭해서 어떻게 동작하는지 알아보세요!<div class="test">
<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>
</div>
<style>
.test .view .no {
background: #e9e9e9;
float: left;
padding: 20px;
margin: 5px;
}
.test .view .no:target {
color: #f63;
}
.test nav {
clear: both;
}
</style>
<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>
</div>
<style>
.test .view .no {
background: #e9e9e9;
float: left;
padding: 20px;
margin: 5px;
}
.test .view .no:target {
color: #f63;
}
.test nav {
clear: both;
}
</style>
클릭하면 선택된 엘리먼트의 색이 바뀐 모습을 보실 수 있습니다. 이 css 속성을 사용하면 나중에 클릭된 요소들을 구분하기 위해 스타일을 추가할 수 있게됩니다.
아래의 글도 찾고 계시지 않나요?
[jQuery] 제이쿼리 선택자 escapeSelector() 알아보기
jQuery 선택자 first() 메소드 알아보기
제이쿼리 다음 엘리먼트 찾기 next() nextAll()
제이쿼리 not() 메소드 알아보기
CSS animation 구현시 마지막 상태 유지하는 방법- 자바스크립트 event target 프로퍼티와 currentTarget 프로퍼티의 차이점은?
- 제이쿼리 - 속성 값 시작 또는 끝과 일치하는 텍스트만 찾기
- LESS에서 ::after 및 ::before 그리고 :hover 사용하는 방법
CSS3 animation으로 carousel 만들기