[CSS] px, em, rem, vw, vh

 

css에서 길이 단위가 여러가지가 있는데, 하나씩 살펴보자 !

절대 단위, 상대 단위

절대 단위

항상 고정된 길이를 나타내는 단위이다.

px, cm, mm 등이 있지만 px을 사용한다. 

 

상대 단위

고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다.

em, rem, vw, vh 등이 있다.

px

- 절대값을 사용하는 단위

1px은 항상 고정된 물리적 크기에 해당한다.

em, rem

em (element)

- 부모 요소의 font-size 기준

같은 요소 내에 설정된 폰트 크기 값이 있을 때는 해당 요소의 font-size가 기준이 된다.

html {
  font-size: 16px;
}

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

 

rem (root element)

- root (최상위) 요소 기준

HTML에서 최상위 요소는 html 태그로, html 요소의 font-size 속성값이 기준이 된다.

html {
  font-size: 16px;
}

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

 

vw, vh

vw (viewport width)

- 뷰포트 크기의 1 / 100에 해당하는 단위 (가로)

 

vh (viewport height)

- 뷰포트 크기의 1 / 100에 해당하는 단위 (세로)

 

html {
  font-size: 16px;
}
div {
  font-size: 6vw;
}

부모 요소의 font-size 값과 상관없이 뷰포트 크기에 따라 유동적으로 변하기 때문에 반응형 웹 개발에 유용하게 사용된다.

 

+) vmin, vmax

vmin

vw, vh 중 작은 것

 

vmax

vw, vh 중 큰 것

 

%

% (percent)

부모 요소와의 상대적 크기를 지정한다.

부모 요소의 속성 값이 100%의 기준이 된다.

div {
  width: 50%;
  height: 30%;
}

 

 

픽셀을 주로 많이 사용하기는 하나, 반응형 개발을 할 때는 상대 단위를 사용하는 것이 더 적합할 것 같다.

 

 

 

출처 :

https://velog.io/@mangozoo20/CSS-%EB%8B%A8%EC%9C%84-%EC%A0%95%EB%A6%AC

https://velog.io/@codns1223/CSS-px-em-rem-%EC%B0%A8%EC%9D%B4

https://velog.io/@xnelb013/CSS-px-em-rem%EC%9D%98-%EC%B0%A8%EC%9D%B4-vw-vh%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4