2025-01-30T01:41:18

docs/01_선택자.md

@@ -0,0 +1,204 @@
+# 선택자
+
+CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼.
+선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져!
+
+## 기본 선택자 (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;
+}
+```
+
+