[TIL] 반응형 웹을 잘 만들기 - css 크기 단위

ShallWeDance·2021년 8월 8일

CSS study

TIL

목록 보기

5/17

css를 하다보면 정말 많은 단위들을 만날 수 있다. px, em, rem, vw 등등... 이 단위들을 잘 이해하고 사용한다면 반응형으로 웹을 만들기 한결 수월할 것이다!

단위 종류

px

절대단위로 1px은 화소 1개의 크기를 나타냅니다. 디바이스 별로 픽셀의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 반응형에 대비하기 적합하지 않은 단위입니다. 하지만 요소의 크기나 이미지의 크기 지정에 주로 사용됩니다.

em / rem(root em)

1em = 부모의 폰트 크기

부모의 font-size에 영항을 받습니다. 대부분의 브라우저에서 폰트 크기의 디폴트 값은 16px입니다. 따라서 별도의 스타일링을 해주지 않는다면 1em = 16px 이 됩니다.

하지만 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하게 된다면 자식들은 각 부모의 폰트 사이즈를 상속받아 점점 커지게 됩니다.

1rem = html의 폰트 크기(root element)

em을 대신해서 단순하게 단일 사이즈로 표현하기 위해서 사용하게 된 단위입니다. 부모가 아닌 root의 font-size에 영향을 받습니다. 대부분의 경우 root는 html태그 입니다.

rem은 폰트에서만 사용하지 않고 그리드 시스템에서도 유용하게 사용됩니다. root의 사이즈를 지정한다면 미디어 쿼리로 쉽고 정확하게 크기 조정이 가능하기 때문입니다.
html{
  font-size: 62.5%;  // 10px;
}
.image {
  width: 12rem;  // 120px;
}
.item {
  font-size: 1.6rem;  // 16px;
}

vw(Viewport Width) / vh( Viewport Height)

이름에서도 알 수 있듯 뷰포트를 기준으로 한 단위입니다. 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라고 이해할 수 있습니다.

1vw = 뷰포트 너비의 1%

만약 700px 너비의 뷰포트가 있다면, 1vw 값은 7px입니다. 너비가 바뀌었을 경우 브라우저가 알아서 1vw의 값을 다시 계산해 줍니다.

1vh = 뷰포트 높이의 1%

마찬가지로 700px 높이의 뷰포트가 있다면, 1vh 값은 7px이 됩니다.

% 단위의 경우 부모값에도 높이나 너비를 지정해야 합니다. 그래야 상속받아서 사용할 수 있기 때문입니다. 하지만 vw, vh는 부모가 아니라 뷰포트를 기준으로 한 단위이기 때문에 따로 높이나 너비값을 지정할 필요가 없습니다.