1. 선택자란
CSS에서 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다. 선택자를 사용해 특정 태그를 선택하면 해당 태그에 원하는 스타일과 기능을 적용할 수 있습니다. 최근 웹 페이지는 스타일의 비중이 높아졌습니다. 그에 따라 선택자를 지정하는 방법도 무조건 클래스를 붙이기보다는 효율적으로 선택자를 구성하면 좋습니다.
이전에 CSS 기초와 기본 문법에서 선택자를 간단하게 다룬 적이 있습니다.
https://hyun0907.tistory.com/9
CSS 기초와 기본 문법
1. CSS란 웹 표준에서 CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. CSS에서 C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일시트'라는 의미다. 다만 HTML처럼 마크업 언어도
hyun0907.tistory.com
이외에도 CSS 선택자의 종류는 매우 많습니다. 그 종류에 대해 알아보겠습니다.
2. 선택자의 종류
| 선택자 구분 | 형태 |
| 전체 선택자 | * |
| 태그 선택자 | 태그 |
| 아이디 선택자 | #아이디 |
| 클래스 선택자 | .클래스 |
| 후손 선택자 | 선택자 선택자 |
| 자손 선택자 | 선택자>선택자 |
| 속성 선택자 | 선택자 [속성=값] |
| 선택자 [속성~=값] | |
| 선택자 [속성|=값] | |
| 선택자 [속성^=값] | |
| 선택자 [속성$=값] | |
| 선택자 [속성*=값] | |
| 동위 선택자 | 선택자+선택자 |
| 선택자~선택자 | |
| 구조 선택자 | 선택자:first-child / first-of-type |
| 선택자:last-child / last-of-type | |
| 선택자:nth-child(n) / nth-of-type(n) | |
| 선택자:nth-last-child(n) / nth-last-of-type(n) | |
| 반응 선택자 | 선택자:active |
| 선택자:hover | |
| 상태 선택자 | :checked |
| :focus | |
| :enabled | |
| :disabled | |
| 링크 선택자 | :link |
| :visited | |
| 문자 선택자 | ::first-letter |
| ::first-line | |
| ::after | |
| ::before | |
| ::selection | |
| 부정 선택자 | 선택자:not(선택자) |
3. 전체 선택자
전체 선택자는 모든 웹 페이지에 빠지지 않고 사용합니다. 보통 웹 페이지 제작 전 스타일 값을 초기화시키기 위해서도 사용하고 있습니다.
| 선택자 | 형태 | 설명 |
| 전체 선택자 | * | HTML 페이지 내부 모든 태그를 선택합니다. |
예문
4. 태그 선택자
HTML 페이지 내부, 특정 태그를 모두 선택할 때 사용하는 선택자입니다. 여러 태그들을 한 번에 선택해 스타일 속성을 적용할 때에는 쉼표로 구분합니다.
| 선택자 | 형태 | 설명 |
| 태그 선택자 | 태그(h1, h2, h3, p...) | 특정 태그를 모두 선택합니다. |
예문
설명: 모든 div 태그에게 color: red 값을 적용시킵니다.
설명: body와 모든 div, span, h2 태그에게 color: red 값을 적용시킵니다.
5. 아이디 선택자와 클래스 선택자
아이디와 클래스 선택자는 CSS 기초에서 설명했습니다. 보통 웹 페이지의 레이아웃을 구성하고 디자인을 적용할 때 자주 쓰입니다.
| 선택자 | 형태 | 설명 |
| 아이디 선택자 | #아이디 | 아이디 속성을 가지고 있는 태그를 선택합니다. |
| 클래스 선택자 | .클래스 | 특정한 클래스를 가지고 있는 태그를 선택합니다. |
예문
6. 후손 선택자와 자손 선택자
후손 선택자
후손 선택자는 부모 선택자 안에 있는 모든 자식 선택자를 말합니다. 후손 선택자의 표기는 공백으로 표현합니다.
자손 선택자
자손 선택자는 부모 선택자 바로 아래 계층에 있는 선택자를 말하며 자손 선택자의 표기는 '>'로 표시합니다.
코드가 복잡할 때 체계적으로 구성하기 위해 활용하면 좋습니다.
| 선택자 | 형태 | 설명 |
| 후손 선택자 | 선택자 A 선택자 B | 선택자 A의 후손에 위치하는 선택자 B를 선택합니다. |
| 자손 선택자 | 선택자 A>선택자 B | 선택자 A의 자손에 위치하는 선택자 B를 선택합니다. |
예문
7. 속성 선택자
특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 선택자 뒤에 대괄호 [ ]를 사용하여 속성과 값을 입력합니다.
| 선택자 | 형태 | 설명 |
| 속성 선택자 | 선택자[속성=값] | 속성 안의 값이 특정값과 조건에 만족하는 문서 객체를 선택합니다. |
예문
8. 동위 선택자
동위 선택자는 동위 관계(같은 관계)에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자입니다. 사용하실 때는 우선 순위 관계를 주의해야 합니다.
| 선택자 | 형태 | 설명 |
| 동위 선택자 | 선택자 A+선택자 B | 선택자 A 바로 뒤에 있는 선택자 B를 선택합니다. |
| 선택자 A~선택자 B | 선택자 A 뒤에 위치하는 선택자 B를 선택합니다. |
예문
9. 반응 선택자
반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자입니다. 사용자가 마우스를 특정 태그에 올리거나 클릭했을 때의 상태입니다.
| 선택자 | 형태 | 설명 |
| 반응 선택자 | :active | 사용자가 마우스로 클릭한 태그를 선택합니다. |
| :hover | 사용자의 마우스가 오버되는 태그를 선택합니다. |
예문
10. 구조 선택자, 형태 구조 선택자
구조 선택자
구조 선택자는 같은 그룹 내에서 우선 순위를 지정할 수 있습니다. CSS3부터 지원합니다.
| 선택자 | 형태 | 설명 |
| 구조 선택자 | :first-child | 부모 박스 안 형제 관계 중 첫 번째에 위치하는 태그를 선택합니다. |
| :last-child | 부모 박스 안의 형제 관계 중 마지막에 위치하는 태그를 선택합니다. | |
| :nth-child(수열) | 부모 박스 안의 형제 관계 중 앞에서 (수열) 번째에 해당하는 태그를 선택합니다. 부모 태그와 자식 태그가 동일하다면 부모 태그도 계산됩니다. | |
| :nth-last-child(수열) | 부모 박스 안의 형제 관계 중 뒤에서 (수열) 번째에 해당하는 태그를 선택합니다. |
수열에는 0부터 숫자가 대입될 수 있습니다. 숫자, 짝수열, 홀수열로 입력 가능합니다.
- 짝수 수열은 2n, even으로도 선택이 가능합니다.
- 홀수 수열은 2n-1, 2n+1, odd로도 선택이 가능합니다.
형태 구조 선택자
형태 구조 선택자는 일반 구조 선택자와 비슷하지만, 태그 형태를 구분합니다.
| 선택자 | 형태 | 설명 |
| 형태 구조 선택자 | :first-of-type | 부모 박스 안의 형제 관계 중 첫 번째로 등장하는 특정 태그를 선택합니다. |
| :last-of-type | 부모 박스 안의 형제 관계 중 마지막으로 등장하는 특정 태그를 선택합니다. | |
| :nth-of-type(수열) | 부모 박스 안의 형제 관계 중 (수열) 번째로 등장하는 특정 태그를 선택합니다. | |
| :nth-last-of-type(수열) | 부모 박스 안의 형제 관계 중 뒤에서 (수열) 번째에 등장하는 특정 태그를 선택합니다. |
예문
구조 선택자와 형태 구조 선택자를 비유로 더 쉽게 설명해보겠습니다. 성별이 태그라고 가정해보면,
남 남 여 여 여 남 남 여 남 여
이렇게 존재한다고 합시다. 이 보라색 표시가 된 '여 '를 선택하려고 한다면
여:nth-child(4)
여:nth-of-type(2)
이렇게 두 가지로 선택이 가능합니다.
nth-child(4)는 모든 태그들이 순서에 포함되므로 태그들 중 4번째에 해당하는 요소를 선택한다는 뜻입니다.
nth-of-type(2)는 특정 태그, 즉 '여' 태그 중 2번째에 해당하는 요소를 선택한다는 뜻입니다.
11. 상태 선택자
상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자입니다.
| 선택자 | 형태 | 설명 |
| 상태 선택자 | :checked | 체크 상태의 input 태그를 선택합니다. |
| :focus | 초점이 맞춰진 input 태그를 선택합니다. | |
| :enabled | 사용 가능한 input 태그를 선택합니다. | |
| :disabled | 사용 불가능한 input 태그를 선택합니다. |
주로 input의 태그에 사용하는 선택자입니다.
예문
12. 시작 문자 선택자
시작 문자 선택자는 태그 내부 첫 번째 글자와 첫 번째 줄을 선택할 때 사용하는 선택자입니다.
| 선택자 | 형태 | 설명 |
| 시작 문자 선택자 | ::first-letter | 첫 번째 글자를 선택합니다. |
| ::first-line | 첫 번째 줄을 선택합니다. |
예문
13. 가상 요소 선택자
HTML 코드에서 존재하지 않는 구조 요소에 스타일을 부여할 수 있습니다. 문서 내에서 보이지 않지만 선택될 요소의 특별한 상태를 지정하는 선택자입니다. 선택될 요소 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현합니다.
| 선택자 | 형태 | 설명 |
| 가상 요소 선택자 | ::before | 특정 요소 앞에 삽입하며, 내용이 필요할 경우 'content' 속성을 이용합니다. |
| ::after | 특정 요소 뒤에 삽입하며, 내용이 필요할 경우 'content' 속성을 이용합니다. |
예문
'HTML, CSS' 카테고리의 다른 글
| [CSS] float 문제와 특징 (0) | 2024.02.12 |
|---|---|
| [CSS] float, clear / float과 overflow: hidden (1) | 2024.02.09 |
| [CSS] @charset "utf-8"; (1) | 2024.02.07 |
| [HTML, CSS] 목록 표현 태그 <li>, <ul>, <ol> / 정의 목록 태그 <dl>, <dt>, <dd>, <dfn>와 목록 스타일 속성 (1) | 2024.02.06 |
| [CSS] overflow: 부모 박스의 범위를 벗어날 때 (0) | 2024.02.05 |
