[CSS] CSS로 꾸며보자!

💪파워 단위 레인저

css에는 px외의 다양한 단위를 사용할 수 있다. 정말정말 다양한 단위가 존재하지만 여기서는 가장 자주 사용되는 5가지만 추려보았다.

px

px(pixel, 이미지를 표현하는 가장 작은 단위)은 가장 많이 쓰이는 기본 단위로 사용자가 선언한 값을 그대로 표현해 직관적이고 쉽게 사용할 수 있다.

em

em은 배수를 나타내는 단위로 부모 요소의 값이 기준점이 되어 그에따라 크기가 달라진다. (2em일 경우 => 부모 요소 값 x 2)

rem

rem은 em처럼 배수를 나타내는 단위이지만 rem은 html 문서의 root인 html이 기준점이 되어 값이 달라진다. (2rem일 경우 => html 요소 값 x 2)

%

%(percentage) 백분율을 나타내는 단위로 부모 요소의 값이 100%가 되어 부모 요소 값에서 상대적으로 표현한다. (50%일 경우 => 부모 요소의 값 x 0.5)

vim, vmax

vmin와 vmax는 백분율을 나타내는 단위로 우리가 보는 브라우저 화면 크기를 100%로 잡고 브라우저의 크기에 따라 상대적으로 표현한다.

• vmin은 브라우저 화면의 가로와 세로 중 더 짧은 곳을 100%로 잡는다.
  (300px x 100px 화면에서 50vmin 값 => 100px x 0.5 = 50px )

• vmax는 브라우저 화면의 가로와 세로 중 더 긴 곳을 100%로 잡는다.
  (300px x 100px 화면에서 50vmin 값 => 300px x 0.5 = 150px )

예시