복습 챌린지 #1

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

챌린지

쉬움

이 첫 번째 요약 챌린지에서는 CSS의 텍스트 스타일링 속성에 대한 지식을 활용하여 특정 디자인을 재현해 봅니다. 이 챌린지는 color, font-family, font-size, font-weight, text-align, text-decoration과 같은 다양한 텍스트 속성을 결합하는 능력을 테스트합니다.

다양한 요소가 포함된 HTML 문서가 제공됩니다. 여러분의 과제는 이 섹션에서 배운 다양한 속성을 적용하여 이러한 요소의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

모든 <h1> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 색상을 dark blue로 설정합니다.
- 글꼴 크기를 32px로 설정합니다.
- 글꼴 두께를 bold로 설정합니다.
- 텍스트 정렬을 center로 설정합니다.
intro-text 클래스를 가진 모든 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 색상을 gray로 설정합니다.
- 글꼴 패밀리(font-family)를 Arial, Helvetica, sans-serif;로 설정합니다.
- 글꼴 크기를 18px로 설정합니다.
모든 <li> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 글꼴 두께(font-weight)를 600으로 설정합니다.
모든 <a> 요소를 대상으로 하는 CSS 규칙을 작성합니다.
- 텍스트 장식(text-decoration)을 none으로 설정합니다.
- 글꼴 패밀리(font-family)를 "Times New Roman", Times, serif로 설정합니다.

직접 해보기

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>