[CSS] CSS 선택자 (요소 선택자, 클래스 선택자, ID 선택자 등)

CSS 선택자는 HTML 문서 내에서 스타일을 적용할 대상을 선택하는 역할을 합니다. 다양한 선택자를 사용하여 원하는 HTML 요소에 스타일을 적용할 수 있습니다. 주요한 CSS 선택자에 대해 설명하겠습니다.

---

1. 요소 선택자(Element Selector)

가장 기본적인 선택자로, HTML 요소의 이름을 사용하여 스타일을 적용합니다. 요소 선택자는 해당 HTML 요소 전체에 스타일을 적용합니다.

/* 모든 <h1> 태그에 적용되는 스타일 */
h1 {
    color: blue;
}

---

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

HTML 요소에 class 속성을 추가하고, 그 클래스 이름을 사용하여 스타일을 적용합니다. 클래스 선택자는 여러 개의 HTML 요소에 같은 스타일을 적용하고 싶을 때 유용하게 사용됩니다.

<!-- HTML -->
<p class="important">이것은 중요한 내용입니다.</p>
<p>이것은 일반적인 내용입니다.</p>

/* .important 클래스에 적용되는 스타일 */
.important {
    font-weight: bold;
}

---

3. ID 선택자(ID Selector)

HTML 요소에 id 속성을 추가하고, 그 ID 이름을 사용하여 스타일을 적용합니다. ID 선택자는 한 번만 사용 가능하며, 고유한 요소에 특정 스타일을 적용하고자 할 때 사용됩니다.

<!-- HTML -->
<p id="intro">이것은 소개문입니다.</p>

/* #intro ID에 적용되는 스타일 */
#intro {
    font-size: 18px;
}

---

4. 그룹화 선택자(Grouping Selector)

여러 선택자를 쉼표로 구분하여 묶어서 스타일을 적용합니다. 여러 개의 선택자에 동일한 스타일을 적용할 때 유용하게 사용됩니다.

/* <h1>과 <h2> 태그에 적용되는 스타일 */
h1, h2 {
    color: purple;
}

---

5. 후손 선택자(Descendant Selector)

한 요소의 하위에 있는 다른 요소를 선택합니다. 즉, 특정 부모 요소 안에 있는 자식 요소를 선택합니다.

<!-- HTML -->
<div>
    <p>이것은 부모 요소입니다.</p>
    <span>이것은 자식 요소입니다.</span>
</div>

/* <div> 안에 있는 <span> 태그에 적용되는 스타일 */
div span {
    color: red;
}

위의 예제에서 div span 선택자는 <div> 태그 안에 있는 <span> 태그에 스타일을 적용합니다.

---

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 강력한 도구입니다. 요소 선택자, 클래스 선택자, ID 선택자, 그룹화 선택자, 후손 선택자 등을 적절하게 활용하여 웹 페이지의 디자인과 레이아웃을 다양하고 멋지게 꾸밀 수 있습니다. 계속해서 CSS 선택자를 익혀가며 웹 개발을 즐겨보세요!