반응형 CSS 단위 정리

html의 기본 font-size는 16px이다.

 

즉, 최상위 요소에서 font-size: 100% 는 16px를 뜻하는 것!

 

%와 em은 같은 개념이다  !!!

1. %

relative to "parent"

.parent {
  font-size: 800%;    // 16px * 8 = 128px
}

.child {
  font-size: 50%;  // 128px * 0.5 = 64px
}

2. em

relative to "parent" font-size

해당 단위가 사용되고 있는 요소의 font-size 속성값 기준

.parent {
  font-size: 8em;    // 16px * 8 = 128px
}

.child {
  font-size: 0.5em;  // 128px * 0.5 = 64px
}

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10em; // 20px * 10 = 200px
}

3. rem

realtive to "ROOT" font-size

최상위 요소의 font-size 속성값 기준

.parent {
  font-size: 8rem;    // 16px * 8 = 128px
}

.child {
  font-size: 0.5rem;  // 16px * 0.5 = 8px
}

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10rem; // 16px * 10 = 160px
}

---

4. vw

viewport width

.parent {
  width: 100vw;    // Viewport Width의 100%만큼! (화면 width 전체)
}

.child {
  width: 50vw;  // Viewport Width의 50%만큼! (화면 width 절반)
}

5. vh

viewport height

.parent {
  height: 100vh;    // Viewport Height의 100%만큼! (화면 높이 만큼)
}

.child {
  height: 50vh;  // Viewport Height의 50%만큼! (화면 높이 절반)
}

---

6. vmin

브라우저의 width와 height중 작은 값이 적용!

.pc {
  height: 50vmin;  // PC? height: 50%
}

.mobile {
  width: 50vmin; // Mobile? width: 50%
}

7. vmax

브라우저의 width와 height중 큰 값이 적용!

.pc {
  width: 50vmax;    // PC? width: 50%
}

.mobile {
  height: 50vmax; // Mobile? height: 50%
}

 

8. 응용

아래의 child-width는 고정값 250px이다. (부모의 절반)

.parent-width {
  width: 500px;
}

.child-width {
  width: 50%;  // 250px
}

 

아래의 child-width는 부모의 요소와 상관없이 viewport의 50%이다 !!

.parent-width {
  width: 500px; // 혼자 고정값.. child에 영향 X
}

.child-width {
  width: 50vw;  // 브라우저를 줄였다 늘였다하는 너비의 절반만큼!!
}

 

[참고 URL]

https://www.daleseo.com/css-em-re