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

ha ju·2021년 7월 8일
0
post-thumbnail
post-custom-banner

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


본 글은 드림코딩엘리 강의 시청 후 정리한 내용입니다.
프론트엔드 필수 반응형 CSS 단위 총정리 (EM과 REM) | Responsive CSS Units
프론트엔드 필수 반응형 CSS 단위 em 과 rem

post-custom-banner

1개의 댓글

comment-user-thumbnail
2021년 7월 16일

em, rem 숙지하고 갑니다 !!

답글 달기