# CSS 선택자

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼.
선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져!

| 선택자 |  |
|---|---|
| * | 전체 선택자 |
| tagname | 요소 선택자 |
| .classname | 클래스 선택자 |
| #idname | 아이디 선택자 |
| A, B, C | 그룹 선택자 |
| A > B | 자식 선택자 |
| A B | 후손 선택자 |
| A + B | 인접 형제 선택자 |
| A ~ B | 일반 형제 선택자 |
| [attr] | 속성 선택자 |
| [attr="value"] | 특정 값과 일치 |
| [attr^="value"] | 특정 값으로 시작 |
| [attr$="value"] | 특정 값으로 끝 |
| [attr*="value"] | 특정 값이 포함 |

## 기본 선택자 (Basic Selectors)

### 전체 선택자 (`*`)
* 문서의 모든 요소를 선택
* 초기화 스타일을 적용할 때 유용
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

### 요소 선택자 (`tagname`)
* 특정 HTML 태그에 스타일 적용
```css
p { /* 모든 <p> 태그에 적용됨 */
  color: blue;
  font-size: 18px;
}
```

### 클래스 선택자 (`.classname`)
* 특정 클래스를 가진 요소 선택
```css
.button { /* <button class="button">Click Me</button>에 적용됨 */
  background-color: red;
  color: white;
}
```

### 아이디 선택자 (`#idname`)
* 특정 ID를 가진 요소 선택
* ID는 문서 내에서 고유해야 함!
```css
#header { /* <div id="header"> 요소에 적용됨 */
  background-color: black;
  color: white;
}
```

## 그룹 / 결합 선택자 (Grouping & Combinators)

### 그룹 선택자 (`A, B, C`)
* 여러 요소에 같은 스타일 적용
```css
h1, h2, h3 {
  font-family: Arial, sans-serif;
}
```

### 자식 선택자 (`A > B`)
* 직접적인 자식 요소만 선택
```css
div > p { /* <div>의 직계 자식 <p>만 스타일 적용됨 */
  color: red;
}
```

### 후손 선택자 (`A B`)
* 자식 + 손자 + 그 이하 모든 후손 요소 선택
```css
div p { /* <div> 안에 있는 모든 <p> 요소에 적용 */
  font-weight: bold;
}
```

### 인접 형제 선택자 (`A + B`)
* 특정 요소 바로 다음에 오는 형제 요소 하나 선택
```css
h1 + p { /* <h1> 다음에 나오는 첫 번째 <p>만 적용됨 */
  color: green;
}
```

### 일반 형제 선택자 (`A ~ B`)
* 특정 요소 뒤에 나오는 모든 형제 요소 선택
```css
h1 ~ p { /* <h1> 뒤에 나오는 모든 <p>에 적용됨 */
  font-style: italic;
}
```

## 속성 선택자 (Attribute Selectors)

### 특정 속성이 있는 요소 선택 (`[attr]`)
```css
input[required] { /* <input required> 필드에 빨간 테두리 적용 */
  border: 2px solid red;
}
```

### 특정 값과 일치하는 속성 선택 (`[attr="value"]`)
```css
input[type="password"] { /* <input type="password"> 필드 배경색 변경 */
  background-color: lightgray;
}
```

### 특정 값으로 시작하는 속성 선택 (`[attr^="value"]`)
```css
a[href^="https"] { /* href가 "https"로 시작하는 모든 링크 선택 */
  color: blue;
}
```

### 특정 값으로 끝나는 속성 선택 (`[attr$="value"]`)
```css
img[src$=".jpg"] { /* .jpg로 끝나는 이미지에 둥근 테두리 적용 */
  border-radius: 10px;
}
```

### 특정 값이 포함된 속성 선택 (`[attr*="value"]`)
```css
div[class*="box"] { /* class에 "box"가 포함된 모든 <div>에 적용됨 */
  border: 1px solid black;
}
```

## 가상 클래스 (Pseudo-classes)

### 링크 상태에 따라 스타일 적용
```css
a:link { color: blue; }   /* 방문하지 않은 링크 */
a:visited { color: purple; } /* 방문한 링크 */
a:hover { color: red; }   /* 마우스 올릴 때 */
a:active { color: orange; } /* 클릭 중 */
```

### `:first-child` / `:last-child`
부모 요소의 첫 번째/마지막 자식 요소에 적용
```css
p:first-child {
  font-weight: bold;
}
p:last-child {
  color: gray;
}
```

### `:nth-child(n)`
```css
li:nth-child(odd) { background: lightgray; }
li:nth-child(3) { color: red; }
/* 홀수 번째 li는 회색, 세 번째 li는 빨강 */
```

### `:not(selector)` (특정 요소 제외)
```css
button:not(.disabled) {
  background-color: green;
}
/* .disabled 클래스를 제외한 모든 <button>에 적용 */
```

## 가상 요소 (Pseudo-elements)

### `::before` / `::after` (가상 요소 추가)
```css
p::before {
  content: "🔥 ";
}
p::after {
  content: " ✅";
}
/* <p> 태그 앞뒤에 가상 요소 추가 */
```

### `::first-letter` / `::first-line`
```css
p::first-letter {
  font-size: 2em;
  color: red;
}

p::first-line {
  font-weight: bold;
}
/* 첫 글자는 크게, 첫 줄은 굵게 */
```

## 고급 선택자 (Advanced Selectors)

### `:focus-within` (자식 요소가 포커스를 가질 때)
```css
form:focus-within { /* 폼 내부 요소가 포커스를 받으면 배경색 변경 */
  background: lightyellow;
}
```

### `:has(selector)` (부모 요소 선택)
```css
article:has(img) { /* <img>가 포함된 <article>에 테두리 추가 */
  border: 2px solid blue;
}
```