Container Query 실습: 같은 카드를 본문과 사이드바에 배치하기

완료 파일 전체

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">
   <div class="service-layout">
    <div>
     <section class="hero">
      <h1>
       해야 할 일을 한눈에 정리하세요
      </h1>
      <p>
       TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
      </p>
      <img alt="TaskFlow 서비스 소개 페이지의 기능·문의 화면" class="hero__image" height="800" src="./images/hero.webp" width="1200"/>
     </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>
        <img alt="TaskFlow 기능 카드 세 개" class="feature-card__image" height="450" src="./images/feature-board.webp" width="800"/>
       </article>
       <article class="card">
        <h3>
         간단한 분류
        </h3>
        <p>
         해야 할 일을 구분합니다.
        </p>
       </article>
       <article class="card">
        <h3>
         진행 확인
        </h3>
        <p>
         완료 여부를 확인합니다.
        </p>
       </article>
       <article class="card task-preview">
        <div class="task-preview__content">
         <h3>
          아주 긴 작업 제목과 URL
         </h3>
         <p>
          https://example.com/very-long-task-url-without-normal-break-points-123456789
         </p>
        </div>
        <a href="#contact">
         문의
        </a>
       </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>
      <div aria-label="요금제 비교표 가로 스크롤" class="table-scroll" role="region" tabindex="0">
       <table class="pricing-table">
        <caption>
         TaskFlow 요금제 기능 비교
        </caption>
        <thead>
         <tr>
          <th scope="col">
           항목
          </th>
          <th scope="col">
           Basic
          </th>
          <th scope="col">
           Pro
          </th>
         </tr>
        </thead>
        <tbody>
         <tr>
          <th scope="row">
           프로젝트
          </th>
          <td>
           3개
          </td>
          <td>
           무제한
          </td>
         </tr>
         <tr>
          <th scope="row">
           작업 보관
          </th>
          <td>
           30일
          </td>
          <td>
           무제한
          </td>
         </tr>
         <tr>
          <th scope="row">
           팀 공유
          </th>
          <td>
           없음
          </td>
          <td>
           지원
          </td>
         </tr>
        </tbody>
       </table>
      </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>
     <div class="feature-slot">
      <article class="card feature-card">
       <img alt="TaskFlow 기능 카드 세 개" class="feature-card__image" height="450" src="./images/feature-board.webp" width="800"/>
       <div>
        <h3>
         작업 카드
        </h3>
        <p>
         넓은 공간에서는 이미지와 설명을 나란히 배치합니다.
        </p>
       </div>
      </article>
     </div>
    </div>
    <aside aria-label="기능 미리보기">
     <div class="feature-slot">
      <article class="card feature-card">
       <img alt="TaskFlow 기능 카드 세 개" class="feature-card__image" height="450" src="./images/feature-board.webp" width="800"/>
       <div>
        <h3>
         작업 카드
        </h3>
        <p>
         넓은 공간에서는 이미지와 설명을 나란히 배치합니다.
        </p>
       </div>
      </article>
     </div>
    </aside>
   </div>
  </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;
}

.task-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}


.task-preview__content {
  min-width: 0;
  flex: 1;
}


.task-preview__content p {
  overflow-wrap: anywhere;
}

.settings-layout {
  display: grid;
  grid-template-columns:
    180px
    minmax(0, 1fr);
  gap: 24px;
}

.table-scroll {
  overflow-x: auto;
}


.pricing-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
}


.pricing-table caption {
  margin-bottom: 12px;
  text-align: left;
  font-weight: 700;
}


.pricing-table th,
.pricing-table td {
  padding: 12px;
  border: 1px solid #d7d7d7;
  text-align: left;
}

img {
  display: block;
  max-width: 100%;
}


.hero__image {
  width: 100%;
  height: auto;
}


.feature-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.service-layout {
  display: grid;
  gap: 24px;
}


@media (
  min-width: 64rem
) {
  .service-layout {
    grid-template-columns:
      minmax(0, 1fr)
      280px;
  }
}

.feature-slot {
  container-type:
    inline-size;
}


.feature-card {
  display: grid;
  gap: 16px;
}


@container (
  min-width: 30rem
) {
  .feature-card {
    grid-template-columns:
      180px
      minmax(0, 1fr);
    align-items: center;
  }
}

.service-layout > * { min-width: 0; }

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

index.html

<div class="service-layout">
  <main>
    <div class="feature-slot">
      <article class="card feature-card">
        <img
          class="feature-card__image"
          src="./images/feature-board.webp"
          alt="카드 형태 작업 목록"
          width="800"
          height="450"
        />


        <div>
          <h3>작업 카드</h3>
          <p>
            넓은 공간에서는 이미지와 설명을 나란히 배치합니다.
          </p>
        </div>
      </article>
    </div>
  </main>


  <aside>
    <div class="feature-slot">
      <article class="card feature-card">
        ...
      </article>
    </div>
  </aside>
</div>

style.css

페이지 전체:

.service-layout {
  display: grid;
  gap: 24px;
}


@media (
  min-width: 64rem
) {
  .service-layout {
    grid-template-columns:
      minmax(0, 1fr)
      280px;
  }
}

component container:

.feature-slot {
  container-type:
    inline-size;
}


.feature-card {
  display: grid;
  gap: 16px;
}


@container (
  min-width: 30rem
) {
  .feature-card {
    grid-template-columns:
      180px
      minmax(0, 1fr);
    align-items: center;
  }
}

main의 feature-slot은 충분히 넓으면 2열이 되고 sidebar의 동일 카드에는 조건이 적용되지 않을 수 있습니다.