[CSS] CSS 마무리 정리

1. 선택자

CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원한다.

 

2. 기본 선택자

• 전체 선택자 : 모든 태그를 선택자로 지정한다.
• 태그 선택자 : 태그명으로 선택자를 지정한다.
• 아이디 선택자 : id 속성값으로 선택자를 지정한다.
• 클래스 선택자 : class 속성값으로 선택자를 지정한다.
• 기본 속성 선택자 : HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정한다.
• 문자열 속성 선택자 : 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정한다.

 

3. 조합 선택자

기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 한다.

• 그룹 선택자 : 여러 선택자를 , 기호로 구분해 선택자를 그룹으로 묶어서 지정
• 자식 선택자 : 선택자 범위를 자식 관계로 제한하고, > 기호로 구분자 사용한다.
• 하위 선택자 : 선택자 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용한다.
• 인접 형제 선택자 : 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고 + 기호를 구분자로 사용
• 일반 형제 선택자 : 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고 , ~ 기호를 구분자로 사용

 

4. 가상 요소 선택자

실제로 존재하는 요소는 아니지만 존재한다고 가정하고 선택하는 방법으로 가상 요소 선택자 앞에는 :: 기호(콜론 2개)를 붙인다.

• ::before : 요소의 맨 앞 선택
• ::after : 요소의 맨 뒤 선택

 

5.  가상 클래스 선택자

요소의 상태를 이용해 선택자를 지정하는 방법으로 가상 클래스 선택자 앞에는 : 기호를 붙인다.

 

 1. 링크 가상 클래스 선택자

• : l i n k : 링크를 한번도 방문한 적 없는 상태
• : v i s i t e d : 링크를 한 번 이상 방문한 적이 있는 상태

2. 동적 가상 클래스 선택자

• : h o v e r : 마우스를 올린 상태
• : a c t i v e : 마우스로 클릭한 상태

3.  입력 요소 가상 클래스 선택자

• : f o c u s : 입력 요소에 커서가 활성화된 상태
• : c h e c k e d : 체크박스 요소에 체크한 상태
• : d i s a b l e d : 상호작용 요소가 비활성화된 상태
• : e n a b l e d : 상호작용 요소가 활성화된 상태

4.  구조적 가상 클래스 선택자

• :first-child, :last-chile  : 첫 번째 자식 태그와 마지막 자식 태그
• :nth-child(n), :nth-last-child(n)  : n 번째 자식 태그와 끝에서 n번째 자식 태그
• :nth-of-type(n), :nth-last-of-type(n) : n 번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그
• :first-of-type, :last-of-type : 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그