그룹 선택자

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 14번째.

그룹 선택자는 여러 HTML 요소를 선택하고 모든 요소에 동일한 스타일을 적용하는 데 사용됩니다. 이는 각 요소에 대해 별도의 규칙을 작성할 필요 없이 서로 다른 요소에 공통된 스타일 세트를 적용하려는 경우 특히 유용합니다. 선택자를 그룹화하면 더 간결하고 효율적인 CSS 코드를 작성할 수 있습니다.

그룹 선택자를 사용하려면 그룹화하려는 선택자들을 쉼표(,)로 구분하여 나열합니다. 기본 구문은 다음과 같습니다:

selector1, selector2, selector3 {
    property: value;
}

예를 들어, 모든 <h1>, <h2> 및 <p> 요소에 동일한 텍스트 색상과 글꼴 크기를 적용하고 싶다고 가정해 보겠습니다. 다음과 같이 그룹 선택자를 사용할 수 있습니다:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

이 예제에서 그룹 선택자는 모든 <h1>, <h2>, 및 <p> 요소를 대상으로 합니다. 선언문은 이 모든 요소의 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 설정합니다.

유형 선택자, 클래스 선택자, ID 선택자를 포함하여 모든 유형의 선택자를 그룹화할 수 있습니다:

h1, .highlight, #intro {
    background-color: yellow;
}

챌린지

쉬움

제목(<h1>, <h2>), 단락(<p>), 구분(<div>)을 포함한 다양한 요소가 포함된 HTML 문서가 주어집니다. 여러분의 과제는 그룹 선택자를 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

모든 <h1> 및 <h2> 요소를 대상으로 하는 그룹 선택자를 사용하여 CSS 규칙을 작성하세요. 이 요소들의 텍스트 색상을 red로 설정하세요.
모든 <p> 요소와 <div> 요소를 대상으로 하는 그룹 선택자를 사용하여 CSS 규칙을 작성하세요. 이 요소들의 배경색을 lightgray로, 글꼴 크기를 18 pixels로 설정하세요.

치트 시트

그룹 선택자를 사용하면 선택자를 쉼표(,)로 구분하여 여러 HTML 요소에 동일한 스타일을 적용할 수 있습니다:

selector1, selector2, selector3 {
    property: value;
}

요소 선택자를 그룹화하는 예시:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

모든 유형의 선택자(유형, 클래스, ID)를 그룹화할 수 있습니다:

h1, .highlight, #intro {
    background-color: yellow;
}

직접 해보기

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>