헤더

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 36번째.

챌린지

쉬움

여러분의 작업은 페이지 상단에서 돋보이게 하기 위해 .header 섹션의 스타일을 지정하는 것입니다.

대비를 위해 어두운 배경색과 흰색 텍스트를 추가하세요.
헤더 내부의 텍스트를 중앙에 정렬하세요.
콘텐츠에 여유 공간을 주기 위해 패딩을 추가하세요.
사이트 제목이 눈에 띄도록 큰 글꼴 크기를 사용하세요.
다른 섹션과 분리하기 위해 모서리를 둥글게 만들고 하단에 약간의 마진을 추가하세요.

직접 해보기

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>