오늘은 rem과 em 그리고 px는 각각 무슨 차이가 있는지 또 언제 사용하는 것이 좋은지 알아보도록 하자!
유닛은 크게 절대적 유닛과 상대적 유닛으로 나뉘는데
대표적으로 절대적 유닛(Absolute unit)에는 px가, 상대적 유닛(Relative unit)에는 rem, em, %, v*(viewport)이 있다.
px(픽셀)
- px는 고정된 크기를 가리킴
- 사용자의 화면 크기나 설정에 따라 크기가 변하지 않음
- 주로 디자인의 정확한 크기를 지정하거나, 텍스트 크기를 고정할 때 사용
em과 rem
- em: relative to parent element
→ em은 부모 요소의 글꼴 크기에 따라 상대적으로 크기가 조절 - rem: relative to root element
→ em은 "루트 em"을 의미하며, html 요소의 글꼴 크기에 상대적(16px)
예시
<body>
<header
style={{
background: "orange",
fontSize: "20px",
}}
>
HEADER
<Test />
</header>
<Test />
</body>rem을 사용하는 경우
<div
style={{
background: "red",
color: "white",
fontWeight: 600,
width: "10rem",
height: "5rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
check this out
</div>
부모의 폰트사이즈와 상관 없이 페이지의 어떤 박스 안에서도 크기가 일정하게 고정됨
→ 사이즈 고정이 필요해 → rem
em을 사용하는 경우
가장 상위에서 사용할 때와 컴포넌트 안에서 사용할 때 크기가 달라짐
<div
style={{
background: "red",
color: "white",
fontWeight: 600,
width: "10em",
height: "5em",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
check this out
</div>
→ 어디서 사용되냐에 따라 즉 부모요소에 따라 변경되어야해 → em
em 사용시 주의 사항
em을 많이 사용하게 되면 폰트 사이즈를 즉각적으로 계산하기 어려움
<body>
<header>HEADER</header>
<div
style={{
fontSize: "2em", // 32px
background: "red",
}}
>
<Test />
<div
style={{
fontSize: "2em", // 64px
background: "orange",
}}
>
<Test />
<div
style={{
fontSize: "2em", // 128px
background: "yellow",
}}
>
<Test />
</div>
</div>
</div>
</body>rem을 사용하는 경우 부모를 기준으로 두배 사이즈인 32px으로 일정하게 나오는 것을 확인할 수 있음
→ 따라서 폰트 사이즈는 rem을 사용하는 게 더 좋음!
따라서 원하는 용도에 맞게 상대적, 절대적 유닛을 적절히 사용하는 것이 좋다.
📝 Note!
부모요소의 사이즈에 따라 사이즈가 변경되어야 하는가?
→ %, em
부모와는 상관없이 브라우저 사이즈에 반응해야 하는가?
→v*, rem
요소의 높이나 넓이에 따라 반응해야 하는가?
→ %,v*
폰트 사이즈에 따라 변경되어야 하는가?
→ rem, em
성장기