[CSS] CSS 단위 - %, em, rem, vw, vh 속성 알아보기

코딩기록/CSS

[CSS] CSS 단위 - %, em, rem, vw, vh 속성 알아보기

더블디럭스 2022. 11. 26. 01:34

서론

웹 페이지를 이용하는 사용자들은 데스크탑, 모바일, 태블릿 PC 등 다양한 기기환경에서 접속을 합니다. 그렇기에 웹페이지 요소들 크기에 고정된 절대값인 'px'값으로 주게되면, 모든 기기에 개발자가 의도한 최적의 디자인을 보여주기 어렵습니다. 이때 요소의 크기를 "상대적인 크기"로 정의하는 속성을 사용하면 유용합니다.

1. % 속성

크기를 %로 입력하게 되면, 부모의 크기를 기준으로 따라가게 됩니다.

예를 들어, 아래 예시와 같이 부모태그의 크기가 20px일 때, 자식태그의 크기를 50%로 준다면 자식태그는 10px로 표시됩니다.

    <!-- CSS 코드 -->
    <style>
      .parent {
        height: 100px;
        width: 100px;
        background-color: aqua;
        font-size: 20px;
      }

      .child {
        height: 50%;
        width: 100%;
        font-size: 50%;
        background-color: orange;
      }
    </style>
    
    
    
    <!-- HTML 코드 -->
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>

아래는 결과물을 보면 글자태그 뿐만 아니라 박스크기의 속성도(heigt, width) 부모태그를 참조하여 정해지는 걸 볼 수 있습니다.

2. em 속성

위에서 언급한 %속성과 비슷하게 부모태그를 참조하여 크기가 결정되는 속성입니다.

font-size를 정할 때 주로 사용합니다.

    <!-- CSS 코드 -->
    <style>
      .parent {
        font-size: 20px;
      }

      .child {
        font-size: 0.5em;
      }
    </style>
    
    
    <body>
    <!-- HTML 코드 -->
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>
  </body>

child는 0.5em이므로, 부모태그의 폰트크기 20px를 참조하여 10px로 출력됩니다.

3. rem 속성

em 속성과 달리 앞에 'r' 이 붙는 rem 속성에서, r은 root(뿌리)를 의미합니다.

즉, rem은 부모태그가 아니라 최상단 태그를 참조합니다.

따라서 아래와 같이 코드작성시 부모(parent)를 참조하지 않고 최상단 태그인 html태그를 참조하는 걸 볼 수있습니다.

 <!-- CSS 코드 -->
    <style>
      html {
        font-size: 80px;
      }
      .parent {
        font-size: 20px;
      }

      .child {
        font-size: 0.5rem;
      }
    </style>
    
    
    
     <!-- HTML 코드 -->
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>

child는 최상단태그인 html태그의 font-size: 80px를 참조하여, 40px로 출력되었습니다.

4. vw/vh 속성

일단, 뷰포트 개념부터 알아봅시다.

vw/vh 속성을 알아보기 전에, 먼저 뷰포트라는 개념을 먼저 알아야 됩니다. html 포맷을 불러올 때마다 항상 자동으로 완성되는 문구가 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

위 문구는 사용자가 태블릿이나 모바일과 같은 환경으로 접속했을 때 필요한 메타정보입니다.

일단, viewport는 이름 그대로, 보여지는 영역을 말합니다. 뒤에 나오는 속성도 이 기회에 알아보겠습니다.

width는 뷰포트의 가로길이를 의미합니다. width=device-width 라고 했으니, 뷰포트의 가로길이를 디바이스폭에 맞춘다는 얘기입니다.

intial-scale은 페이지에 처음 접속했을 때 배율을 의미합니다. 즉, 1.0보다 작으면 축소된 화면을 제공하고, 1.0보다 크면 확대된 화면을 제공합니다.

그럼 이제 vw/vh 속성에 대해 알아 보겠습니다.

vw/vh 앞에 v는 이미 눈치빠르신 분들은 예상하셨듯이 Viewport Width와 Viewport Height를 의미합니다.

이름부터 뷰포트를 참조하는 속성이라는게 느껴지시죠? 뷰포트는 화면에 보여지는 영역을 말하는 거라 했습니다. 즉, 보여지는 영역을 기준으로 결정되는 값입니다.

따라서, 1vw = 뷰포트 너비의 1% , 1vh = 뷰포트 높이의 1%를 의미합니다.

예를들어 뷰포트 너비와 높이가 1000px이라면 1vw는 10px, 1vh도 10px를 의미합니다.

만약, 100vw 또는 100vh 값을 부여한다면 보여지는 영역의 가로 또는 세로 전체를 채우게 되겠죠.

아래 코드는 위 %속성 예시와 동일한 구조에서 vw, vh로 속성을 바꾼 형태입니다.

<!-- CSS 코드 -->
     <style>
      .parent {
        height: 200px;
        width: 400px;
        background-color: aqua;
        font-size: 20px;
      }

      .child {
        height: 20vh;
        width: 50vw;
        font-size: 50%;
        background-color: orange;
      }
    </style>
    
    <!-- HTML 코드 -->
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>

vh, vw 속성을 사용함으로서, 아래 사진처럼 브라우저 크기에 따라 같이 변하는 걸 볼 수 있습니다.

결론

사용자가 사용하는 기기는 무척 다양하며, 그에 맞춰 브라우저 크기도 제각각 입니다. 이것이 바로, 크기에 맞춰 변화하는 반응형 웹이 필요한 이유입니다. 예를 들어, 고객이 폰트 크기를 직접 변경할 수 있게 UI를 구성하고 그 값을 참조하여 다른 값들이 자동적으로 변하도록 코드를 구성하거나, 뷰포트 크기에 맞춰 자동으로 변경되게 한다면 개발자는 잘 만든 한 가지 반응형 웹으로 다양한 환경에 대응 할 수 있는 것입니다.

따라서, 반응형 웹개발의 한 부분으로서 미디어 쿼리와 함께 상대적 크기를 활용하는 속성들에 대해 숙지할 필요가 있습니다.

티스토리