CSS 단위
CSS 단위
웹 사이트 내의 범위나 크기를 수치로 나타낸다, 상대 단위 / 절대 단위가 있다
상대 단위
고정되지 않고 어떤 기준에 따라 바뀔수 있는 단위
1. %
전체 요소의 특정 비율을 나타내는 단위
ex) 한 요소의 높이가 100px일때 50% 적용하면 50px
2. em
폰트의 크기(font-size)를 나타내며 외부로부터 적용받는 폰트의 크기(font-size)에 따라 값이 달라진다
ex) 브라우저의 기본 폰트 크기가 10px일때 1em은 10px, 2em은 20px
3. rem
폰트의 크기(font-size)를 나타내며 최상위 요소(html 요소)에 지정된 크기를 기준으로 값이 달라진다
ex) html에서 정해놓은 크기 20px, 부모 요소의 크기는 25px일때 1rem의 값은 20px
4. vw
현재 보이는 브라우저 화면의 가로크기를 기준으로 한 값
5. vh
현재 보이는 브라우저 화면의 세로크기를 기준으로 한 값
6. vmin
현재 보이는 브라우저 화면의 가로크기 또는 세로 크기 중 가장 작은 크기를 기준으로 한 값
7. vmax
현재 보이는 브라우저 화면의 가로크기 또는 세로 크기 중 가장 큰 크기를 기준으로 한 값
절대 단위
정해진 기준값에 의해 고정된 단위
1. px
모니터 화면의 한개의 작은 도트(dot), 1dot = 1 pixel값으로 나타낸다
2. cm
센치미터 단위
3. mm
밀리미터 단위
4. pt
포인트 단위, 1pt는 1/72 inch
5. in
인치 단위, 1 in = 2.54cm
6. pc
파이커 단위, 1pc = 12pt