입문자를 위한 CSS 기초 강의(9)

특성 선택자

---

1) 컨셉

• 특성 선택자는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

[class]{ background-color: violet;}
[class="item"]{ background-color: violet;}

-> 클래스 속성을 가지고 있는 요소를 선택하기
->클래스가 item"인 요소를 선택하기

2) 값 확인

• 기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

[class *= "it"] {color: white;} 
[class ^= "it"] {color: white;}
[class $= "it"] {color: white;}

-> 클래스 값에 "it"가 포함되는 요소를 선택하기
->클래스 값에 "it"가 시작되는 요소를 선택하기
->클래스 값에 "it"가 끝나는 요소를 선택하기

결합 선택자

---

1) 컨셉

• 결합 선택자는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다.

2) 자손 결합자

• 두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있다.

div p{ color: yellowgreen; }
div > p{ color: yellowgreen; }

-> div 요소 안에 위치하는 모든 p 요소를 선택하기
-> div 요소의 바로 아래 위치하는 모든 p 요소를 선택하기

3) 형제 결합자

• 두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.

 h1~p {color: tomato;}
 h1+p {color: tomato;}

-> h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기
-> h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기

의사 클래스

---

• 의사 클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을때 요소를 선택하겠다는 의미이다.

의사클래스	의미
hover	마우스 포인터가 요소에 올라가 있다.
active	사용자가 요소를 활성화했다.(예를 들면,마우스로 누르기와 같은)
focus	요소가 포커스를 받고 있다.
disabled	비활성 상태의 요소이다.
nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다.

의사요소

---

• 의사요소는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

의사요소	의미
after	요소의 앞에 의사 요소를 생성 및 추가한다.
before	요소의 뒤에 의사 요소를 생성 및 추가한다.
first-line	블록레벨 요소의 첫 번째 선에 스타일을 적용한다.
marker	목록 기호의 스타일을 적용한다.
placeholder	입력 요소의 플레이스홀더 스타일을 적용한다.