CSS 단위 px ∙ % ∙ rem ∙ em ∙ vw ∙ vh 정리
CSS에서 자주 사용되는 단위를 알아보자.
1. px
스크린 해상도의 가장 작은 단위를 1픽셀(pixel)이라고 하며, 1px로 표기한다.
웹에서 사용되는 가장 기본적인 단위이다.
절대 길이 단위로, 항상 고정된 크기로 보인다.
코드 예제
See the Pen px단위 by blog dunku (@blog-dunku) on CodePen.
2. %
반응형 웹사이트를 구현할 때 주로 사용되며, 부모 요소의 크기에 비례한다.
코드 예제
See the Pen % 단위 by blog dunku (@blog-dunku) on CodePen.
3. rem
‘root em’이라는 뜻으로, 최상위인 html 태그에 지정된 기본 폰트 사이즈에 비례한다.
웹브라우저의 기본 폰트 사이즈는 대부분 16px이다.
기본 폰트 사이즈 확인 방법
- 개발자 도구 → 요소 → html 클릭
- 계산됨 → ‘font-size’ 검색
- 기본 폰트 사이즈 크기 확인
코드 예제
2rem은 16px * 2(rem) = 32px이다.
See the Pen rem 단위 by blog dunku (@blog-dunku) on CodePen.
4. em
부모 요소의 폰트 사이즈 크기에 비례한다.
주로 반응형 웹브라우저의 패딩에 사용되는데, 패딩이 폰트 사이즈에 비례하는 디자인이 많기 때문이다.
코드 예제
See the Pen em 단위 by blog dunku (@blog-dunku) on CodePen.
5. vw
‘viewport width’의 약자로, 화면의 가로 크기에 비례한다.
1vw는 화면의 가로 크기의 1%를 의미한다.
코드 예제
아래의 예제 코드를 반응형으로 테스트해 보자.
See the Pen vw 단위 by blog dunku (@blog-dunku) on CodePen.
6. vh
‘viewport height’의 약자로, 화면의 세로 크기에 비례한다.
1vh는 화면의 세로 크기의 1%를 의미한다.
코드 예제
See the Pen vh 단위 by blog dunku (@blog-dunku) on CodePen.