CSS Selector?

CSS(카스케이딩 스타일 시트)는 웹 개발에서 디자인과 레이아웃을 제어하는 핵심적인 언어입니다. 그 중에서도 선택자(Selector)는 특히 중요한 역할을 합니다. 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이 글에서는 CSS 선택자에 대해 알아보고, 어떻게 사용되는지와 몇 가지 유용한 팁을 제공하겠습니다.

1. 태그 선택자 (Element Selector)

가장 기본적인 선택자는 HTML 태그 이름을 사용하여 요소를 선택하는 것입니다. 이 선택자는 해당하는 모든 HTML 요소에 스타일을 적용합니다.

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

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

클래스 선택자는 HTML 요소에 클래스를 할당하여 선택하는 것입니다. 이를 통해 여러 요소에 동일한 스타일을 적용할 수 있습니다.

/* .highlight 클래스에 스타일 적용 */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

<!-- 클래스가 "highlight"인 모든 요소에 스타일 적용 -->
<p class="highlight">이 텍스트는 강조됩니다.</p>

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

아이디 선택자는 HTML 요소에 고유한 아이디를 할당하여 선택하는 것입니다. 아이디는 한 페이지에서 하나의 요소에만 적용해야 합니다.

/* #header 아이디에 스타일 적용 */
#header {
    font-size: 24px;
}

<!-- 아이디가 "header"인 요소에 스타일 적용 -->
<div id="header">헤더</div>

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

여러 선택자에 동일한 스타일을 적용해야 할 때 그룹화 선택자를 사용할 수 있습니다. 이는 쉼표로 구분하여 여러 선택자를 하나로 그룹화하는 것입니다.

/* h1, h2, h3 태그에 동일한 스타일 적용 */
h1, h2, h3 {
    color: purple;
}

5. 자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 직계 자식 요소를 선택합니다. 이것은 부모 요소와 자식 요소를 나타내는 데 사용되는 ">" 기호로 구분됩니다.

/* .menu 클래스의 직계 자식인 <li> 태그에 스타일 적용 */
.menu > li {
    list-style-type: none;
}

6. 가상 클래스 선택자 (Pseudo-class Selector)

가상 클래스 선택자는 요소의 특정 상태를 선택하는 데 사용됩니다. 예를 들어, 링크가 방문되었을 때와 마우스 오버 상태일 때 스타일을 다르게 적용할 수 있습니다.

/* 방문된 링크에 스타일 적용 */
a:visited {
    color: gray;
}

마치며

CSS 선택자는 웹 요소를 정확하게 선택하여 스타일을 적용하는 데 사용되는 강력한 도구입니다. 이러한 선택자를 적절히 활용하여 웹페이지의 디자인을 효율적으로 제어할 수 있습니다.