CSS

🙈Intro

단위는 반응형 웹의 기본이 됩니다. 단위를 잘못 사용하면 자칫 융통성 없는 화면이 구성되곤 하죠🥲
그래서 오늘은 기본적으로 반응형 웹에서 필수적으로 알아야 하는 단위들을 정리해보고자 합니다!

🐢 Font-Size 기준

1. em

1em = 부모의 폰트 크기이기 때문에 부모의 폰트크기에 따라 그 값이 달라집니다.
ex ) 부모의 폰트 크기가 20px이라면 1em=20px / 부모의 폰트 크기가 16px 이라면 1em=16px

2. rem

1rem = html(root element)의 폰트 크기입니다!
em과는 다르게 최상위 요소의 폰트크기에 영향을 받아 html의 폰트 크기를 따릅니다.
기본 html 폰트사이즈는 16px이니, 이것을 이용해서 제어할 수도 있겠지요?
ex ) 1rem=16px이니까, 10px 대신 0.625rem 이용!

둘의 차이는 예시를 통해 알 수 있습니다

<html>
  <body>
    <div class="book">
      <div class="book-image"></div>
      <div class="book-writer"></div>
    </div>
  </body>
</html>

/*em을 이용한 예시*/
html{font-size: 40px};
body{font-size: 0.5em};/*폰트사이즈 20px*/
.book{font-size: 3em;} /*폰트사이즈 60px*/
.book-image{width: 2em;}/*너비 120px*/
.book-writer{font-size: 0.25em;} /*폰트사이즈 15px*/

/*rem을 이용한 예시*/
html{font-size: 40px};
body{font-size: 0.5rem};/*폰트사이즈 20px*/
.book{font-size: 3rem;} /*폰트사이즈 120px*/
.book-image{width: 2rem;}/*너비 80px*/
.book-writer{font-size: 0.25rem;} /*폰트사이즈 10px*/

차이를 아시겠나요?
em 단위는 부모를 따르므로 기준이 되는 1em값이 계속 바뀌는 한편,
rem 단위는 html을 따르므로 기준이 되는 1rem의 값이 일정하죠!
계속 바뀌는 em은 계산에 특히 유의해야합니다.

rem과 em은 부모를 통해 자식들의 사이즈까지도 자동적으로 제어할 수 있다는 것이 큰 장점입니다!
특히 미디어 쿼리와 함께 사용하면 유동적인 조작을 할 수 있어요😆

/*em을 이용해 제어*/
@media (max-width: 500px) {
  .book { font-size: 20px ; } /*이 값을 제어하면 모든 em이 영향을 받습니다*/
}

/*rem을 이용해 제어*/
@media (max-width: 500px) {
  html { font-size: 150%; } /*이 값을 제어하면 모든 rem이 영향을 받습니다*/
}

em 혹은 rem으로 크기를 표현하면,
이렇게 한 선택자만 제어해도 em과 rem으로 정의된 단위들도 함께 제어할 수 있다는 장점이 있습니다.
em은 주로 특정 요소의 font-size를 기준으로 주변을 제어해야 하는 경우(margin, padding 등)에 사용하고,
rem은 주로 레이아웃을 구성하는, 고정적 기준을 중심으로 크기가 변해야 하는 곳에 사용합니다.(픽셀 대신 rem으로 환산해서 사용)

🐢 Viewport 기준

1. vw, vh

100vw = 보여지는 뷰포트 너비
100vh = 보여지눈 뷰포트 높이
vw와 vh는 뷰포트를 중심으로 화면을 구성하기에 유용한 단위예요!
header와 footer가 위 아래 20px 이라면, height: calc(100vh-40px);
이런 식으로 제어할 수 있어요!

그렇다면 %와의 차이는 무엇일까요?

%도 얼핏 비율로 화면을 구성한다는 점에서 vw, vh와 유사하지만,
부모를 기준으로 한 퍼센티지라는 점에서 차이가 있어요!
부모를 기준으로 일정 비율을 이용해 화면을 구성하고 싶다면 %를,
보이는 뷰포트 영역을 중심으로 화면을 구성하고 싶다면 vw,vh를 적극 활용할 수 있답니다~
em과 rem이 단순히 폰트만의 단위가 아니었듯이, vw,vh도 너비나 높이만의 단위가 아니에요.
다양한 속성에 적용해서 활용할 수 있습니다!

2. vmin, vmax

대충 이름을 보면 짐작이 가겠지만, vmin은 최소+뷰포트 vmax는 최대+뷰포트의 느낌이에요.
vmin은 vw와 vh 중 더 작은 값을, vmax는 더 큰 값을 의미해요!
100vw = 500px, 100vh = 1000px 이라면
100vmin = 500px, 100vmax = 1000px 이 되겠죠?

그렇다면 vmin과 vmax는 어떻게 사용할 수 있을까요?

/*100vw = 700px , 100vh = 500px이라고 치면*/

.min-box{
  /*vmin은 언제나 뷰포트 내에 내용 전부가 보인다*/
  height: 100vmin;
  width: 100vmin;
  /*500px*500px의 박스 생성*/
}

.max-box{
  /*vmax는 언제나 뷰포트가 꽉 찬다.*/
  height: 100vmax;
  width: 100vmax;
  /*700px*700px의 박스 생성*/
}

이처럼 vmin은 언제나 화면에 보여주고 싶은 내용인 경우에,
vmax는 언제나 화면을 꽉차게 하고싶은 내용인 경우에 활용할 수 있습니다!

🐢 절대 단위

절대 단위는 다른 요소와는 관련이 없으며 항상 동일한 크기입니다.

px ) 1px = 노트북 픽셀 격자 하나의 크기
pt ) 1pt = 1in/72
in ) 2.54cm

참고 사이트) pxtoem.com px->em으로 변환해주는 사이트이다!

🙉Epilogue

이렇게 각 잡고 포스팅 해보는 것이 처음인데,
여러 가지 정리해 볼 수 있었습니다😃
앞으로 ... 포스팅을 더 열심히 ... 꾸준히 ... 해보겠읍니다

'TIL' 카테고리의 다른 글

20210901~20210910 TIL in Goorm (0)	2021.09.12
SOPT 3차 세미나 - React 기본 개념 props, state, hook (4)	2021.04.24
HTML Canvas와 JS 이용해서 그림판 만들기 (0)	2021.04.17
SOPT 2차 세미나 내용 개괄적 정리 (0)	2021.04.11
MYSQL 8.0 DB 생성과 사용자 생성과 권한 주기 (0)	2021.04.03

CSS 단위 em, rem, vw, vh, vmin, vmax 속성