CSS selectors

CSS 선택자

CSS 선택자는 HTML에서 꾸미고 싶은 요소를 선택하는 방법이에요.
"어떤 요소를 꾸밀 것인지"를 정하는 역할을 하죠.
예를 들어, 제목은 빨간색, 문단은 파란색으로 꾸미고 싶을 때, 선택자를 사용해 해당 요소를 선택해 스타일을 적용합니다.

---

1. 기본 선택자

ㄱ. 태그 선택자 (Type Selector)

• HTML 태그를 직접 선택해서 스타일을 적용합니다.
• 예시: 모든 <p>(문단) 태그를 빨간색으로.

p {
  color: red;
}

---

ㄴ. 클래스 선택자 (Class Selector)

• 같은 스타일을 적용할 여러 요소에 사용합니다.
• HTML에서 class="클래스 이름"을 추가하고, CSS에서 .클래스이름으로 선택합니다.
• 예시: class="highlight"인 요소를 노란색으로.

.highlight {
  background-color: yellow;
}

---

ㄷ. 아이디 선택자 (ID Selector)

• 특정 하나의 요소를 선택할 때 사용합니다.
• HTML에서 id="아이디 이름"을 추가하고, CSS에서 #아이디이름으로 선택합니다.
• 예시: id="title"인 요소를 파란색으로.

#title {
  color: blue;
}

---

2. 그룹 선택자

• 여러 요소에 같은 스타일을 적용하고 싶을 때 사용합니다.
• 예시: 모든 <h1>과 <h2>를 초록색으로.

h1, h2 {
  color: green;
}

---

3. 속성 선택자 (Attribute Selector)

• HTML 요소의 특정 속성을 가진 요소만 선택합니다.
• 예시: type="text"인 <input>만 테두리를 빨간색으로.

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

---

4. 조합 선택자 (Combinators)

ㄱ. 자식 선택자 (>)

• 특정 태그의 직접 자식인 요소만 선택.
• 예시: <div>의 직접 자식 <p>만 빨간색.

div > p {
  color: red;
}

ㄴ. 후손 선택자 (스페이스)

• 특정 태그의 모든 자식 요소를 선택.
• 예시: <div> 안의 모든 자손 <p>를 파란색.

div p {
  color: blue;
}

---

5. 가상 클래스 선택자 (Pseudo-classes)

상태에 따라 스타일 변경

• 요소의 특정 상태에만 스타일 적용. :가 뽀인뜨!

• 예시: 마우스를 올렸을 때 스타일 변경 (:hover)

button:hover {
  background-color: yellow;
}

• 예시: 첫 번째 요소 선택 (:first-child)

li:first-child {
  font-weight: bold;
}

---

6. 가상 요소 선택자 (Pseudo-elements)

특정 부분만 꾸미기

• 요소의 일정 부분에만 스타일 적용.

• 예시: 첫 글자만 스타일 변경 :: 가 뽀인뜨!!

문단의 첫 글자를 크게 표시하고 싶다면:

p::first-letter {
  font-size: 2em; /* 글자를 두 배 크기로 */
  color: red; /* 첫 글자를 빨간색으로 */
}

결과: 문단의 첫 글자만 크고 빨갛게 표시됩니다.

---

7. 유니버설 선택자 (Universal Selector)

• 모든 요소에 스타일을 적용.
• 예시: 페이지의 모든 요소에 기본 여백 없애기.

* {
  margin: 0;
  padding: 0;
}

---

요약

1. 태그 선택자: 특정 태그를 선택.
2. 클래스 선택자: .클래스이름으로 여러 요소를 선택.
3. 아이디 선택자: #아이디이름으로 하나의 요소를 선택.
4. 속성 선택자: 특정 속성을 가진 요소만 선택. ='어쩌구'
5. 조합 선택자: 부모-자식 관계에 따라 선택. > 나 걍 띄어쓰기
6. 가상 클래스: 요소의 특정 상태에 따라 선택. : 나 ::
7. 유니버설 선택자: 모든 요소를 선택.

---

CSS 선택자를 왜 사용할까?

• HTML에서 어떤 요소를 꾸밀지 정확히 지정하기 위해 필요합니다.
• 선택자를 잘 활용하면 효율적이고 깔끔한 스타일 작성이 가능합니다! 😊