Css 단위 알아보기(px, %, vw, vh, etc)

현실에서 우리는 사물의 크기를 잴 때, mm(밀리미터)나 cm(센치미터)의 단위를 사용하곤합니다.
Css에서 또한 마찬가지로, element(요소)의 크기를 정할 때, 사용되는 여러 단위가 있습니다.
오늘은 Css에서 사용되는 단위를 알아봅시다.

1. px(픽셀)

가장 기본이 되는 단위입니다.

현실에서의 mm(밀리미터), cm(센치미터)라고 생각합시다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <p class="size-18px">18px 크기의 텍스트</p>
    <p class="size-14px">14px 크기의 텍스트</p>
  </body>
</html>

.size-18px {
  font-size: 18px;
}

.size-14px {
  font-size: 14px;
}

2. %(퍼센트)

크기를 퍼센트로 줍니다. 주로 width/height를 정할 때 씁니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="parent">
      parent
      <div class="child">Child</div>
    </div>
  </body>
</html>

.parent {
  width: 300px;
  background: red;
}

.child {
  width: 50%;
  background: blue;
}

Q. 왜써요? 그냥 px로 계산하면서 쓰면 되지 않나요?
A.
노트북에서 웹브라우저는 몇 픽셀의 가로를 가질까요? 1280px? 1400px?
그렇다면 24인치 모니터에서의 웹브라우저는 몇 픽셀일가요? 1920px?
그렇다면 32인치는요? 2560px?
그러면 브라우저를 전체화면 말고 줄이면 어떻게 되나요?
...

이처럼 우리가 보는 웹브라우저는 크기가 정해져있지 않은 경우가 대부분입니다.
그래서 우리가 보는 화면의 비율로 크기를 다룰줄 알아야해요.

3. rem

html 태그의 글자 크기의 비율로 크기를 정합니다.

예를들어 html 태그의 글자크기가 16px일 때, 2rem의 크기는 32px이 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="rem-2">2rem 글자</div>
    <div class="rem-3">3rem 글자</div>
  </body>
</html>

html {
  font-size: 16px;
}

.rem-2 {
  font-size: 2rem;
}

.rem-3 {
  font-size: 3rem;
}

Q. 왜써요? 그냥 px로 계산하면서 쓰면 되지 않나요?
A. 일단 "반응형 디자인"이라는 키워드와 관련되있다고 생각합시다.

4. vw, vh

v라는건 viewport라는 뜻으로, 화면크기라고 생각합시다.

vw는 viewport의 width, vh는 viewport의 height로, 화면의 몇퍼센트를 차지할건지를 정하는 단위입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="bg-red vw-100 vh-100"></div>
  </body>
</html>

.bg-red {
  background: red;
}

.vw-100 {
  width: 100vw;
}

.vh-100 {
  height: 100vh;
}

5. dvh

vh는 화면의 비율에 따라 높이를 가져오는데, 크롬이나 사파리 모바일에서는 검색창을 계산하지 않습니다.

dvh는 검색창의 높이를 포함한 높이까지 계산해서 줍니다.

이외에도 다른 여러 단위들이 있지만, 이 다섯개는 꼭 외웁시다.

px
%
vw, vh
dvh
rem

웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요.

https://zabefofoon.github.io/mm-guide/

로또 번호 생성기도 만들었습니다. 한번 구경해보세요.

https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea

관련글: 주요 Css 속성(Property) 알아보기

'Coding > Css' 카테고리의 다른 글

주요 Css 속성(Property) 알아보기 (68)	2023.12.28
Css Selector(선택자)알아보기 with id(이름), class(별명) (88)	2023.12.27
Css 파일 만들기(with Visual Studio Code) (83)	2023.12.26
Css 란? (73)	2023.12.26

금복례의 블로그

Css 단위 알아보기(px, %, vw, vh, etc)

'Coding > Css' 카테고리의 다른 글

티스토리툴바

Css 단위 알아보기(px, %, vw, vh, etc)

'Coding > Css' 카테고리의 다른 글

'Coding/Css' Related Articles

티스토리툴바