CSS의 rem 단위

em 단위는 항상 편리하지는 않습니다. 문제는 한 태그의 글꼴 크기를 변경하면, 그 크기에 상대적으로 자신의 크기를 계산하는 모든 하위 태그들의 크기도 변경된다는 점입니다.

그래서 rem 단위가 도입되었습니다. 이 단위의 값은 항상 html 태그에 지정된 글꼴 크기를 기준으로 계산됩니다.

알다시피, 기본값은 16px입니다:

csshtml {
  font-size: 16px;
}

예제를 통해 살펴보겠습니다. 다음과 같은 태그들이 있다고 가정해 봅시다:

html<div>
  <p>
    text
  </p>
</div>

이제 rem 단위로 크기를 지정해 보겠습니다:

cssdiv {
  font-size: 2rem; /* 32px에 해당 */
}
p {
  font-size: 2rem; /* 32px에 해당 */
  margin: 2rem;    /* 32px에 해당 */
}

Задание 1

다음은 문제를 풀어볼 HTML 코드입니다:

html<main>
  <h1>header</h1>
  <section>
    <h2>header</h2>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </section>
  <section>
    <h2>header</h2>
    <p>
      text
    </p>
    <p>
      text
    </p>
  </section>
</main>

픽셀 단위로 지정된 모든 값을 rem 단위로 다시 작성하세요:

cssmain {
  margin: 64px auto 32px;
}

h1 {
  font-size: 32px;
}
section {
  font-size: 16px;
  margin-bottom: 32px;
}
h2 {
  font-size: 24px;
  margin-bottom: 32px;
}
p {
  font-size: 20px;
  margin-bottom: 12px;
}