[CSS]CSS선택자2

1. 기본 속성 선택자

 

- 태그에 작성된 속성을 이용해 선택하는 선택자

 

- 속성, 속성 값이 일치하는 요소만을 선택

 

- '속성값' 의 ''(홑따옴표)는 ""(쌍따옴표)로 대체 가능 또는 생략도 가능

 

[작성법]

<name 속성 선택하기 (html에 존재하는 속성)>

 

<모든 div 중 name 값이 'name1'인 요소만 선택하기>

 

<임의의 속성 선택하기(html에 존재하지 않는 속성)>

 

 <p태그 중 qwer 속성 값이 'test1'인 요소만 선택하기>

 

 

2. 자식 선택자(A선택자 > B선택자)

 

지정된 요소(A선택자)의 바로 한 단계 아래에 있는 요소(B선택자) 선택

 

[작성법]

 

 

[HTML]

 

 

[css]

 

#결과

 

 

3. 후손/자손 선택자 (작성법: 띄어쓰기)

 

지정된 요소 하위에 존재하는 모든 요소

(단계 상관 없음, 1 level 이하 모든 요소)

 

[작성법]

 

 

[HTML]

 

 

[CSS]

 

#결과

 

 

4. 상태 선택자

 

입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자

 

:focus -> 요소에 초점이 맞춰졌을 때

(input 요소를 클릭해서 입력할 준비가 되었을 때)

 

:checked -> 요소가 체크 되었을 때(radio, checkbox)

 

:enabled / :disabled -> 요소가 활성/비활성화 되었을 때

 

 

[HTML]

 

 

[CSS]

 

# 결과

 

 

5. 반응 선택자

 

사용자의 움직임에 반응하여 선택하는 선택자

   선택자:hover : 선택된 요소에 마우스 커서가 올라 갔을 때

   선택자:active : 선택된 요소를 클릭하고 있을 때

 

 

[HTML]

 

 

[CSS]

 

#결과

 

커서가 올라 갔을 때

 

클릭시

 

 

6. 동위 선택자

 

동위(동등한 위치 == 형제 관계) 관계에서 다음(뒤)에 위치한 요소를 선택하는 선택자

 

A

B  +

B

 

1)  A 바로 다음에 위치한 B 요소 하나 선택 ( + )

 

 

2)  A 바로 다음에 위치한 B 요소 모두 선택 ( ~ , Tilde(틸드) )

 

[HTML]

 

 

[CSS]

 

#결과

 

 

<체크박스 꾸미기>

 [준비물]

    - input type="checkbox"

    - label 태그 (for 속성)

    - 상태 선택자(:checked)

    - 동위 선택자( + )

    - check 이미지

 

 

[ HTML]

 

 

[CSS]

1) label 요소를 체크박스 모양으로 만들기

 

2) #check1이 체크 되었을 때 lavel의 배경이미지 변경

 

3) 체크박스를 존재는 하지만 보이지 않게 처리

#결과