CSS CSS em과 rem 단위 설명
페이지 정보
작성자 모던DS
조회 74회
조회 74회
본문
CSS em과 rem 단위 설명
CSS에서 em과 rem은 모두 상대적인 크기를 나타내는 단위입니다. 고정된 px와 달리 주변 환경에 따라 크기가 변하므로 반응형 웹을 만들 때 필수적으로 사용됩니다.
1. em (Element)
나 자신 혹은 부모 요소의 폰트 크기를 기준으로 합니다.
기준: 바로 위 부모 요소의
font-size.특징: 중첩해서 사용할 경우 크기가 복리처럼 계산되어 관리가 어려워질 수 있습니다.
용도: 특정 요소 내부의 여백(
padding,margin)을 해당 요소의 글자 크기에 비례해서 조절하고 싶을 때 유용합니다.
2. rem (Root em)
최상위 요소(<html>)의 폰트 크기를 기준으로 합니다.
기준: 브라우저 기본 폰트 크기 (보통 16px).
특징: 어디서 사용하든 기준점이 동일하므로 크기를 예측하기가 매우 쉽습니다.
용도: 전체적인 레이아웃, 글자 크기, 일관된 여백을 잡을 때 표준처럼 사용됩니다.
| 구분 | em | rem |
| 기준 | 부모 요소의 폰트 크기 | 최상위(html) 요소의 폰트 크기 |
| 특징 | 중첩 시 크기 누적됨 | 항상 일정함 |
| 장점 | 요소 내부의 비례 관계 유지 | 전체 웹사이트의 일관성 유지 |
- 이전글CSS image 반응형 만들기 26.02.26
- 다음글기기의 화면 크기 - 휴대폰, 태블릿, 스마트워치, 노트북 등 26.02.26