[CSS] CSS 단위 완벽 정리 (px, %, em, rem, vw, vh)

코딩쌈밥·2022년 10월 26일
CSSCSS 단위empxremvhvw
0

CSS

목록 보기
1/1

CSS 단위를 따로 정리를 안 해놓으니 쓸 때마다 헷갈려서 엘리님 영상을 보면서 한꺼번에 정리해두려 한다.




CSS의 단위에는 여러 가지가 있는데, 크게 절대적인 유닛과 상대적인 유닛으로 나눌 수 있다.

절대적 유닛은 말 그대로 값이 변하지 않는 px, pt 등을 의미한다.

상대적 유닛은 반응형 디자인에 많이 쓰이는 %, em, rem, vw, vh 등을 의미한다.




절대적 유닛

px(pixel)과 같은 절대적 유닛은 컨테이너의 사이즈가 변경되어도 컨텐츠의 사이즈가 유지된다.

예를 들어, div의 width를 1000px로 설정하면 브라우저의 사이즈를 줄여도 div의 사이즈, div 안의 텍스트, 이미지 등의 사이즈는 유지된다.

또한 폰트 사이즈를 px로 설정하게 되면 브라우저에서 유저가 폰트 사이즈를 조절해도 아무 반응이 없다.

따라서 최근에는 반응형 디자인을 위해 이러한 절대적 유닛 사용을 지양하고 있다.




상대적 유닛

그럼 이제 상대적 유닛을 살펴보자.


1. %

%는 일상에서 사용하는 것과 동일한 의미를 가지고 있다.

부모 요소의 사이즈에 따라 n%만큼의 사이즈를 가지는 단위다.

#Parent {
  width: 1000px;
  height: 500px;
}
#Child {
  width: 50%; // 1000px의 50% = 500px
  height: 100%; // 500px의 100% = 500px
}

2. em

보통 우리가 사용하는 폰트는 각각 다른 폰트 사이즈를 가지고 있다.
하지만 em은 폰트 자체의 사이즈와 관계 없이 항상 고정된 사이즈를 가진다.

em은 부모의 폰트 사이즈에 따라 상대적으로 사이즈가 결정되는데,
쉽게 말해 부모 요소의 폰트 사이즈에 맞춰 상대적으로 1em(1 x em), 2em(2 x em)이 되는 것이다.


예를 들어, 부모 요소의 폰트 사이즈가 16px이라면 1em = 16px로 적용되어 0.5em = 8px, 2em = 32px 등으로 사용할 수 있다.

이러한 em은 font-size, line-height 등의 속성과 자주 함께 쓰이며, 가변 레이아웃을 구성할 때 유용하다.

#Parent {
  font-size: 16px;
}
#Child1 {
  font-size: 0.5em; // 0.5 x em(16px) = 8px
}
#Child2 {
  font-size: 2em; // 2 x em(16px) = 32px
}

※ 참고사항
html이나 body의 font-size를 따로 설정하지 않은 경우, html 자체적으로 기본 폰트 사이즈는 16px로 설정된다.



3. rem

rem의 r는 root를 의미한다.

em과 비슷하지만 다른 점은, em은 부모 요소의 폰트 사이즈를 따라가지만 rem은 루트 요소의 폰트 사이즈를 따라간다는 것이다.
이게 무슨 말이냐면, 루트 요소, 즉 html의 폰트 사이즈를 따라간다는 의미이다.

따라서, font-size를 따로 설정하지 않으면 기본 폰트 사이즈인 16px에 맞춰 상대적으로 사이즈가 계산된다.

/* html 기본 폰트 사이즈 16px */
#Parent {
  font-size: 2rem; // 2 x rem(16px) = 32px
}
#Child {
  font-size: 0.5rem; // 0.5 x rem(16px) = 8px
}



4. vw

vw는 viewport width이다.
vw는 뷰포트의 너비에 따라 값을 결정하는 단위다.

100vw, 50vw처럼 사용할 수 있으며, 이는 뷰포트 너비의 100%, 50%를 사용하겠다는 의미다.

div {
  width: 100vw;
}

※ 참고사항
뷰포트는 브라우저를 뜻한다.



5. vh

vh는 viewport height를 의미한다.
브라우저의 높이에 따라 값을 결정하는 단위다.

100vh, 50vh처럼 사용할 수 있으며, 뷰포트 높이의 100%, 50%를 사용하겠다는 의미다.

div {
  height: 100vh;
}



그럼 이 유닛들 중 언제 어떤 것을 써야 하는가?
간단하게 요약하면 아래와 같다.

1. 부모 요소의 사이즈에 반응

%, em

2. 브라우저 사이즈에 반응

vw, vh, rem


※ 참고사항 ※
em과 rem은 폰트 사이즈에 반응하고 %, vw, vh은 요소의 너비나 높이에 반응한다는 차이가 있다.




꿀팁🍯

  • padding과 margin은 em과 rem을 사용하자.

  • 상하 값에는 em을, 좌우 값에는 rem을 사용하는 것이 좋다.
    좌우 값이 컨텐츠마다 다르게 적용되면 들여쓰기가 잘못된 것처럼 보이기 때문이다.

div {
  padding: 2em 0.5rem;
  margin: 1em 0.8rem;
}




참고 자료

드림코딩 엘리님 영상

W3School

profile
코딩쌈밥
코드를 쌈 싸먹자

0개의 댓글