프론트엔드 필수 반응형 CSS 단위 총정리(feat.드림코딩 by 엘리)

roadzmoon76·2022년 2월 10일

CSS

목록 보기

4/9

📘 사이즈를 결정하는 유닛은 크게 두가지

📖 Absolute(절대적인 값)

px(Pixels) : css는 스크린, 모니터 위에서 웹사이트를 꾸며줄 때 쓰이므로 cm, mm 이런 현실에서의 단위는 안쓰고 실질적으로 px를 제일 많이 씀

픽셀을 쓰게되면 컨테이너 사이즈가 변경되어도 컨텐츠가 고정된 값으로 유지되는 문제가 생김. 또한 픽셀로 쓰게되면 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 전혀 반응 x

📖 Relative(상대적인 값)

em : relative to parent element 의 약자. 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위. 즉 현재 폰트 사이즈를 나타내는 단위. 부모의 크기에 따라 결정됨.
- 실제로는 폰트페밀리(서체)에 따라 크기가 살짝 다른데 em은 그 크기를 기준으로 잡는것이 아니라 폰트페밀리이 상관없는 절대적으로 부여하는 글자크기를 기준으로 잡음
- 기본적으로 브라우저에서 Html에 할당 되는 폰트 사이즈는 16픽셀
- em 은 부모의 폰트 사이즈를 곱하는 값
```
<div class="parent">
Parent
<div class="child">Child</div>
</div>
```
```
.parent {
font-size: 8em;
}
.child {
font-size: 0.5em;
}
```
- 위의 코드에서 parent 의 폰트사이즈는 부모 html의 폰트사이즈 16px에 8배를 곱한 128px가 되고, child 의 폰트사이즈는 부모 parent의 폰트사이즈 128px에 0.5배를 곱한 64px가 된다
rem : relative to root element 의 약자. em에서 루트의 r이 더해진것. 루트에 지정된 폰트 사이즈에 따라서 크기가 결정됨.
- 위 와 같은 예제에서 따지면, Parent는 html 에서 기본적으로 지정된 16픽셀의 8배가 곱해 진 128픽셀이 되고, child는 16픽셀의 0.5배가 곱해진 8픽셀이다.

기본적으로 html에는 font-size: 100% 옵션이 적용되어있는데, 의미는 브라우저에서 지정된 폰트 사이즈를 따라간다는 뜻. 그래서 다른요소에 em이나 rem을 쓴 후, 브라우저 설정 자체의 font-size를 변경하게되면 다른 요소들도 반응적으로 변경됨. 반대로 html에 고정된 픽셀값을 주면 em, rem을 준 요소들도 고정이 됨

vw : 100vw 쓰게되면 viewport width viewport 너비에 있는 100% 를 쓰겠다는 의미. 50vw 쓰게되면 브라우저 너비의 반을 쓰겠다고 지정하는 것
vh : viewport height
% : 부모요소의 상대적인 크기가 계산됨

📘 그래서 언제 어떤걸 쓰지?

📖 기준 1

📌 부모 요소의 사이즈에 따라 사이즈가 변경되어야 한다면, em 이나 % 같은 애들 사용
📍 부모와는 상관 없이 브라우저의 사이즈에 대해 반응해야 한다면 v* 나 rem 을 사용

📖 기준 2

📌 요소의 너비나 높이에 따라 사이즈가 변경 되어야 한다면 % 나 v* 사용
📍 폰트 사이즈에 따라 사이즈가 변경되어야 한다면, em 이나 rem

📘 em vs rem

📖 em

em 을 쓰면 상위에서 썼을 때와 부모요소에서 썼을 때 크기가 달라짐
- em 은 부모요소의 폰트사이즈에 따라 상대적으로 변하기 때문임
나의 컴포넌트가 어디에서 사용되냐에 따라, 즉 부모요소에 따라 사이즈가 유동적으로 변경되어야 한다면 em 사용
자손 루트가 복잡해질수록 폰트 크기를 예측하기가 힘들어진다
해당 요소에 폰트 사이즈를 1rem; 을 주고 padding을 0.5em을 준다면 해당 요소의 폰트사이즈 1rem;을 기준으로 0.5배가 됨

만약 패딩에 em을 기준으로 주면 타이틀이나 컴포넨트의 폰트사이즈가 다르면 수직정렬이 안맞는 일이 일어날 수 있다. 이런경우 상하는 em을 주고 좌우는 rem 을 주면 해결된다