1.5.4 UI element state pseudo-class
form과 같은 UI(User Interface) 요소들은 사용자가 버튼을 클릭하거나 데이터를 입력하는 것과 같은 활동에 의해서 다양한 상태를 가지게 됩니다. CSS3에서는 이러한 상태에 대해서 다음과 같은 형식을 이용하여 CSS 규칙을 설정하여 스타일을 적용할 수 있습니다.
HTML요소이름:pseudoclass이름 { property:value; property:value; …}
위에서 “pseudoclass이름”에 들어갈 수 있는 UI element state 의사-클래스(pseudo-class)는 다음과 같습니다.
|
pseudo-class |
설명 |
|
enabled |
해당 요소가 사용 가능한 상태 |
|
disabled |
해당 요소가 사용 불가능한 상태 |
|
checked |
checkbox나 radio button 같은 요소가 체크된 상태 |
메모장을 이용하여
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>UI pseudo-class를 이용한 선택자 예제</title>
<style>
</style>
</head>
<body>
<form>
전화: <input
type="tel"><br>
이메일:
<input type="email" disabled="disabled"><br/>
성별<br
/>
<input type="radio"
id="m" name="성별"
value="male">
<label for="m">남성</label>
<input type="radio"
id="f" name="성별"
value="female">
<label for="f">여성</label><br />
좋아하는 영화 장르<br
/>
<input type="checkbox"
name="movie" id="sel_action" />
<label
for="sel_action">액션</label>
<input type="checkbox"
name="movie" id="sel_horror" />
<label
for="sel_horror">공포</label>
</form>
</body>
</html>
“UI_pseudo-classEx.html”로 저장한 후 IE9를 통해 그 출력 결과를 보면
다음과 같습니다.
이제 enabled, disabled, checked 의사 클래스를 이용하여 CSS
규칙을 만들고 스타일을 적용해볼까요? <style> … </style> 블록
내에 다음과 같이 코드를 작성합니다.
<style>
input[type=tel]:enabled{background-color: red;}
input:disabled{background-color: blue;}
input:checked+label{font-weight:
bold}
</style>
첫 번째 CSS 규칙은 input 요소의 type 속성값이 “tel”이고 사용 가능한 상태일 경우 배경 색상을 빨강색으로 나타냅니다. 두 번째 CSS 규칙은 input 요소들 중 사용 불가능한 상태인 input 요소에 대해서 배경 색상을 파란색으로 설정, 마지막으로 input 요소가 체크된 상태(checked)일 경우에 레이블(label)의 font-weight를 두껍게(bold) 나타내도록 합니다. 이제 저장하고 IE9를 통해 열면 enabled, disabled에 대해서 스타일 적용되어 나타나고 성별 아래의 라디오 버튼이나 좋아하는 영화 장르 아래의 체크박스에 체크하면 다음과 같이 각각 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| nth-of-type, nth-last-of-type (0) | 2013.08.01 |
|---|---|
| 1.5.5 구조적(structural) pseudo-class (0) | 2013.08.01 |
| 1.5.3 언어(lang) pseudo-class (0) | 2013.07.31 |
| 1.5.2 target pseudo-class (0) | 2013.07.31 |
| 1.5.1 동적(dynamic) pseudo-class (0) | 2013.07.31 |
