[CSS ] 02. CSS 선택자 정리

[CSS ] 02. CSS 선택자 정리

---

1. 선택자란?

CSS 선택자는 스타일을 적용할 HTML 요소를 지정하기 위한 문법이다.

CSS는 선택자를 통해 어떤 요소에 스타일을 적용할지 결정한다.

---

2. 태그 선택자

HTML 태그 이름을 그대로 선택자로 사용한다.

p {
    color: blue;
}

모든 <p> 태그에 동일한 스타일이 적용된다.

---

3. 클래스 선택자

class 속성을 가진 요소를 선택한다.

.text {
    color: red;
}

HTML 예시:

<p class="text">내용</p>

• 여러 요소에 동일한 스타일 적용 가능
• 가장 많이 사용되는 선택자

---

4. 아이디 선택자

id 속성을 가진 요소를 선택한다.

#title {
    font-size: 32px;
}

HTML 예시:

<h1 id="title">제목</h1>

• 문서 내에서 하나의 요소만 사용
• 고유한 요소에 스타일 적용

---

5. 선택자 우선순위

같은 요소에 여러 스타일이 적용될 경우, 선택자 우선순위에 따라 스타일이 결정된다.

1. id 선택자
2. class 선택자
3. 태그 선택자

---

6. 그룹 선택자

여러 선택자에 동일한 스타일을 적용할 수 있다.

h1, h2, p {
    color: green;
}

---

7. 자식 선택자

특정 요소의 바로 아래 자식 요소를 선택한다.

div > p {
    color: blue;
}

div 바로 아래에 있는 p 요소만 선택된다.

---

8. 자손 선택자

특정 요소 내부에 포함된 모든 자손 요소를 선택한다.

div p {
    color: red;
}

div 안에 있는 모든 p 요소가 선택된다.

---

9. 속성 선택자

특정 속성을 가진 요소를 선택한다.

input[type="text"] {
    border: 1px solid black;
}

---

10. 가상 클래스 선택자

요소의 상태에 따라 스타일을 적용한다.

a:hover {
    color: red;
}

• :hover - 마우스를 올렸을 때
• :active - 클릭 중일 때
• :focus - 포커스 상태

---

11. 정리

• 선택자는 스타일 적용 대상을 지정한다
• class 선택자는 여러 요소에 사용 가능
• id 선택자는 하나의 요소에만 사용
• 선택자 우선순위를 이해해야 한다