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