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

개미는 뚠뚠 🐜 2024. 5. 14. 01:30

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

절대 단위

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

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

상대 단위

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

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

- 절대값을 사용하는 단위

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

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 (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%;
}

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

출처 :