CSS | 반응형 레이아웃을 위한 Relative units에 대하여

ha ju·2021년 7월 8일

Absolute unit

대표적으로 px : 문제점은 컨테이너 사이즈가 변해도 해당 콘텐츠 크기는 변하지 않는다.

Relative unit

🍞 em

Relative to parent element
부모 태그의 폰트사이즈가 기준이 된다. (우리가 따로 html이나 body에 폰트 사이즈를 지정해주지 않는 이상 16px이 디폴트 값이다)
자식 태그는 부모 태그의 크기를 기준으로 크기가 지정된다.

.parent{
  font-size: 8em;    // 800%라고 표기하는 것과 동일
}

.child{
  font-size: 0.5em;  // 50%라고 표기하는 것과 동일
}

🍞 rem

Relative to root element
root에 지정된 폰트 크기에 따라서 크기가 결정되는 아이다.

.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;
}

🍞 vw : viewport width

100vw : viewport width의 100%를 쓰겠다.
50vw: viewport width의 반을 쓰겠다.

🍞 vh : viewport height

100vw : viewport height의 100%를 쓰겠다.
50vw: viewport height의 반을 쓰겠다.

🍞 vmin

50vmin : 브라우저의 높이와 너비 중에 작은 값의 50%
아래 그림에서는 너비보다 높이가 작으므로 높이의 50%가 적용된다.

🍞 vmax

50vmax : 브라우저의 높이와 너비 중에 큰 값의 50%
아래 그림에서는 높이보다 너비가 크므로 너비의 50%가 적용된다.

🍞 %

부모 요소에 상대적인 크기가 계산되어진다.

🍩 **`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;   // 위 아래는 폰트의 크기에 따라 바뀌며, 양 옆은 고정된다.
}