<!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>
</head>
<body>
  <h3>절대길이로 고정한 font-size로 만든 p 태그(브라우저 폰트 사이즈를 변경해도 변하지 않음 - 절대단위: px)</h3>
    <figure>: 애초에 컴퓨터 모니터 자체가 픽셀로 되어있고, 그 모니터 픽셀의 개수는 모든 모니터가 동일한데(레티나 디스플레이는 예외), 그러한 픽셀을 단위로 하는 px는 모든 컴퓨터에 동일한 픽셀값만큼을 차지하기 때문에 절대단위가 된다.</figure>
  <p class="px">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est quisquam esse voluptatum facere? Voluptate, neque labore ducimus assumenda esse ratione earum quaerat, dolorum reiciendis saepe laudantium, sunt quod suscipit magni.</p>
  <hr>
  <h3>em, rem으로 만들어본 p 태그(상대 단위 사용)</h3>
  <div class="parent_em">
    <h5>1) em단위 사용</h5>
    <figure>
      : 부모요소의 font-size를 20px로 주고, 자식요소인 p태그의 font-size를 2em으로 준 결과이다. 결과적으로, 컴퓨터는 p태그의 font-size를 스스로 계산해서 20px * 2(1em=부모요소의 font-size이므로)즉, 2em = 20px * 2이기에 = 40px로 계산한 것을 볼 수 있다.
    </figure>
  <p class="child_em">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, nobis tenetur nemo laborum provident repudiandae corrupti officiis hic quasi quas a asperiores explicabo consequatur recusandae veniam dicta perferendis natus magni.</p>
    </div>
  <h4>2) rem 단위 사용</h4>
  <figure>
    : 부모 요소의 font-size를 기준으로 삼는 em과 달리 rem은 무조건 root 요소(body 태그)의 font-size를 기준으로 font-size를 계산한다. 예를 들어, root의 font-size가 16px인 이 페이지에서 3rem을 주면, 1rem=16px이기 때문에 16px * 3 = 48px로 계산이 된다. 실제로 개발자 도구의 computed 부분을 확인하면 컴퓨터가 몇 px로 계산한지 알 수 있다. 
  </figure>
  <p class="rem">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore beatae laboriosam voluptas maiores dolor aliquid iste, similique, atque, veritatis sapiente ducimus repudiandae deserunt quas molestiae cum! Vitae quibusdam iste numquam.</p>
  <h4>3) 퍼센트 단위 사용</h4>
  <div class="parent_percent">
  <p class="child_percent">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita deserunt voluptates atque quo distinctio recusandae, unde labore facere doloribus reiciendis ex, minus repudiandae quaerat modi fugiat fugit voluptatum. Accusamus, temporibus.</p>
  </div>
  <hr>
  <h4>4) vw, vh 등 뷰포트 단위 사용</h4>
  <figure>
    : viewport란 브라우저에서 상단의 uri 검색바 그리고 그 밑에 즐겨찾기 부분을 경계로하는(이부분을 제외한다는 말), 즉, 실제로 웹 사이트가 우리 눈에 보이는 그 부분만을 이야기한다. 그리고 vw, vh 는 각각 이러한 뷰포트를 기준점으로 100vw는 뷰포트의 가로 길이를 기준으로 하기 때문에 가로길이 전체를 채운다. 즉, 뷰포트 단위는 전체 가로를 기준으로(vw) 몇 비율 만큼을 채울것인가라고 생각하면 된다. 그래서 50vw는 전체 가로 길이의(뷰포트) 50%만큼 채운다고 생각하면된다. 마찬가지로 vh는 뷰포트의 전체 높이를 기준으로 생각하면 된다. 반응형 설계를 할 때 아주 편리하게 자주 쓰인다.
  </figure>
  <div class="box"></div>
  <div class="vh_box"></div>
</body>
</html>
.box {
  background-color:green;
  width:50vw;
  height:100px;
}
.vh_box {
  background-color:blue;
  width:200px;
  height:50vh;
}
.px {
  font-size:16px;
}

.parent_em {
  font-size: 20px;
}

.child_em {
  font-size: 2em;
}

.rem {
  font-size:3rem;
}

.parent_percent {
  font-size:40px;
}

.child_percent {
  font-size:50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.