🗣️ CSS의 단위 중 px, em, rem의 차이점에 대해 설명해주세요.
-
의도: CSS의 기본적인 단위에 대해 알고 있는지 확인하는 질문
-
나의 답안
-
주어진 답안 (모범 답안)
각각 나누어 설명드리겠습니다.
px는 우리에게 친숙한 그 픽셀입니다.
그러나 유저 디바이스 환경에 따라 크기 변화가 있을 수 있기 때문에em이나rem을 주로 쓰는 편입니다.em은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산합니다.
현재 속해 있는 요소의 폰트 크기가 크다면em값도 커지게 됩니다.
px과 반대로 반응형 디자인에 좋습니다.
그러나 현재 속해 있는 요소의 기본 크기가 어느 정도인지에 따라 바뀌기 때문에 조심해야 합니다.그리고
rem은em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기입니다.
rem의 r은 루트(root)를 말하는 만큼 최상단 루트의 기본 크기를 기준으로 적용이 됩니다.
그래서 루트에 정의된 폰트 크기를 바꾸지 않는 한 항상 같은 값을 지니고 있어 저는 이 속성을 가장 많이 씁니다.
📝 개념 정리
🌟 px (픽셀)
-
px은 가장 기본적인 단위로, 화면상의 실제 픽셀 수를 의미한다. -
특징
-
절대 단위
px은 고정된 크기를 나타내는 절대적인 단위이다.- 화면 크기나 해상도에 상관없이 항상 동일한 크기를 유지한다.
-
정밀한 제어
px단위는 매우 정확하게 특정 크기를 지정할 수 있어, 디자이너가 레이아웃의 정확한 위치와 크기를 조정할 때 유용하다.
-
화면 크기와 독립적
px은 사용자의 화면 크기나 해상도와는 무관하다.- 동일한
px값은 작은 화면과 큰 화면에서 같은 물리적 크기를 가진다. - 다만, 고해상도 디스플레이에서는 이 물리적 크기가 작아보일 수 있다.
-
-
사용 예시
h1 { font-size: 24px; }<h1>요소의 폰트 크기는 24px로 고정된다.
🌟 em
-
em은 상대적인 단위로, 현재 요소의 폰트 크기 또는 상위 요소(부모 요소)의 폰트 크기를 기준으로 한다. -
특징
-
상대 단위
em은 부모 요소 또는 현재 요소의 폰트 크기를 기준으로 상대적인 크기를 나타낸다.- 만약 부모 요소의 폰트 크기가 16px이라면, 1em은 16px과 동일하다.
-
게산 가능성
em은 폰트 크기 외에도 여백, 패딩, 폭 등의 속성에서 상대 크기를 설정하는 데 사용할 수 있다.
-
상속에 의한 영향
em은 상위 요소의 폰트 크기에 따라 영향을 받기 때문에, 여러 중첩된 요소에서em을 사용할 경우 예상치 못한 크기가 나올 수 있다.
-
-
사용 예시
body { font-size: 16px; } h1 { font-size: 2em; /* 16px * 2 = 32px */ }- 여기서
<h1>요소의 폰트 크기는 32px(부모 요소인<body>의 폰트 크기인 16px의 두 배)이 된다.
.parent { font-size: 16px; } .child { font-size: 1.5em; /* 16px * 1.5 = 24px */ } .grandchild { font-size: 1.5em; /* 24px * 1.5 = 36px */ }grandchild요소의 폰트 크기는 부모의 크기(24px)의 1.5배인 36px이 된다.
- 여기서
🌟 rem
-
rem은em과 유사하지만, 오직 최상위 요소(html)의 폰트 크기를 기준으로 한다. -
특징
-
루트 단위
rem은 "root em"의 약자로, 항상<html>요소(루트 요소)의 폰트 크기를 기준으로 크기를 설정한다.
-
일관성
rem은 상위 요소에 영향을 받지 않으므로, 예상치 못한 크기 변경이 발생하지 않는다.- 이는
em보다 예측 가능성이 높고, 프로젝트 전체에서 일관된 스타일링을 유지하기에 유리하다.
-
글로벌 변경
<html>요소의 폰트 크기를 변경하면,rem단위를 사용한 모든 크기가 함께 조정된다.- 이를 통해 사이트 전체의 크기 조정을 쉽게 할 수 있다.
-
-
사용 예시
html { font-size: 16px; } h1 { font-size: 2rem; /* 16px * 2 = 32px */ }<h1>요소의 폰트 크기는 항상 32px이다.- 이는
<html>요소의 폰트 크기를 기준으로 계산되므로, 상위 요소의 크기에 영향을 받지 않는다.
🌟 px, em, rem 비교
-
px: 정밀한 제어가 필요하고, 특정 크기를 고정적으로 설정해야 할 때 주로 사용된다. 하지만 반응형 웹 디자인에서는 사용을 줄이는 것이 좋다. -
em: 폰트 크기나 기타 요소의 크기를 부모 요소의 폰트 크기에 상대적으로 설정할 때 사용된다. 그러나 중첩된 상황에서 크기가 예측하기 어렵게 변할 수 있다는 점을 유의해야 한다. -
rem: 전체적인 일관성을 유지하면서도, 상위 요소의 영향을 받지 않고 상대적인 크기를 설정할 수 있다. 반응형 디자인에서 자주 사용되며, 사이트 전반의 스타일 조정을 쉽게 할 수 있다.
