모바일 퍼스트 타이포그래피

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 7번째.

Mobile-First Typography는 작은 화면에서 읽기 쉬운 텍스트 스타일로 시작한 다음, 미디어 쿼리를 사용하여 더 큰 화면에 맞게 조정하는 것을 의미합니다.

모바일 사용자는 작은 화면에서도 잘 작동하는 명확하고 읽기 쉬운 폰트가 필요하기 때문에 우리는 이것을 사용합니다. 텍스트가 너무 작으면 읽기 어려워지고, 데스크톱에서 너무 크면 어색해 보일 수 있습니다.

모바일을 위한 기본 폰트 크기를 설정합니다:

/* Mobile-first styles */
body {
  font-size: 16px; /* base size for mobile */
}

h1 {
  font-size: 1.5rem;
}

h1에 사용된 rem 단위를 주목하세요. rem은 root em을 의미하며, 루트 body 폰트 크기에 상대적입니다. 따라서 body의 font-size가 16px이면 1.5rem은 24px와 같습니다. rem을 사용하면 기본 크기만 변경하여 모든 텍스트를 일관되게 쉽게 조절할 수 있습니다.

그런 다음 미디어 쿼리를 사용하여 더 큰 화면에 맞게 조정하세요:

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

챌린지

쉬움

작업 요구사항:

모바일에서 <h1> 제목의 font size를 24px로 설정하세요.
모바일에서 <p> 단락의 font size를 16px로 설정하세요.
768px보다 넓은 화면을 위한 media 쿼리를 작성하여 다음을 수행하세요:
- <h1> 제목의 font size를 36px로 키웁니다.
- 단락의 font size를 20px로 키웁니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Typography</title>
  <style>
    /* ===== Mobile-First Styles ===== */
    :root {
      --base-font-size: 16px; 
    }

    body {
      font-size: var(--base-font-size);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.5;
      background-color: #f0f8ff;
      color: #333;
    }

    header {
      background: url('https://upload.wikimedia.org/wikipedia/commons/a/af/Female_polar_bear_%28Ursus_maritimus%29_with_cub%2C_Svalbard.jpg')
                  center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }

    header h1 {
      margin: 0;
    }

    .subtitle {
      margin-top: 10px;
      font-size: 1rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
    }

    h2 {
      color: #2c6e91;
      font-size: 1.25rem;
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    footer {
      background-color: #2c6e91;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9rem;
    }

    /* ===== Larger Screens ===== */

  </style>
</head>
<body>
  <header>
    <h1>Polar Bears – Kings of the Arctic</h1>
    <p class="subtitle">Discover the life of the world's largest land carnivore</p>
  </header>

  <main>
    <section>
      <h2>About Polar Bears</h2>
      <p>
        Polar bears are magnificent animals that live in the Arctic region. 
        They are excellent swimmers, using their large paws to paddle through icy waters 
        in search of seals, their main source of food. These bears have thick layers of 
        fat and dense fur to keep them warm in extreme cold.
      </p>
    </section>

    <section>
      <h2>Interesting Facts</h2>
      <ul>
        <li>Polar bears can weigh up to 700 kg (1,500 lbs).</li>
        <li>They have black skin under their white fur to absorb heat.</li>
        <li>Polar bears can swim for days without resting.</li>
        <li>They are listed as vulnerable due to climate change.</li>
      </ul>
    </section>

    <section>
      <h2>Protecting Polar Bears</h2>
      <p>
        Climate change and melting sea ice threaten polar bear habitats. 
        Protecting these amazing creatures requires global efforts to 
        reduce greenhouse gas emissions and preserve their Arctic environment.
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Arctic Wildlife. All rights reserved.</p>
  </footer>
</body>
</html>