선택자 챌린지
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 16번째.
챌린지
쉬움다양한 요소가 포함된 HTML 문서가 제공됩니다. 여기에는 제목(<h1>, <h2>), 단락(<p>), 디비전(<div>), 그리고 리스트 아이템(<li>)이 포함된 순서 없는 리스트(<ul>)가 있습니다. 여러분의 작업은 다양한 유형의 선택자를 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 다음 단계를 따르세요:
- 모든
<p>요소를 대상으로 하는 유형 선택자를 사용하여 CSS 규칙을 작성하세요. 텍스트 색상을 "blue"로, 글꼴 크기를 16픽셀로 설정하세요. <h2>요소와<div>요소에 값이 "highlight"인class속성을 추가하세요.- "highlight" 클래스를 가진 모든 요소를 대상으로 하는 클래스 선택자를 사용하여 CSS 규칙을 작성하세요. 배경색을 "yellow"로 설정하세요.
<ul>요소에 값이 "special"인id속성을 추가하세요.- ID가 "special"인 요소를 대상으로 하는 ID 선택자를 사용하여 CSS 규칙을 작성하세요. 배경색을 "lightgray"로, 글꼴 크기를 20픽셀로 설정하세요.
- 모든
<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>