Menu
Coddy logo textTech

선택자 챌린지

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

challenge icon

챌린지

쉬움

다양한 요소가 포함된 HTML 문서가 제공됩니다. 여기에는 제목(<h1>, <h2>), 단락(<p>), 디비전(<div>), 그리고 리스트 아이템(<li>)이 포함된 순서 없는 리스트(<ul>)가 있습니다. 여러분의 작업은 다양한 유형의 선택자를 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 다음 단계를 따르세요:

  1. 모든 <p> 요소를 대상으로 하는 유형 선택자를 사용하여 CSS 규칙을 작성하세요. 텍스트 색상을 "blue"로, 글꼴 크기를 16픽셀로 설정하세요.
  2. <h2> 요소와 <div> 요소에 값이 "highlight"인 class 속성을 추가하세요.
  3. "highlight" 클래스를 가진 모든 요소를 대상으로 하는 클래스 선택자를 사용하여 CSS 규칙을 작성하세요. 배경색을 "yellow"로 설정하세요.
  4. <ul> 요소에 값이 "special"인 id 속성을 추가하세요.
  5. ID가 "special"인 요소를 대상으로 하는 ID 선택자를 사용하여 CSS 규칙을 작성하세요. 배경색을 "lightgray"로, 글꼴 크기를 20픽셀로 설정하세요.
  6. 모든 <h1><li> 요소를 대상으로 하는 그룹 선택자를 사용하여 CSS 규칙을 작성하세요. 텍스트 색상을 "red"로 설정하세요.

직접 해보기

<html>
<head>
    <title>Selection Challenge</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>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Styling with CSS의 모든 레슨