px
px는 화면에 표시되는 가장 기본적인 단위로, 픽셀을 기준으로 고정된 크기를 나타냅니다. 일반적으로 1픽셀은 1개 점(dot)을 의미합니다.
- 고정된 크기
특정 요소의 크기를 절대값으로 지정할 수 있습니다. - 반응형에 부적합
픽셀 단위는 화면 크기나 해상도와 상관없이 고정된 크기이기 때문에, 반응형 디자인보다는 고정된 디자인에 적합합니다.
예시)
.element {
font-size: 16px;
width: 200px;
height: 100px;
}- 장단점
장점: 고정 크기가 필요할 때 유용하며, 예측 가능한 레이아웃을 제공합니다.
단점: 화면 크기에 따라 유연하게 조절되지 않아, 다양한 디바이스에 대응하기 어려울 수 있습니다.
rem
rem은 root em의 약자로, HTML 루트 요소
(<html>)의 폰트 크기를 기준으로 상대적인 크기를 지정합니다. 보통 브라우저의 기본 폰트 크기는 16px이므로, 1rem은 기본적으로 16px에 해당합니다.
- 루트 기준 크기
rem 단위는 전체 페이지의 루트 폰트 크기를 기준으로 하기 때문에, 전체 페이지에서 일관된 크기 조절이 가능합니다. - 반응형에 적합
전체 크기를 조절할 때 루트 요소의 폰트 크기만 변경하면 모든 rem 요소의 크기도 함께 조정됩니다.
html {
font-size: 16px; /* 1rem = 16px */
}
.element {
font-size: 2rem; /* 2 * 16px = 32px */
padding: 1rem; /* 1 * 16px = 16px */
}- 장단점
장점: 루트 크기만 변경하면 전체 요소 크기를 한꺼번에 조절할 수 있어 반응형에 유용합니다.
단점: 다른 요소의 폰트 크기와의 관계가 아니라, 루트 요소만을 기준으로 하기 때문에 특정한 구조에서 유연성이 제한될 수 있습니다.
em
em은 상위 요소의 폰트 크기를 기준으로 상대적인 크기를 지정합니다. em은 상위 요소마다 다른 기준 크기를 갖기 때문에, 중첩 요소가 많아질수록 크기가 복잡해질 수 있습니다.
- 상위 요소 기준 크기
em은 자신이 속한 요소의 폰트 크기에 따라 다르게 계산됩니다. 즉, 상위 요소의 폰트 크기에 상대적인 크기입니다. - 유연성
상위 요소의 크기에 따라 자동으로 크기가 조정됩니다. 다만 중첩 구조가 복잡해질 경우 예측이 어려워질 수 있습니다.
/* 상위 요소 폰트 크기 설정 */
.container {
font-size: 20px;
}
.element {
font-size: 1.5em; /* 1.5 * 20px = 30px */
padding: 2em; /* 2 * 20px = 40px */
}- 장단점
장점: 상위 요소를 기준으로 유동적으로 크기가 변경되어, 특정 섹션에서 반응형으로 활용하기 좋습니다.
단점: 여러 단계로 중첩된 요소의 경우, 예상치 못한 크기 변동이 발생할 수 있어 관리가 어려울 수 있습니다.
vh
vh는 뷰포트 높이를 기준으로 크기를 지정하는 단위입니다. 브라우저 창의 높이를 100으로 나눈 값을 기준으로 하며, 1vh는 브라우저 창 높이의 1%를 의미합니다.
- 뷰포트 반응형
브라우저 창 높이에 따라 크기가 조정됩니다. - 높이에 유리
창 높이에 따라 유동적으로 크기를 조정할 때 적합합니다.
.element {
height: 50vh; /* 화면 높이의 50% */
}- 장단점
장점: 화면 높이에 맞춰 유동적인 크기를 지정할 수 있어, 브라우저 높이에 비례하는 요소에 유용합니다.
단점: 스크롤이 있는 경우 뷰포트의 변화에 따라 크기가 조정될 수 있어 콘텐츠의 일부가 잘릴 위험이 있습니다.
vw
vw는 뷰포트 너비를 기준으로 크기를 지정하는 단위입니다. 브라우저 창의 너비를 100으로 나눈 값을 기준으로 하며, 1vw는 브라우저 창 너비의 1%입니다.
- 뷰포트 반응형
브라우저 창 너비에 따라 크기가 조정됩니다. - 너비에 유리
화면의 너비에 따라 반응하는 요소에 적합합니다.
.element {
width: 80vw; /* 화면 너비의 80% */
}- 장단점
장점: 화면 너비에 따라 유동적인 크기를 지정할 수 있어, 브라우저 너비에 따라 크기를 조절하기 유용합니다.
단점: 모바일 기기에서는 과도하게 큰 요소가 생성될 수 있어, 조심해서 사용해야 합니다.
슬기로운개발생활🤖