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

Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 7번째.

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

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

mobile용 base 글꼴 크기를 설정하세요:

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

h1 {
  font-size: 1.5rem;
}

h1에 사용된 rem 단위에 주목하세요. rem은 root em을 의미합니다. 이는 root body 글꼴 크기를 기준으로 상대적입니다. 따라서 body에 font-size: 16px가 있으면 1.5rem은 24px와 같습니다. rem을 Using하면 base 크기만 변경하여 모든 text를 일관되게 쉽게 조정할 수 있습니다.

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

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

챌린지

쉬움

과제:

<h1> 제목의 글꼴 크기를 모바일에서 24px로 설정합니다.
<p> 단락의 글꼴 크기를 모바일에서 16px로 설정합니다.
768px보다 더 넓은 screens에 대한 미디어 쿼리를 생성하여 다음을 수행합니다:
- <h1> 제목의 글꼴 크기를 36px로 늘립니다.
- 단락의 글꼴 크기를 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>