절대 길이
절대 단위는 다른 요소들의 크기랑 상관 없이 항상 동일한 값으로 유지된다.
예로 16px이라는 값을 입력한다면 주변의 어떠한 요소와도 상관없이 고정된 값을 갖는다.
절대 길이 단위는 실질적으로 px, pt 정도만 사용된다.
- px
- pt
- cm
- mm
상대길이
1. em
부모 요소의 글꼴 크기에 비례한다.
section{
font-size: 2em; // browser 기본 폰트사이즈 16px * 2 = 32px
article{
font-size: 2em; // 64px
div{
font-size: 2em; // 128px
}
}
}2. rem
최상위 부모 요소의 글꼴 크기에 비례한다.
html{
font-size: 62.5%; // 계산하기 쉽게 10px로 맞춤.
div{
font-size: 2rem; // 20px
padding: 0.5rem; // 5px
}
}3. vw(viewport width), vh(viewport height)
%랑 다르게 웹 브라우저의 가로폭 혹은 세로폭을 기준으로 결정되는 크기다.
웹 브라우저의 가로 폭이 1440px이고, 폰트 크기가 1vw라면 폰트 크기는 14.4px이 된다.
4. vmin(viewport minimum), vmax(viewport maximum)
웹 브라우저의 가로폭과 세로폭 중에 더 작은 값 혹은 큰 값을 기준으로 한다.
body{
font-size: 2vmin;
p{
line-height: 4vmin;
}
}5. dvw(dynamic viewport width), dvh(dynamic viewport height)
모바일 주소 표시줄 영역에 대응한다.
주소 표시줄이 스크롤을 통해 노출이 되건 말건 현재 보여지는 뷰포트 높이를 동적으로 가져온다.
div {
height:100vh;
height:-webkit-fill-available;
}위 처럼 하는 방법도 있긴 한데 ios에서만 적용 되고 안드로이드에서는 안되기 때문에 추천하지 않는다.
6. svh(short viewport height), lvh(large viewport height)
svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져온다.
주소 표시줄이 없어져도 기존 주소표시줄의 높이를 뺀 나머지 값을 가져온다.
lvh는 svh의 반대로 주소 표시줄이 노출 되더라도 총 화면의 길이를 가져온다.
