[CSS] 반응형 단위 em과 rem의 쓰임
2023. 3. 8. 01:13ㆍcoding tutorial/CSS
- 절대적 유닛: px
- 상대적 유닛: %, v*(뷰포트), em, rem
- 부모요소의 사이즈에 따라 사이즈가 변경되야할 때 : %, em
- 부모와 상관 없이 브라우저 사이즈에 반응해야할 때 : v*, rem
- 요소에 너비/높이에 따라 사이즈가 변경되야 할 때 : %, v*
- 폰트 사이즈에 따라 사이즈가 변경되야 할 때 : em, rem
- em: 부모 요소의 폰트 사이즈에 따라 사이즈가 결정됨.
ㄴ 나의 컴포넌트가 부모 요소에 따라 유동적으로 변경되야 한다면 em. - rem: root 요소의 폰트 사이즈에 따라 사이즈가 결정됨.
ㄴ 나의 컴포넌트가 페이지 어디에서 사용되어도 동일한 크기를 유지해야 한다면 rem.
- em: 부모 요소의 폰트 사이즈에 따라 사이즈가 결정됨.
* rem의 root란?
rem의 r은 root, 즉 최상위 요소의 font-size 속성값을 의미한다. HTML에서 최상위 요소는 <html>이고 따라서 rem의 경우 html요소의 font-size 속성 값이 기준이 된다.
'coding tutorial > CSS' 카테고리의 다른 글
| [CSS..] 사이트 소개! (0) | 2023.03.20 |
|---|---|
| [CSS] pseudo class(가상 클래스)와 pseudo element(가상 요소) (0) | 2023.03.09 |
| [CSS] header 영역(navigation) 한 줄 정렬하고 상단에 고정 하기 (0) | 2022.09.05 |
| [CSS] float (0) | 2022.08.14 |
| [CSS] footer 영역 하단에 고정하기 (with position: absolute;) (0) | 2022.08.14 |