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

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

모바일 우선 타이포그래피란 작은 화면에서 읽기 쉬운 텍스트 스타일로 시작한 다음, 미디어 쿼리를 사용해 더 큰 화면에 맞게 조정하는 것을 의미합니다.

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

모바일용 기본 글꼴 크기를 설정하세요:

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

h1 {
  font-size: 1.5rem;
}

h1에 사용된 rem 단위에 주목하세요. rem은 루트 em을 뜻합니다. 이는 루트 요소인 html의 글꼴 크기를 기준으로 합니다(body가 아닙니다). 따라서 html의 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로 늘리세요. 미디어 쿼리에서 선택자 header h1을 사용하여, 모바일 크기를 어디에서 설정했든 이를 덮어쓰도록 하세요.
- 문단의 글꼴 크기를 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>