[FE] CSS 단위 정리 Responsive Units 정리 em/rem/vh/vw

* 아래 용은 드림코딩 앨리님의 유튜브 강의를 보고 정리한 내용입니다.

 

CSS의 기본 요소

 

.box { //여기서 box가 selector
  width: 200px;  // width, height 등은 어떤속성들을 꾸며줄지 작성하는 property
  height: 200px; // 200px, #fffff는 그에 해당하는 value이다.
  color: #ffffff;
  font-size: 16px;
}

 

 

사이즈를 결정하는 Unit

 

- 절대값 absolute ex. px

- 상대값 relative ex. 

 

%를 이용해서 부모의 몇프로 값으로 하는 경우가 많다.

px로 사이즈를 정하는 것은 좋지 않다. 

 

- 자주 사용하는 em, rem, vw, vh, % 정도 알고있으면 좋음.

 

*출처: 앨리의 드림코딩

em

 

- em: 지금 폰트사이즈를 나타내는 단위 현재 M의 폰트사이즈는 16px 같은 폰트사이즈라고 할지라도

어떤 폰트를 쓰는지 font-family에 따라서 사용자에게 보여지는게 달라질 수 있음

em은 항상 고정된 폰트사이즈임 1em == 16px 임

 

 

* 그렇다면 em은 왜 상대적인건가요?

<div class="parent">
	Parent
    <div class="child> Child </div>
</div>

.parent {
	font-size: 8em;
}

.child {
	font-size: 0.5em;
}

em은 부모의 폰트사이즈의 상대적으로 계산이 된다.

기본적으로 브라우저에 html에 할당되는 것은 16px로 지정이된다.

parent 8em * 16px(기본 브라우저에 할당되는 사이즈) = 128px 라는 말이다.

 

parent 안에 있는 child 는 0.5em인데 이 기준은 

부모의 부모의 128px * 0.5 = 64px 라는 것이다. 

=> 즉 em이란 것은 부모의 폰트사이즈를 곱한 값이 계산된다.

=> 여기서 부모를 나누는 기준은 ?

크롬 개발자도구 - computed에서 em이 px로 변환된것을 확인할 수 있다. 

 

 

rem (relative to root element)

: 부모의 폰트사이즈에 따라서 결정되는게 아니라 root에 따라서 결정됨

ex. em: relative to the parent element

 

.parent {

  font-size: 8rem;

}

// 8rem : 16px * 8 = 128px

 

.child {

  font-size: 0.5em;

}

 

// 0.5rem: 16px * 0.5 = 8px

 

우리 프로젝트에서는 SCSS를 사용하고 퍼블리셔님이 rem을 주로 사용해놨음

보통 아래처럼 나와있다는 말은 브라우저의 기본으로 지정해놓은 폰트 사이즈를 따라간다는 말. 

 

html {
	font-size: 100%;
}

위에서 고정된 px값을 사용하면 더이상 브라우저에서 폰트사이즈를 바꾼다고 해도 바뀌지가 않는다.(root를 고정으로 해놨기 때문)

 

em이나 rem을 사용하려면 html { font-size: 100%; }로 하여 반응형으로 만들자.

 

vw = viewportwidth 뷰포트의 너비에 있는 100vw 100% / 50vw 50% (브라우저의 너비에 따라 달라짐)

vh = viewportHeight 뷰포트의 높이의 50vw 50%

% 는 부모요소의 상대적으로 계산된다. em 대신 %를 쓸 수 있다.

 

 

그럼 em과 rem은 언제 어떻게 써야하는지?

 

예제)

1. 

부모요소의 사이즈에 따라서 변경해야한다면

%  em

 

 부모와 상관없이 브라우저에 따라서 해야한다면

v*  rem

 

2.

요소의 너비와 높이에 따라 변경해야한다면

%  v*

 

폰트 사이즈에 따라 변경해야한다면

em rem 사용하면 됨

 

예제) Like 버튼을 만든다고 하면

like 버튼을 rem을 사용하면 페이지의 어떤 박스안에서 사용해도 크기가 고정

반대로 em을 이용해서 컴포넌트를 만들면

 

상위에서 썻을때랑 부모요소에서 사용했을 떄에 따라 like의 폰트사이즈가 달라짐

 

 

 

나의 컴포넌트가 페이지 어디에서나 고정되어야하면 rem

나의 컴포넌트가 부모요소에 따라 사이즈가 유동적으로 변동되어야한다면 em을 사용하여라

 

 

실전 예제) 

-> 직관적으로 폰트사이즈가 계산이 안돼서 어려움 ㅠ 

 

 

-> 직관적으로 잘 됨

 

 

실전 예제 2)

font-size: 5em;

padding: 1em; 이라면 폰트사이즈에 맞게 패딩이 변경됨

-> 미디어쿼리에 따라 스크린마다 사이즈가 변경되면 폰트사이즈도 그에따라 바뀌게됨

 

font-size: 5em;

padding: 10px; 이면 폰트사이즈가 상대적으로 변경되어도 padding은 늘 10px

 

 

 

스크린에따라 다른 rem이 적용됨

 

여기서 padding을 줘볼까?

padding에 em을 주면 폰트사이즈에 따라 바껴짐.

고정적인 패딩을 유지해야한다면 rem유지 위아래는 0.5em을 줘서 폰트사이즈에 맞게 패딩이되도록하고

즉, 아래의 경우에는 패딩이 1rem에 맞처서 그 폰트사이즈의 절반인 0.5em 만큼 위아래 패딩이 적용됨

양옆은 0.5rem으로 브라우저 기준으로 고정임

 

.contents {

   font-size: 1rem;

   padding: 0.5em 0.5rem;

}

 

em과 rem 둘 중한가지만 사용하는게 아님! 적절히 골라서 사용함

 

px to em or rem!

pxtoem.com을 하면 px에 해당하는 것이 정리되어잇음

 

 

아래 같이 font-size: 1.5rem을 하는 것은 타이틀이나 헤더나 이런 글자들이 

어떤 컴포넌트에서 쓰이든지 상관없이 동일하게 보였으면 좋겠어서 rem

padding: 1em은 폰트 사이즈의 1em

=> 폰트사이즈가 변경되는 것에 따라서 패딩도 변경됐음 좋겠어서 em 사용

 

.title {
  font-size: 1.5rem;  //24px
  padding: 1em;  //16px
  background-color: blurlywood;
}

 

미디어 쿼리를 이용해서 flex~를 columm으로 변경하면?

미디어 쿼리에서도 고정적인 px보다는 rem을 사용해서 48rem을 이용하면 좋다.

 

정리

 

box 자체의 사이즈를 결정할 떄는

% vw vh flex 를 이용해서 유동적ㅇ로

 

요소의 폰트사이즈는

루트를 상대로 변경해야한다면 rem을

부모요소에따라서 변경해야한다면 em을

 

 

다음에는 미디어쿼리를 사용하는 법을 익히자~~~~~~~

 

 

* 위 내용은 드림코딩 앨리님의 유튜브 강의를 보고 정리한 내용입니다.