POTATO THAT WANT TO BE HUMAN

[CSS] CSS의 단위 (%, em, rem, vw, vh, vmin, vmax) 본문

FRONTEND/CSS

[CSS] CSS의 단위 (%, em, rem, vw, vh, vmin, vmax)

녜힝 2022. 5. 12. 21:45
반응형

CSS에서는 다양한 단위가 있습니다. 단위에는 상대적인 단위와 절대적인 단위가 존재합니다.

 

🤔 절대적 단위

1. px

px은 절대적인 단위로, 모니터의 해상도에 따라 다른 크기를 가집니다. 해상도가 높다면 작게 보이고, 해상도가 낮다면 크게 보입니다.

 

🤔 상대적 단위

1. %

% (백분율) 단위는 부모 요소를 기준으로 비율로 표현됩니다. ( 상위요소의 몇 %인지를 계산 )

%를 사용할 때에는 calc() 함수와 함께 쓰입니다. clac() 함수는 연산함수로 +, -, *, / 연산이 가능합니다.

( 이때 나눗셈에서 0으로 나누면 에러가 발생하므로 주의하여야 합니다. )

연산기호 중 +와 - 는 앞뒤로 띄어쓰기를 해줘야합니다. 

 

예제를 통해 살펴보겠습니다.

 

큰 box가 있고 그 안에 두 개의 box가 있습니다.

두개의 box 사이에 50px의 틈을 항상 주고싶다면 어떻게 해야할까요?

 

두개의 사각형의 width를 각각 25px씩을 줄여야하는데 .. 코드를 통해 알아보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS단위 - %</title>
    <style>
        .box {
            width: 400px;
            max-width: auto;
            height: 400px;
            border: 2px solid blue;
        }
        .box>div {
            width: calc(50% - 25px);
            height: 50%;
            background-color: #ee8080;
            float: left;
        }
        .box-1 {
            margin-right: 25px;
        }
        .box-2 {
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1">

        </div>
        <div class="box-2">

        </div>
    </div>
</body>
</html>

calc() 함수를 사용하여 해결할 수 있습니다.

box안 div의 width를 calc(50% - 25px) 로 지정합니다. 그러면 각각의 box는 전체 넓이에서 25px을 뺀 넓이가 width로 지정됩니다. 그러면 다음과 같이 50px만큼이 오른쪽에 생깁니다. 줄어든 사각형의 width만큼 폭이 생겼으므로 이 폭을 가운데로 옮겨야 합니다. 이때에는 왼쪽의 box에는 margin-right를, 오른쪽의 box에는 margin-left를 25px씩 줍니다.

 

결과는 다음과 같습니다.

이제 바깥 box의 width가 변경되어도 가운데 50px은 여전히 50px로 유지됩니다.

 

2. em

em과 rem은 font 사이즈에서 주로 사용되며 padding과 margin에서도 사용됩니다.

width, height 등에서는 em, rem 을 주게 되면 너무 복잡해지기 때문에 사용하지 않습니다.

 

em 은 equal to M의 약자로, 상위요소의 font-size가 기준이 됩니다.

상위요소의 폰트 크기가 정해져 있지 않다면 기본인 16px로,  1em = 16px 입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 단위</title>
    <style>
        html {
            font-size: 20px;
        }
        .box1 {
            width: 400px;
            height: 400px;
            border: 3px solid #f00;
            font-size: 1em;
        }
        .box2 {
            width: 300px;
            height: 300px;
            border: 3px solid #ff0;
            font-size: 2em;
        }
        .box3 {
            width: 200px;
            height: 200px;
            border: 3px solid #00f;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
        <div class="box2">
            box2
            <div class="box3">
                box3
            </div>
        </div>
    </div>
</body>
</html>

box를 3개, 각각 200px 300px 400px 의 정사각형으로 만들었습니다.

기본 html font-size를 16px에서 20px로 변경하고, box1은 1em, box2는 2em, box3도 2em 으로 지정하였습니다.

결과는 다음과 같습니다.

box1의 font-size는 상위요소인 body의 font-size 20px을 기준으로 1em이므로 20px입니다.

box2의 font-size는 상위요소인 box1의 font-size 20px을 기준으로 2em이므로 20*2 = 40px 입니다.

box3의 font-size는 상위요소인 box2의 font-size 40px을 기준으로 2em이므로 40*2 = 80px 입니다.

 

이렇게 em은 부모요소의 fontsize를 기준으로 계산됩니다.

 

 

3. rem

rem 은 equal to root M의 약자로, 가장 최상위 요소(root=html)의 font-size가 기준이 됩니다.

 

위 예제에서 font-size의 단위를 em에서 rem으로 변경해보겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 단위</title>
    <style>
        html {
            font-size: 20px;
        }
        .box1 {
            width: 400px;
            height: 400px;
            border: 3px solid #f00;
            font-size: 1rem;
        }
        .box2 {
            width: 300px;
            height: 300px;
            border: 3px solid #ff0;
            font-size: 2rem;
        }
        .box3 {
            width: 200px;
            height: 200px;
            border: 3px solid #00f;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="box1">
        box1
        <div class="box2">
            box2
            <div class="box3">
                box3
            </div>
        </div>
    </div>
</body>
</html>

결과는 다음과 같습니다.

font-size의 단위가 rem으로 모두 최상위 요소인 html의 font size를 기준으로 합니다.

때문에 box1의 font-size는 최상위 요소인 html의 font-size 20px을 기준으로 1em이므로 20px,

box2의 font-size는 최상위 요소인 html의 font-size 20px을 기준으로 2em이므로 20*2 = 40px,

box3의 font-size는 최상위 요소인 html의 font-size 20px을 기준으로 2em이므로 20*2 = 40px 입니다.

 

이렇게 rem은 최상위 요소의 font size를 기준으로 계산됩니다.

 

4. vw, vh

vw, vh는 각각 viewport width, viewport height의 약자로 내가 보고있는 브라우저의 width, height를 의미합니다.

브라우저 전체 width는 100vw, 브라우저 전체 height는 100vh 입니다.

 

예를 들어 브라우저의 높이 값이 700px이면 1vh는 7px이 됩니다.

여기서 브라우저의 높이 값이 변경되어 900px이 되었다면 1vh는 9px이 됩니다.

 

이처럼 브라우저의 사이즈가 변함에 따라 vw, vh를 기준으로 설정한 요소의 값도 유동적으로 변할 것입니다.

( 뷰포트의 너비값과 높이값에 상대적인 영향을 받습니다. )

 

5. vmin, vmax

vmin은 viewport에서 작은 쪽 (짧은 쪽)을 기준으로 하고, vmax는 viewport에서 큰 쪽 (넓은 쪽)을 기준으로 합니다.

( 뷰포트의 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있습니다. )

 

예를 들어 브라우저의 크기가 width: 1100px, height: 800px 일 때

1vmin은 작은 쪽을 기준으로 8px이 되고, 1vmax는 큰 쪽을 기준으로 11px이 됩니다.

 

vw, vh와 마찬가지로 뷰포트의 너비값과 높이값이 변하면 vmin, vmax의 값도 유동적으로 변할 것 입니다.

( 뷰포트의 너비값과 높이값에 상대적인 영향을 받습니다. )

 

 

 

 

 

em과 rem에 대한 예제를 하나 더 살펴보겠습니다.

버튼을 만들 때 padding을 넣는 경우, font size가 변경되면 그만큼 padding도 변경되도록 해보겠습니다.

 

 

반응형

'FRONTEND > CSS' 카테고리의 다른 글

[CSS] chrome input 자동완성 autofill 없애기 (background-color, color)  (0) 2022.05.30
[CSS] Grid에 대하여  (0) 2022.05.28
[CSS] 형제 선택자 + , ~ 사용법  (0) 2022.05.12
[CSS] box-sizing - 테두리 영역의 크기를 결정하는 속성  (0) 2022.05.10
[CSS] float를 취소하기 위한 clearfix 이용하기  (0) 2022.05.08
'FRONTEND/CSS' Related Articles more
Comments