🔎 절대단위
- px(픽셀), pt(포인트)
🔎 상대단위
- 고정적이지 않고 기준에 따라 유동적으로 바뀜
- em, rem, % 등
🔎 em과 rem
📌 em
- 현재의 font-size를 정의
- 부모요소인 html에 100% 기준을 두고 하위 요소 들의 폰트사이즈가 결정
- em은 요소의 글꼴 크기 1em을 갖는다.
<style>
.content {font-size: 16px;}
.content h2 {font-size: 2em;}
.content p {font-size: 1.5em}
.content p span {font-size: 0.5em}
</style>
<body>
<div class="content">
<h2>h2타이틀 영역</h2>
<p>p텍스트
<span>p태그 내부의 span 텍스트</span>
</p>
</div>
</body>
✅ 위와 같은 경우라면?
- h2태그 : 16px * 2 = 32px
- p태그 : 16px * 1.5 = 24px
- span의 경우에는 content 영역 ➡️ p태그 영역 ➡️ span 태그이므로 16*1.5*0.5 = 12px
📌 rem
- rem의 r은 root를 뜻함
- rem의 경우 html 최상위 요소의 font-size를 1rem으로 설정
<style>
.content {font-size: 16px;}
.content h2 {font-size: 2rem;}
.content p {font-size: 1.5rem}
.content p span {0.5rem}
</style>
<body>
<div class="content">
<h2>h2타이틀 영역</h2>
<p>p텍스트
<span>p태그 내부의 span 텍스트</span>
</p>
</div>
</body>
✅ 위와 같은 경우라면?
- <content>
16px * 2 = 32px - <p>
16px * 1.5 = 24px - <span>
16px*0.5=8px
📌 상황에 따라서 em을 사용하는 경우와 rem을 사용하는 경우가 나뉘지만 rem을 우선적으로 사용하는 것을 추천.
📌 em을 사용하는 경우 변수 px들이 많아지면서 유지보수에 있어 어려움을 느낄 수 있다.
✅ iOS에서 rem이 적용되지 않을 때 해당 태그를 html 또는 body에 추가해 준다.
-webkit-text-size-adjust: none;✅ 디바이스 사이즈에 따라(반응형) 폰트 사이즈게 변경하게 하려면 rem과 mediaquery를 함께 사용해야 한다.
width: 640px 일때, 125%의 1rem = 20px
width: 320px 일때, 62.5%의 1rem = 10px
//반응형 미디어쿼리 예시
html {
font-size: 62.5%;
-webkit-text-size-adjust:none;
}
@media screen and (min-width: 280px){
html {
font-size: 50%
}
}
@media screen and (min-width: 320px){
html {
font-size: 56.5%
}
}반응형
'퍼블리싱 > SCSS (CSS)' 카테고리의 다른 글
| css) grid에 대해서 (flex와 구별해서 사용하기!) (1) | 2025.11.24 |
|---|---|
| [반응형] css clamp() 함수 정리 (0) | 2025.10.28 |
| px -> rem 변환 함수 (rem mixin) (0) | 2025.08.27 |
| css) 텍스트가 깜빡이는 효과 주기 Text Glitch Effect (0) | 2021.12.05 |
| css) inner gradient button 그라디언트 버튼 스타일 주기 (0) | 2021.10.18 |