px, em, rem은 CSS에서 사용되는 길이 단위로, 각각 다른 특성을 가지고 있습니다.
px (픽셀)
•
절대 단위입니다.
•
고정된 크기를 가지며, 디스플레이의 해상도에 관계없이 일정한 크기를 유지합니다.
•
주로 테두리 두께나 미디어 쿼리의 브레이크 포인트 설정에 사용됩니다.
•
웹 접근성 측면에서는 좋지 않을 수 있습니다. 사용자가 브라우저의 기본 글꼴 크기를 변경해도 px로 지정된 요소는 크기가 변하지 않기 때문입니다.
em
•
상대 단위입니다.
•
부모 요소의 font-size를 기준으로 크기가 결정됩니다.
•
계층 구조에 따라 크기가 누적되어 계산이 복잡할 수 있습니다.
•
주로 글꼴 크기, 여백(padding, margin) 등을 정의할 때 사용합니다.
rem (root em)
•
상대 단위입니다.
•
루트 요소(<html>)의 font-size를 기준으로 크기가 결정됩니다.
•
페이지 전체에서 일관된 크기를 유지할 수 있어 디자인의 일관성을 유지하기 쉽습니다.
•
전체 레이아웃의 일관성을 유지하면서 상대적인 크기를 정의할 때 주로 사용합니다.
사용 시 고려사항
•
반응형 웹 디자인에서는 px보다 em이나 rem과 같은 상대 단위를 사용하는 것이 좋습니다.
•
rem은 em보다 계산이 간단하고 예측 가능하여 많은 CSS 가이드에서 우선적으로 사용을 권장합니다.
•
브라우저의 기본 font-size는 대개 16px이며, 이를 기준으로 rem 값을 계산할 수 있습니다.
이러한 단위들을 적절히 조합하여 사용하면 다양한 디바이스와 해상도에서 일관된 사용자 경험을 제공할 수 있습니다.
Rem 단위를 사용하는 방법
1.
html 요소의 font-size를 62.5%로 설정합니다. 이렇게 하면 1rem이 10px과 같아져 계산이 쉬워집니다.
html {
font-size: 62.5%;
}
CSS
복사
2.
이제 rem 값을 사용할 때 원하는 픽셀 값을 10으로 나누면 됩니다. 예를 들어:
•
16px = 1.6rem
•
20px = 2rem
•
24px = 2.4rem
3.
SCSS를 사용한다면 함수를 만들어 더 쉽게 사용할 수 있습니다:
@function rem($px) {
@return #{$px/10}rem;
}
// 사용 예
.box {
width: rem(100); // 10rem
padding: rem(20) rem(80); // 2rem 8rem
}
Scss
복사
4.
반응형 디자인을 위해 미디어 쿼리에서 html의 font-size를 조절할 수 있습니다:
@media (max-width: 768px) {
html {
font-size: 50%; // 1rem = 8px
}
}
CSS
복사
또는 미디어 쿼리에 rem 단위를 사용하여 기본 글꼴 크기를 변경했을 때 레이아웃을 적절하게 조정하도록 합니다.
@media (min-width: 50rem) {
/* 스타일 */
}
CSS
복사
이 방법을 사용하면 rem 단위를 쉽게 계산하고 적용할 수 있으며, 동시에 접근성과 반응형 디자인에도 대응할 수 있습니다.