HTML CSS 이미지 문제 해결 실습: 경로·비율·잘림·흐림·CLS

완료 파일 전체

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 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>
  </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;
}

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

style.css

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


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


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