HTML CSS 종합 실습: 소개·카드·이미지·요금표·문의 폼·FAQ가 있는 반응형 서비스 페이지

완료 파일 전체

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>
  <a class="skip-link" href="#main">
   본문으로 바로가기
  </a>
  <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="#pricing">
      요금제
     </a>
     <a href="#contact">
      문의
     </a>
     <a href="#faq">
      FAQ
     </a>
    </nav>
   </div>
  </header>
  <main class="page" id="main" tabindex="-1">
   <div class="service-layout">
    <div>
     <section class="hero" id="home">
      <div>
       <h1>
        해야 할 일을 한눈에 정리하세요
       </h1>
       <p>
        TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
       </p>
       <a class="button-link" href="#contact">
        시작 문의하기
       </a>
      </div>
      <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; }

:root {
  --z-header: 10;
  --z-floating: 20;
}


.site-header {
  position: sticky;
  top: 0;
  z-index:
    var(--z-header);
}


.help-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index:
    var(--z-floating);
}

:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 12px;
  background: #171717;
  color: #fff;
}


.skip-link:focus {
  top: 16px;
}

section[id], main[id] { scroll-margin-top: 8rem; }
body { padding-bottom: 5rem; }

.hero { display: grid; gap: 24px; }
@media (min-width: 48rem) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.button-link { display: inline-block; padding: 10px 16px; border: 1px solid #171717; background: #171717; color: #fff; }

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

index.html 전체 구조

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>
      TaskFlow - 작업 정리 서비스
    </title>
    <link
      rel="stylesheet"
      href="./style.css"
    />
  </head>


  <body>
    <a
      class="skip-link"
      href="#main"
    >
      본문으로 바로가기
    </a>


    <header class="site-header">
      <div class="page site-header__inner">
        <a
          class="brand"
          href="#home"
        >
          TaskFlow
        </a>


        <nav
          class="nav"
          aria-label="주요 메뉴"
        >
          <a href="#features">기능</a>
          <a href="#pricing">요금제</a>
          <a href="#contact">문의</a>
          <a href="#faq">FAQ</a>
        </nav>
      </div>
    </header>


    <main
      class="page"
      id="main"
    >
      <section
        class="hero"
        id="home"
      >
        <div>
          <p class="eyebrow">
            Simple Task Manager
          </p>


          <h1>
            해야 할 일을 한눈에 정리하세요
          </h1>


          <p>
            TaskFlow는 오늘의 작업과 진행 상태를 간단하게 정리하는 서비스입니다.
          </p>


          <a
            class="button-link"
            href="#contact"
          >
            시작 문의하기
          </a>
        </div>


        <img
          class="hero__image"
          src="./images/hero.webp"
          alt="TaskFlow 작업 목록 화면 예시"
          width="1200"
          height="800"
        />
      </section>


      <section id="features">
        <h2>주요 기능</h2>


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


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


        <div class="table-scroll">
          <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>없음</td>
                <td>지원</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>


      <section id="contact">
        <h2>문의하기</h2>


        <form>
          <div class="form-field">
            <label for="name">
              이름
            </label>
            <input
              id="name"
              name="name"
              type="text"
              autocomplete="name"
            />
          </div>


          <div class="form-field">
            <label for="email">
              이메일
            </label>
            <input
              id="email"
              name="email"
              type="email"
              autocomplete="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>


      <section
        class="faq"
        id="faq"
      >
        <h2>자주 묻는 질문</h2>


        <details>
          <summary>
            모바일에서도 사용할 수 있나요?
          </summary>
          <p>
            작은 화면부터 설계한 반응형 화면을 제공합니다.
          </p>
        </details>


        <details>
          <summary>
            JavaScript가 필요한가요?
          </summary>
          <p>
            현재 페이지는 HTML/CSS 정적 화면이며 다음 과정에서 기능을 추가합니다.
          </p>
        </details>
      </section>
    </main>


    <footer class="site-footer">
      <div class="page">
        <p>
          © TaskFlow
        </p>
      </div>
    </footer>


    <a
      class="help-button"
      href="#contact"
    >
      문의
    </a>
  </body>
</html>