CSS에서의 단위
- 절대 길이 단위 :
px(cm, mm, in, pc, pt ….)- 상대 길이 단위 : %, vw, vh, vmin, vmax, em, rem
px
- pixel(picture + element)
- 디바이스 화면에서 이미지를 표현하는 가장 작은 단위.
- 고정된 값이라 직관적으로 쉽게 사용할 수 있음.
- 다양한 디바이스가 생기면서 픽셀 밀도도 다양해졌기에 px값 사용시 디바이스 별로 다르게 표현되는 문제가 발생함.
%
- 부모 요소의 상대적인 %로 설정한다. 너비와 높이는 부모 요소 기준이지만 아닌 경우도 있음.
vw, vh
- 뷰포트(화면) 넓이(w), 높이(h)를 기준으로 하는 백분율 단위.
- 1vw = 화면의 1%
vmin, vmax
- 화면의 넓이와 높이 중 작은 값(min), 큰 값(max)을 기준으로 하는 백분율.
em
- 상대적 단위. 다른 값에 영향을 받음. 1em은 부모요소 값을 그대로 가져옴.
- 일일히 변경하지않고 em으로 설정해두면 상위의 값에 맞춰 알아서 변경되도록 설정 가능.
- 여러 요소가 중첩되어 있을 경우 단계적으로 그 크기가 변화하여 크게 변화될 수 있다는 단점이 존재.
- 버튼들이나 재사용하기 위한 항목을 만들 때 유용.
- ex)
font-size: 2em
- 부모 요소의 font-size의 2배로 설정.
rem(root em)
- root요소의 값에서 root의 값의 비율로 변하도록 함.
- 문서 나머지 부분에 비례해서 어떻게 보이는지 결정.
- ex)
#login ul { font-size: 2rem; }- ul이 중첩되어 있어도 root를 기준으로 받아오기 때문에 일정한 비율을 유지하여 변화.
보통 폰트 사이즈는 rem, 폰트 크기에 따라 조절되야하는 값(margin, border ...)들은 em으로 설정.
