CSS CSS em과 rem 단위 설명
페이지 정보
작성자 모던DS
조회 1회 작성일 26-02-26 04:18
조회 1회 작성일 26-02-26 04:18
본문
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