텍스트 스타일링

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

챌린지

쉬움

이 작업에서는 페이지의 다양한 요소에 대해 글꼴 크기, 색상 및 장식을 사용자 정의합니다.

아래 단계를 따르세요:

<h1> 요소의 글꼴 크기를 36px로 설정하고, underline 장식을 적용합니다.
클래스가 welcome인 요소의 글꼴 두께(font weight)를 700으로 설정합니다.
<h2> 요소(카테고리 제목)의 글꼴 크기를 24px로 설정하고, 글꼴 색상을 원하는 색상(검은색 제외)으로 설정합니다.
클래스가 dish-name인 요소의 글꼴 색상을 원하는 글꼴 색상(검은색 제외)으로 설정합니다.

직접 해보기

<html>
<head>
    <title>Café Menu</title>  
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Delight</h1>
        <p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
    </header>
    <div class="menu-category">
        <h2>Appetizers</h2>
        <ul>
            <li>
                <p class="dish-name">Bruschetta $5.99</p>
            </li>
            <li>
                <p class="dish-name">Garlic Bread $3.50</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Main Courses</h2>
        <ul>
            <li>
                <p class="dish-name">Spaghetti Carbonara $12.99</p>
            </li>
            <li>
                <p class="dish-name">Grilled Chicken Salad $9.99</p>
            </li>
        </ul>
    </div>
    <div class="menu-category">
        <h2>Desserts</h2>
        <ul>
            <li>
                <p class="dish-name">Chocolate Cake $4.99</p>
            </li>
            <li>
                <p class="dish-name">Cheesecake $5.49</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>&copy; 2025 Café Delight - All rights reserved</p>
    </footer>
</body>
</html>