그리드 설정하기

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

챌린지

쉬움

이 시리즈에서는 CSS Grid를 사용하여 반응형 웹사이트 레이아웃을 구축해 보겠습니다.

먼저, 우리가 무엇을 만들게 될지 살펴보겠습니다:

다음이 포함된 웹사이트입니다:

헤더
사이드바
메인 콘텐츠 영역
푸터

완성된 모습은 다음과 같습니다:

웹사이트의 전체적인 그리드 구조를 만드는 것부터 시작해 봅시다! 과제:

.container를 그리드 레이아웃으로 전환하세요.
3열 구조를 만드세요.
헤더용, 메인 콘텐츠용, 푸터용으로 세 개의 행을 정의하세요.
그리드 영역 이름을 사용하여 다음과 같이 레이아웃을 배치하세요:"header header header" "hero featured featured" “footer footer footer”

5. 항목 사이와 컨테이너 주변에 간격을 추가하여 깔끔하게 보이도록 하세요.

6. 클래스 선택기를 사용하여 각 섹션에 올바른 grid-area 이름을 할당하세요: .header, .hero, .featured, .footer

직접 해보기

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