대표적으로 px : 문제점은 컨테이너 사이즈가 변해도 해당 콘텐츠 크기는 변하지 않는다.
.parent{
font-size: 8em; // 800%라고 표기하는 것과 동일
}
.child{
font-size: 0.5em; // 50%라고 표기하는 것과 동일
}
.parent{
font-size: 8rem;
}
.child{
font-size: 0.5rem;
}
- html이나 body에 따로 폰트 사이즈를 지정하지 않으면 html의 폰트 사이즈는 100%로 지정이 되어 있다.
html{ font-size:100%; }
- 이 말은, 브라우저에서 지정한 폰트 사이즈를 따라간다는 뜻이다.
- 다른 요소들에서em
,rem
을 썼을 경우 브라우저에서 폰트사이즈를 변경하면 자동적으로 우리 페이지의 폰트 사이즈가 변경된다.
- 반면, html이나 body에 고정된 px 값을 폰트 사이즈로 지정해주면 브라우저에서 폰트 사이즈를 변경할 경우에 그 변경 사항에 반응하지 못한다.
html{ font-size:24px; }
100vw : viewport width의 100%를 쓰겠다.
50vw: viewport width의 반을 쓰겠다.
100vw : viewport height의 100%를 쓰겠다.
50vw: viewport height의 반을 쓰겠다.
Relative unit
: %, v*, em, rem 정리 🍩
- 폰트 사이즈
부모크기에 따라 변경되는 것 :em
root 크기에 따라 변경되는 것 :rem
- 뷰포트,박스 사이즈
부모 크기에 따라 변경되는 것 :%
브라우저 크기에 따라 변경되는 것 :v* (vh, vw, vmin, vmax)
em
, rem
제대로 활용하기 🍩em, rem 중에 한 가지만 골라서 사용하기보다 어떻게 디자인 해야 할지에 따라 적절히 골라서 사용하는 것이 좋다
- 🍩 나의 컴포넌트가
페이지 어디서 사용되어도 사이즈가 그대로 유지
되어야 한다면 부모(X) 루트(O)가 기준이 되는rem
을 사용하여 스타일링- 🍩 컴포넌트가 어디에서 사용되냐에 따라
(부모 요소에 따라)
사이즈가 유동적으로 변해야 한다면 부모(O) 루트(X)가 기준이 되는em
을 사용하여 스타일링- 🍩 폰트 사이즈 변경에 따라
패딩값도 같은 비율로 리사이징
하려면 padding 값도 em 으로 주면된다.
- 이렇게 하면 padding값은 기존에 적용된 폰트 사이즈에 비례한 값이 설정된다.
- 미디어 쿼리로 스크린 사이즈마다 폰트 사이즈가 바뀌도록 했을 때 스크린 사이즈 변경 시, 패딩 값도 이 폰트 사이즈에 따라 1em으로 바뀌기 때문에 반응형으로 만들 수 있다.h1{ font-size: 5em; padding: 1em //브라우저에서 폰트사이즈가 변경됨에 따라 패딩값도 같은 비율로 리사이징 }
@media screen and (max-width:780px){ h1{ font-size: 3em; } } @media screen and (max-width:680px){ h1{ font-size: 1.5em; } }
- 🍩 단, 요소마다 사이즈에 상관없이
고정적인 padding을 유지
해야 한다면rem
을 쓰는 것이 좋다
- ex. 타이틀과 내부 콘텐츠 양 옆에 동일한 padding 값을 주고 싶을 때..title { padding : 0.5em 0.5rem; //위 아래는 폰트의 크기에 따라 바뀌며, 양 옆은 고정된다. } .contents{ font-size : 1rem; padding : 0.5em 0.5rem; // 위 아래는 폰트의 크기에 따라 바뀌며, 양 옆은 고정된다. }
본 글은 드림코딩엘리 강의 시청 후 정리한 내용입니다.
프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units
프론트엔드 필수 반응형 CSS 단위 em 과 rem
em, rem 숙지하고 갑니다 !!