CSS/Pseudo Class :target
CSS Pseudo class :target test
Soul-Learner
2014. 8. 8. 14:12
CSS Pseudo Class 인 :target 사용 예
<a href="url"> 태그를 이용하면 특정 페이지나 페이지 내의 특정 태그로 이동할 수 있다.
이 기능에 더하여 href="#id" 를 사용하여 특정 태그의 아이디를 지정할 수 있는데, 이런 링크가 클릭되면 타겟이 된 태그에는 CSS의 유사 클래스인 :target 의 속성이 설정된다.
이 기능을 이용하면 마우스 클릭 이벤트를 이용하지 않아도 타겟이 된 태그의 CSS 속성을 변경하는 효과를 낼 수 있다.
다음은 링크를 클릭하면 링크의 타겟으로 지정된 태그의 글자 크기가 커지는 예이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>CSS :target test</title>
<style type="text/css">
div#div1 { font-size: 9pt; }
/* 아이디가 'div1'인 div 태그를 타겟으로 설정한 링크가 클릭되면 적용할 속성 */
div#div1:target { font-size: 40pt; }
</style>
</head>
<body>
<div id="div1">DIV 1</div>
<p>
<!-- 아이디가 'div1'인 태그를 타겟으로 설정한 링크 -->
<a href="#div1">DIV 1 target</a>
</body>
</html>