고정 크기 단위
| 단위 | 설명 |
| px | 픽셀(화소) |
| pt | 포인트 |
| in | 인치 |
| cm, mm | 센티미터, 밀리미터 |
px은 웹에서 대표적으로쓰이는 고정 크기 단위다.
pixel, 화소는 디스플레이를 구성하는 최소 단위를 뜻하는데, 우리가 보통 모니터 해상도로 알고 있는 1920*1080이 바로 픽셀 수다. 가로 1920개의 픽셀과 세로 1080개의 픽셀을 곱해 총 2,073,600개의 픽셀로 모니터가 이루어져 있다.
12인치 모니터와 24인치 모니터 2대 모두 1920*1080의 해상도를 가지고 있다고 해보자. 두 모니터의 가로, 세로 길이는 다르지만 둘 다 200만 개가 넘는 픽셀을 모니터에 채워 넣어야 한다. 따라서 각 모니터의 픽셀 1개를 동일하게 1px이라고 불러도 1px의 크기가 서로 다르다.
이처럼 px은 장치의 해상도에 따라 다른 크기를 갖기 때문에, 브라우저에서 1px을 1인치의 1/96인 1/96inch로 고정해뒀다.
가변 크기 단위
| 단위 | 설명 |
| em | 배수 단위 (부모 글자의 크기에 따라 기준점이 달라짐) |
| % | 백분율 단위 |
| rem | root me (최상위 요소 글자의 크기에 따라 달라짐) |
| vw | 화면비 백분율 단위 |
| vh | 화면비 백분율 단위 |
| vmin | 화면비 최솟값 |
| vmax | 화면비 최댓값 |
| ex | 현재 폰트의 x-height 값 |
여기서 em과 rem은 같은 방식으로 동작하지만 분명한 차이점을 가지고 있다.
em과 rem
em, rem 모두 상대적인 길이를 갖지만 무엇을 기준으로 하느냐에 따라 차이가 있다.
em은 현재 스타일이 지정되는 요소의 폰트 크기를 기준으로, rem은 최상위 요소의 폰트 크기를 기준으로 한다.
See the Pen em, rem by summermong (@summermong) on CodePen.
#px, #em, #rem 모두 동일한 크기를 가지고 있다.
우리가 보는 웹 브라우저는 일반적으로 16px을 기본 font-size로 갖기 때문에 1em, 1rem 모두 16px이 된다.
rem에 대해 먼저 알아보자.
html의 font-size를 32px로 수정했다.
See the Pen rem by summermong (@summermong) on CodePen.
HTML 문서의 최상위 요소는 <html> 태그이므로, 해당 태그의 font-size: 32px를 적용할 경우 최상위 요소 글자의 영향을 받는 rem의 사이즈도 커짐을 알 수 있다. (em도 동일하게 커졌는데, 이는 해당 코드에서 html에 지정된 폰트가 상속을 통해 아래 요소들의 폰트 크기도 바뀌어서 그렇다.) 아무튼 이처럼 rem은 최상위 요소의 폰트 크기를 기준으로 사이즈가 정해진다.
em은 상위 요소 글자의 font-size 영향을 받는다.
em의 상위 요소인 #main의 font-size: 24px로 수정하면 아래와 같아진다.
See the Pen em by summermong (@summermong) on CodePen.
이처럼 em, rem은 비슷해보이지만 단순 상위인지, 최상위 요소인지의 차이에 따라 영향을 받는다.
그냥 px을 쓰면 될텐데 왜 굳이 em, rem이 생긴 걸까?
이는 스마트폰, 컴퓨터, 태블릿 등 다양한 사이즈의 기기에서는 브라우저 환경이 하나로 정형화 되지 않고, 웹 페이지를 확대 및 축소를 할 때 이에 반응하는 '반응형 웹'을 만들려면 절대 길이보다 상대 길이를 사용해야 하기 때문이다. 그래서 반응형 웹을 만들 때는 em, rem을 권장한다. 다만 em은 CSS에서 상속으로 인해 복잡해지기 때문에 rem을 습관적으로 사용하길 권장한다.
%
보통 이미지나 레이아웃의 너비, 높이를 지정할 때 자주 사용된다.
See the Pen % by summermong (@summermong) on CodePen.
#main의 경우 html의 너비 50%만큼을 가지고 있고, #per의 경우 #main의 너비 50% 만큼을 가지고 있다. %는 기준이 되는 상위 요소의 font-size를 기준으로 하지 않고, 너비나 높이, 폰트 크기 등 각각의 프로퍼티 값의 상대적인 값을 갖고 있다. 예를 들어 상위 폰트가 18px이고 해당 요소의 폰트 사이즈가 50%라면 9px이 되는 것이다.
vw, vh
viewport width, viewport height로 현재 실행중인 스크린의 크기에 맞춰 상대적인 크기를 반환한다.
뷰포트 너비의 1% 길이, 뷰포트 높이의 1% 길이와 동일하다.
예컨대 아래 코드처럼 뷰포트의 전체 너비와 높이가 100vw, 100vh일 때 #a와 #b의 크기를 보자.
See the Pen vw vh by summermong (@summermong) on CodePen.
현재 주황색 부분이 차지하는 공간이 768*1024일 때, #a의 너비인 60vw는 (768/100)*60으로 460px이 된다. #a의 높이인 60vh는 (1024/100)*60으로 614px 정도 되는데 실제로 개발자 도구를 열어 보면 동일한 크기임을 알 수 있다. #b의 너비와 높이 역시 (768/100)*25, (1024/100)*25로 192px, 256px이다.
See the Pen vw vh % by summermong (@summermong) on CodePen.
%와 비슷하다고 느껴지는데, 위 코드를 보면 차이점을 알 수 있다.
#a는 뷰포트의 너비와 높이의 절반 크기를 가지고, #b는 부모 요소인 #main의 너비 50%와 높이 절반 크기를 가진다.
또 vw는 height에서도 사용할 수 있고, vh는 width에서 쓸 수도 있다. vw, vh는 화면 전체의 상대길이라서 스크롤바를 포함한 길이를 기준으로 계산하는 반면 %는 창의 중심이 아니라 %를 쓰고 있는 요소의 부모 요소 길이를 기준으로 계산하며 스크롤바를 포함하지 않는다는 차이점이 있다.
See the Pen vw vh2 by summermong (@summermong) on CodePen.
em, vw로 이렇게 반응형 웹의 사이즈에 맞게 표현할 수 있다.
vmin, vmax
뷰포트의 길이 중 더 긴 길이를 기준으로 삼으면 vmax, 더 짧은 길이를 기준으로 삼으면 vmin이 된다.
ex
현재 폰트의 x-height에 상대적인 기준으로 일반적으로 소문자 x의 높이를 나타낸다.
폰트의 기준선과 소문자 x의 상단까지의 거리로 아래 코드를 보면 알 수 있다.
See the Pen ex by summermong (@summermong) on CodePen.
font-size는 1.5ex 커졌으며 line-heigth는 10ex로 커졌다.
'👗 CSS > 🎨 CSS' 카테고리의 다른 글
| [CSS] 마진 상쇄를 알아보자 (0) | 2023.07.05 |
|---|---|
| [CSS] 선택자를 알아보자 (0) | 2023.07.05 |
| [CSS] 키프레임 애니메이션으로 만든 로딩 애니메이션 (0) | 2023.06.13 |
| [CSS] CSS 기본 지식 (우선순위, box-sizing, position, layout... etc) (1) | 2023.06.13 |
| [CSS] 생활코딩 CSS 간단 정리 (0) | 2023.04.13 |
