1.5.2 target pseudo-class
target 의사 클래스(pseudo-class)는 참조되는 URI의 대상(target) 요소(Element)를 나타내는데 사용됩니다. 그래서 HTML 문서 내의 특정 위치를 가리킬 수 있도록 할 수 있는데 URL을 이용할 경우 번호 기호를 나타내는 #와 fragement identifier(혹은 anchor identifier)을 함께 사용하여 나타낼 수 있습니다.
"http://example.com/prog.html#section_2"
위에서 prog.html 문서 안의 fragement identifier는
“section_2”을 가리킵니다.
이러한 fragement identifier는 HTML5의
특정 요소(Element)의 id 속성값이 될 수도 있습니다.
예를 들어 위의 fragement identifier가 “section_2”인데
이를 HTML5의 p 요소에 id 속성을 적용하여 나타낼 경우 <p id=”section_2”>와
같이 나타낼 수 있습니다.
그래서 target 의사 클래스(pseudo-class)에
대상(target) 요소에 대한 스타일은 다음과 같은 형식을 사용할 수 있습니다.
:target { property:value; property:value; …}
selector:target { property:value; property:value; …}
참고로 URI에 대해서 간략히 소개하면 URI(Uniform Resource Identifie)는
자원(resource)나 이름을 구별하기 위해서 사용되는 문자열로
URI는 여러분들에게 친숙한 “http://www.daum.net”, “http://www.naver.com”과
같이 인터넷 자원을 나타내는 URL(Uniform Resource Locator)와 위치에 독립적인
이름을 제공하는데 사용되는 URN(Uniform Resource Name)을 포함하는 개념으로 일반적으로 URI하면 URL로 이해를 하면 큰 무리가 없을 것입니다.
이제 p 요소가 대상(target)이 되는 예제를
하나 해볼까요? 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>target pseudo-class를 간단한 예제</title>
<style>
p { font-size:10px; }
p:target {
font-size: 20px;
color:red;
text-decoration: underline;
text-align:center;
}
</style>
</head>
<body>
<a href="#target1">클릭하세요.</a>
<p id="target1">CSS3</p>
</body>
</html>먼저 <body> … </body>블록 부분을 보면 a 요소의 href 속성을 이용하여 URI 대상(target)이 되는 p 요소의 id 속성값으로 fragement identifier인 “target1”을 설정합니다.
이제 <style> … </style> 블록 부분을 보면 a 요소를 클릭하는 동작을 하지 않은 상태에서 p 요소는 폰트 크기가 10px로 설정합니다.
그리고 a 요소를 클릭하면 target 의사
클래스(pseudo-class)에 의해 p 요소에 대해서
폰트 크기가 20px, 글꼴 색상은 빨강색, p 요소의 내용(content)에 밑줄을 긋고 마지막으로 내용을 가운데 정렬하도록 합니다. “target_pseudo-classEx.html”로 저장하고 Firefox를 통해 보면
다음과 같이 나타납니다.
이제 위에서 “클릭하세요.” 부분을 클릭합니다. 그러면 다음과 같이 <style> … </style> 블록에 설정한 스타일이 p 요소에 적용됩니다.
“target_pseudo-classEx.html”에서 <body> … </body> 블록 안의 a 요소 시작 태그 부분을 fragement identifier인 “target1”을 포함하는 URL 형태로 다음과 같이 설정해도 됩니다.
<a href="http://localhost/target_pseudo-classEx.html#target1">클릭하세요.</a>
다음으로 블로그에 댓글 달기 기능 유사한 것을 하나 만들어볼까요? 메모장을 열어서 다음과
같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>target pseudo-element를 이용 예제</title>
<style type="text/css">
div{ display: none; }
:target { display: block; }
</style>
</head>
<body>
<a
href="http://localhost/target_pseudo_class_comment.html#newcomment">
댓글 달기</a>
<div id="newcomment" style="background-color:orange;"><br />
<form name="commentForm">
이름<input type="text" name="userName"/><br />
비밀번호<input type="password" name="userPasswd" /><br />
홈페이지<input type="text" name="userHomepage" size="50" /><br />
내용<br />
<textarea name="commentTextarea"></textarea><br />
<button type="submit">댓글 저장</button>
</form>
</div>
</body>
</html><body>
… </body> 블록 부분을
먼저 설명하면 div 요소 안에 form 요소와 input, textarea, button 요소 등을 이용하여 사용자가 웹 브라우저를 통해 댓글을 입력하고 웹
서버로 전송할 수 있도록 하는 구조를 만들었습니다.
유심히 볼 부분은 역시 a 요소의 시작 태그 부분과 div 요소의 시작 태그 부분입니다.
<style> … </style> 부분을 보면 처음 웹 페이지가 로드될 때
div 요소 부분이 나타나지 않도록 display 속성을
none으로 설정하였고 a 요소를 클릭하면 target 의사
클래스(pseudo-class)에 의해
id 속성값이 “newcomment”인 display 속성값을
줄바꿈이 가능한 block으로 설정하여 브라우저에 나타내도록 처리합니다.
위 코드를 “target_pseudo_class_comment.html”로 저장하고 Firefox를 실행하여 다음과 같이 URL 입력창에 “http://localhost/target_pseudo_class_comment.html”로 입력합니다.
이제 위에서
“댓글 달기” 부분을 클릭합니다. 그러면 다음과 같이 <style> … </style> 블록에
설정한 스타일이 div 요소에 적용되어 다음과 같이 나타납니다.
나타난 form 양식에 이름, 비밀번호 등을 입력한 후 맨 하단의 댓글 저장
버튼을 클릭하여 웹 서버로 데이터를 전송할 수 있습니다
이상으로 target 의사 클래스(pseudo-class)
선택자에 대해서 알아보았습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.5.4 UI element state pseudo-class (0) | 2013.07.31 |
|---|---|
| 1.5.3 언어(lang) pseudo-class (0) | 2013.07.31 |
| 1.5.1 동적(dynamic) pseudo-class (0) | 2013.07.31 |
| 1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.07.31 |
| 1.4.7 “[속성*=속성값]”의 경우 (0) | 2013.07.31 |
