CSS Unit(크기 단위)

CSS에서 사용되는 크기 단위로는 px,

.px (픽셀)

1px = 1개 화소

보통 모니터 해상도는 1920 x 1080가 보편적인데 이 수치의 뜻이 바로 가로 1920px 세로 1080px의 값을 가진다는 의미이다.
픽셀은 디바이스 해상도에 따라 상대적인 크기를 갖음.
px은 요소의 크기나 이미지의 크기 지정에 주로 사용 된다.

---

.% (Percent)

1 % = 부모(or요소)에서 지정된 크기에 따른 상대적인 크기

%는 백분률 단위의 상대 단위이다.
예를 들어 부모의 크기가 50px로 지정되었고, 자식의 크기가 10%로 지정되어있다면 자식의 크기는 부모가 50px일 때 5px로 지정된다.

    body {
      font-size: 14px;
    }
    div {
      font-size: 120%; /* 14px * 1.2 = 16.8px */
      padding: 2em;    /* 16.8px * 2 = 33.6px */
    }

---

.em

1.2em = 120% 배수 단위의 상대 단위

em은 배수 단위로 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다.(= %) 예를 들어 요소에 10px 지정되었다면 2em은 20px이 된다.

• 폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능하여 편리하다.
• 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다.

div { //css
      font-size: 1.2em; /* 14px * 1.2 = 16.8px */
      padding: 2em;
    }

  <div class='box1'>
    Font size: 1.2em ⇒ 14px * 1.2 = 16.8px
    <div class='box2'>
      Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px
      <div class='box3'>
        Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px
      </div>

---

.rem (root em)

body 태그에 em값을 이용하여 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받게 된다.
하지만 rem은 최상위 요소html의 사이즈를 기준으로 삼는다.

html {
	font-size : 14px; // default = 16px
}
body {
	font-size : 1.2rem; // html font-size * 1.2 = 16.8px
}

  <div class='box1'>
    Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px 
    <div class='box2'>
      Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px
      <div class='box3'>
        Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px
      </div>

• rem은 기본 폰트 크기를 변경하더라도 이에 따라 웹사이트의 레이아웃을 적절히 조정할 수 있다는 장점이 있다.
• 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는 wrapper 요소(container)등에 적합하다.

.container {
  width: 70rem; /* 70rem ⇒ 14px * 70 = 980px */
}

Reset CSS를 사용하여 사전에 html 요소의 font-size 지정이 필요하다. 
font-size 미지정 시에는 16px가 적용된다.

---

Viewport 단위 (vh, vw, vmin, vmax)

반응형 웹디자인은 % 단위를 자주 사용한다.
하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.

Viewport 란?

• Display 상의 표시 영역을 뜻 함.
• 데스크탑에선 화면 영역을 마음대로 조절 가능하다.
• 모바일에선 Zoom in/out 은 가능하지만 레이아웃 viewport는 변경할 수 없다.

Viewport 단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.

• vw : viewport 너비의 1/100
• vh : viewport 높이의 1/100
• vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100
• vmax : viewport 너비 또는 높이 중 큰 쪽의 1/100

예) viewport 너비 1000px, 높이 600px인 경우

vw : 너비 1000px의 1% 10px
vh : 높이 600px의 1% 6px
vmin : 높이 600px의 1% 6px
vmax : 너비 1000px의 1% 10px

• IE 8 이하 지원 X, IE 9~11, Edge 사용에 주의 필요.

---