복습 챌린지

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

챌린지

쉬움

이제 CSS에서 relative, absolute, fixed, z-index를 포함한 다양한 위치 지정 기술을 배웠으므로, 종합적인 챌린지를 통해 지식을 테스트할 시간입니다. 이 챌린지는 이러한 속성들을 함께 사용하여 복잡하고 동적인 레이아웃을 만드는 방법에 대한 이해를 확고히 하는 데 도움이 될 것입니다. 각 위치 지정 방식에 대해 배운 내용을 적용하여 특정 디자인을 재현해 보세요.

피자 레스토랑 웹사이트를 위한 HTML 문서가 제공됩니다. 여러분의 과제는 CSS 위치 지정 속성을 사용하여 다음 요소들의 스타일을 지정하고 깔끔하고 정리된 레이아웃을 만드는 것입니다.

아래 단계를 따르세요:

헤더 스타일 지정:
- <header> 요소를 대상으로 합니다.
- 페이지 상단에 고정되도록 position을 fixed로 설정합니다.
- 페이지의 전체 너비를 차지하도록 top을 0으로, left를 0으로, width를 100%로 설정합니다.
- 헤더가 페이지의 다른 요소보다 위에 오도록 z-index를 10으로 설정합니다.
메뉴 섹션 스타일 지정:
- .menu 클래스를 대상으로 합니다.
- 흐름상의 정상 위치를 기준으로 위치를 지정할 수 있도록 position을 relative로 설정합니다.
프로모션 박스 스타일 지정:
- .promotions 클래스를 대상으로 합니다.
- .menu 섹션을 기준으로 배치되도록 position을 absolute로 설정합니다.
- 메뉴의 오른쪽 상단에 위치하도록 top을 100px로, right를 20px로 설정합니다.
- 헤더보다는 아래에 있지만 메뉴의 다른 콘텐츠보다는 위에 오도록 z-index를 5로 설정합니다.

치트 시트

CSS positioning 속성을 사용하면 요소의 배치를 제어할 수 있습니다:

고정 위치 지정 (Fixed positioning): 스크롤할 때 요소가 제자리에 유지됩니다

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

상대 위치 지정 (Relative positioning): 요소를 일반적인 위치를 기준으로 배치합니다

.menu {
  position: relative;
}

절대 위치 지정 (Absolute positioning): 요소를 가장 가까운 위치 지정 조상 요소를 기준으로 배치합니다

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index: 위치 지정된 요소의 쌓임 순서를 제어합니다 (값이 클수록 위에 나타납니다)

직접 해보기

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- 고정 헤더 -->
    <header>
        Pizza Restaurant
    </header>
    <!-- 메뉴 섹션 -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- 프로모션 박스 -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>