Coding/HTML & CSS

[CSS] 반응형 CSS em과 rem

미스터로즈 2021. 7. 13. 21:22

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

- 부모의 크기에 따라서 사용하는 경우는 %와 em을 사용

 

- 브라우저의 크기에 따라서 사용하는 경우는 v*와 rem을 사용합니다.

 

1. em

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="em_tree.css" />
  </head>
  <body>
    <div class="level1">
      <h1>level 1</h1>
      <div class="level2">
        <h1>level 2</h1>
        <div class="level3">
          <h1>level 3</h1>
          <div class="level4">
            <h1>level 4</h1>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
.level1 {
  font-size: 2em;
}

.level2 {
  font-size: 2em;
}

.level3 {
  font-size: 2em;
}

.level4 {
  font-size: 2em;
}

- 부모 요소보다 2배씩 커지게 됩니다.

2. rem

rem의 경우는 전체 브라우저 창의 크기를 기준으로 하기 때문에 일정한 크기를 갖습니다.

 

.level1 {
  font-size: 2rem;
}

.level2 {
  font-size: 2rem;
}

.level3 {
  font-size: 2rem;
}

.level4 {
  font-size: 2rem;
}