day 12

연결 선택자

 

하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기

자식 선택자 - 자식 요소에만 스타일 적용하기

인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기

형제 선택자 - 형제 요소에 스타일 적용하기

 

속성 선택자

 

[속성] 선택자 - 지정한 속성에 스타일 적용하기

[속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용하기

[속성 ~= 값] 선택자 - 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

[속성 |= 값] 선택자 - 특정 값이 포함된 속성에 스타일 적용하기

[속성 ^= 값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용하기

[속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용하기

[속성 *=값] 선택자 - 값의 일부가 일치하는 속성에 스타일 적용하기

 

가상 클래스와 가상 요소

 

사용자 동작에 반응하는 가상 클래스

1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용

2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용

3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때의 스타일 적용

5. :focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

 

UI 요소 상태에 따른 가상 클래스

1. :enabled와 :disabled 가상 클래스 선택자 - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정

2. :checked 가상 클래스 선택자 - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

 

구조 가상 클래스

1. :root 가상 클래스 선택자 - 문서 전체에 적용하기

2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자 - 자식 요소의 위치에 따라 스타일 적용하기

3. :nth-of-type(n), :nth-last-of-type(n) 가상 클래스 선택자 - 특정 태그 위치에 스타일 적용하기

4. :first-child, :last-child 가상 클래스 선택자 - 첫 번째, 마지막 요소에 스타일 적용하기

5. :first-of-type, :last-of-type 가상 클래스 선택자 - 형제 관계 요소의 위치에 따라 스타일 적용하기

6. :only-child, :only-of-type 가상 클래스 선택자 - 하나뿐인 자식 요소에 스타일 적용하기

 

그 외 가상 클래스

1. :target 가상 클래스 선택자 - 앵커 목적지에 스타일 적용하기

2. :not 가상 클래스 선택자 - 특정 요소가 아닐 때 스타일 적용하기

 

가상 요소

1. ::first-line 요소와 ::first-letter 요소 - 첫 번째 줄, 첫 번째 글자에 스타일 적용하기

2. ::before, ::after 요소 - 내용의 앞뒤에 콘텐츠 추가하기