CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교

완료 파일 전체

index.html 전체 파일

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   TaskFlow
  </title>
  <link href="./style.css" rel="stylesheet"/>
 </head>
 <body>
  <header class="site-header">
   <div class="page site-header__inner">
    <a class="brand" href="#home">
     TaskFlow
    </a>
    <nav aria-label="주요 메뉴" class="nav">
     <a href="#features">
      기능
     </a>
     <a href="#contact">
      문의
     </a>
    </nav>
   </div>
  </header>
  <main class="page" id="home">
   <section>
    <h1>
     해야 할 일을 한눈에 정리하세요
    </h1>
    <p>
     TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
    </p>
   </section>
   <section id="features">
    <h2>
     주요 기능
    </h2>
    <div class="feature-grid">
     <article class="card feature-card">
      <span class="feature-card__badge">
       NEW
      </span>
      <h3>
       빠른 작업 추가
      </h3>
      <p>
       해야 할 일을 바로 기록할 수 있습니다.
      </p>
     </article>
     <article class="card">
      <h3>
       간단한 분류
      </h3>
      <p>
       해야 할 일을 구분합니다.
      </p>
     </article>
     <article class="card">
      <h3>
       진행 확인
      </h3>
      <p>
       완료 여부를 확인합니다.
      </p>
     </article>
    </div>
   </section>
   <section class="faq" id="faq">
    <h2>
     자주 묻는 질문
    </h2>
    <details>
     <summary>
      TaskFlow는 어떤 서비스인가요?
     </summary>
     <p>
      해야 할 일을 빠르게 정리하는 작업 관리 서비스 예제입니다.
     </p>
    </details>
    <details>
     <summary>
      모바일에서도 볼 수 있나요?
     </summary>
     <p>
      작은 화면부터 설계한 반응형 레이아웃을 사용합니다.
     </p>
    </details>
    <details>
     <summary>
      문의는 어디서 하나요?
     </summary>
     <p>
      아래 문의 폼을 이용할 수 있습니다.
     </p>
    </details>
   </section>
   <section id="pricing">
    <h2>
     요금제
    </h2>
    <div class="pricing-grid">
     <article class="card">
      <h3>
       Basic
      </h3>
      <p>
       개인 학습용
      </p>
     </article>
     <article class="card">
      <h3>
       Pro
      </h3>
      <p>
       더 많은 프로젝트
      </p>
     </article>
    </div>
   </section>
   <section id="contact">
    <h2>
     문의하기
    </h2>
    <form>
     <div class="form-field">
      <label for="name">
       이름
      </label>
      <input autocomplete="name" id="name" name="name" type="text"/>
     </div>
     <div class="form-field">
      <label for="email">
       이메일
      </label>
      <input autocomplete="email" id="email" name="email" type="email"/>
     </div>
     <div class="form-field">
      <label for="message">
       문의 내용
      </label>
      <textarea id="message" name="message" rows="5"></textarea>
     </div>
     <button type="submit">
      문의 보내기
     </button>
    </form>
   </section>
  </main>
  <footer class="site-footer">
   <div class="page">
    <p>
     © TaskFlow
    </p>
   </div>
  </footer>
  <a class="help-button" href="#contact">
   문의
  </a>
 </body>
</html>

style.css 전체 파일

:root {
  color: #171717;
  background: #f5f5f5;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  margin: 0;
  font-family:
    Arial,
    sans-serif;
  line-height: 1.6;
  color: #171717;
  background: #f5f5f5;
}


.page {
  width: min(
    100% - 32px,
    960px
  );
  margin-inline: auto;
}


.site-header,
.site-footer {
  padding-block: 20px;
}


main {
  padding-block: 48px;
}


section + section {
  margin-top: 64px;
}


.card {
  padding: 24px;
  border: 1px solid #d7d7d7;
  background: #fff;
}


form {
  display: grid;
  gap: 16px;
}


.form-field {
  display: grid;
  gap: 8px;
}


input,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #b8b8b8;
  background: #fff;
}


button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
}

a { color: inherit; }
input, textarea, button { font: inherit; }
h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

.site-header__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}


.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


@media (min-width: 48rem) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }


  .feature-list {
    flex-direction: row;
  }


  .feature-list > * {
    flex: 1;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f5f5;
  border: 1px solid #ddd;
}


.feature-card {
  position: relative;
}


.feature-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border: 1px solid #171717;
  background: #fff;
  font-size: 12px;
}


.help-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
  text-decoration: none;
}

.faq {
  display: grid;
  gap: 12px;
}


.faq details {
  border: 1px solid #d7d7d7;
  background: #fff;
}


.faq summary {
  padding: 16px;
  cursor: pointer;
  font-weight: 700;
}


.faq details p {
  margin: 0;
  padding: 0 16px 16px;
}


.faq summary:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 2px;
}

.feature-grid,
.pricing-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 220px),
        1fr
      )
    );
  gap: 16px;
}

위 파일과 ZIP의 동명 파일은 동일합니다. 회차별 README·CHANGES 문서는 ZIP에 포함합니다. 생성 산출물·node_modules·실제 환경 변수 파일은 포함하지 않습니다.

index.html

기능 카드:

<div class="feature-grid">
  <article class="card">
    <h3>빠른 추가</h3>
    <p>오늘 할 일을 바로 기록합니다.</p>
  </article>


  <article class="card">
    <h3>우선순위</h3>
    <p>중요한 작업을 구분합니다.</p>
  </article>


  <article class="card">
    <h3>완료 확인</h3>
    <p>진행 상태를 한눈에 확인합니다.</p>
  </article>
</div>

요금제:

<section id="pricing">
  <h2>요금제</h2>


  <div class="pricing-grid">
    <article class="card">
      <h3>Basic</h3>
      <p>개인 학습용</p>
    </article>


    <article class="card">
      <h3>Pro</h3>
      <p>더 많은 프로젝트</p>
    </article>
  </div>
</section>

style.css

.feature-grid,
.pricing-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(100%, 220px),
        1fr
      )
    );
  gap: 16px;
}