타이포그래피 기초

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

챌린지

쉬움

이 프로젝트에서는 이미 배운 CSS 기술을 적용하여 café menu를 만들고 스타일을 지정합니다. 다양한 글꼴, 크기 및 정렬을 사용하여 텍스트 스타일을 지정하는 연습을 하게 됩니다. 또한 배경색과 텍스트 색상을 적용하여 시각적으로 매력적인 메뉴를 만들어 디자인을 향상시킬 것입니다.

이 프로젝트에서는 외부 CSS 파일을 사용하여 HTML 문서의 스타일을 지정합니다. HTML 파일과 이미 연결되어 있는 CSS 파일, 이렇게 두 개의 파일을 확인할 수 있습니다.

이 작업에서는 글꼴 모음(font family)과 텍스트 정렬을 변경하는 스타일을 적용합니다.

아래 단계를 따르세요:

<body> 요소를 대상으로 지정하여 페이지 전체에 font-family Tahoma, Geneva, sans-serif를 적용합니다.
제목을 중앙에 정렬하기 위해 <h1> 요소에 text-align: center;를 설정합니다.
소개 텍스트를 중앙에 정렬하기 위해 welcome 클래스를 가진 <p> 요소에 text-align: center;를 설정합니다.

직접 해보기

<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>