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

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

모바일 퍼스트 타이포그래피(Mobile-First Typography)는 작은 화면에서 읽기 쉬운 텍스트 스타일로 시작하여, 미디어 쿼리를 사용해 더 큰 화면에 맞춰 조정하는 것을 의미합니다.

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

모바일을 위한 기본 글꼴 크기를 설정하세요:

/* 모바일 우선 스타일 */
body {
  font-size: 16px; /* 모바일을 위한 기본 크기 */
}

h1 {
  font-size: 1.5rem;
}

h1에 사용된 rem 단위를 확인해 보세요. rem은 root em의 약자로, 루트 body 글꼴 크기에 상대적입니다. 따라서 body의 font-size: 16px라면, 1.5rem은 24px와 같습니다. rem을 사용하면 기본 크기만 변경하여 모든 텍스트를 일관되게 쉽게 확장할 수 있습니다.

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

/* 더 큰 화면 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

챌린지

쉬움

작업 내용:

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

치트 시트

모바일 우선 타이포그래피는 작은 화면에 최적화된 텍스트 스타일로 시작하여, 미디어 쿼리를 사용하여 더 큰 디스플레이에 맞게 조정합니다.

rem 단위는 루트 font-size(body 또는 html에 설정됨)를 기준으로 합니다. 예를 들어, body { font-size: 16px; }인 경우 1.5rem은 24px과 같습니다. rem을 사용하면 글꼴 크기를 일관되게 유지하고 화면 크기에 따라 쉽게 확장할 수 있습니다.

모바일용 기본 글꼴 크기를 설정합니다:

/* 모바일 우선 스타일 */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

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

/* 더 큰 화면 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

직접 해보기

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