14_[css]css 단위

5 minute read

CSS-단위

px : 해상도에 대한 상대적인 단위
- 화면에 절대적으로 크기를 고정하고자 할 때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 600px;
        }
        .parent{
            width: 300px;
        }
        .child{
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

CSS 단위- px

% : 부모 요소의 가로 사이즈의 영향을 받음

%는 CSS 스타일이 적용될 대상의 부모 요소를 기준으로 상대적으로 몇 %만큼 크기를 사용할 것인지 결정하게 한다!

예를 들어서

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 600px;
        }
        .parent{
            width: 50%;
        }
        .child{
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

위와 같이, 어떤 조상 요소격인 요소를 길이를 정해둔 후, 그에 대해서 %로 크기를 지정해주면, 맨 위에서 확인한 결과와 동일한 결과를 확인해볼 수 있다!

em과 rem

em : 자기 자신의 폰트 사이즈 영향을 받음

대부분 브라우저에서는 기본 폰트 사이즈가 약 16px 정도 되는데, 이를 1 em으로 간주하여 width를 설정하면, 위의 결과와 별반 다를 바 없다![1 em = 16px ▶️ 기본! 따라서, 기존의 600px과 같은 효과를 내려면, 600/16=37.5em을 적용하면 위에서 연습한 결과와 유사한 결과를 확인해볼 수 있다!!]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 37.5em;
            font-size:16px;
        }
        .parent{
            width: 50%;
        }
        .child{
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

🌟 그리고 부모요소에서 font-size를 설정해두었다면, 자식요소에서도 해당 속성에 대한 값이 전달되어 em의 기준이 설정된다!

즉, 아래와 같이 parent와 child 요소 각각에

-parent :( 10 em * 16 px =160 px)+ (2px *2) =164px 만큼의 너비

-child (: 5 em * 16 px = 80 px )+ (2px *2) = 164px 만큼의 너비

가 적용될 수 있다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 37.5em;
            font-size:16px;
        }
        .parent{
            width:10em;
        }
        .child{
            width:5em;
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

🌟 그런데!! 만약에, 자식 요소에서 폰트 크기를 em 단위를 이용해서 변경한다면 ⁉️

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 37.5em;
            font-size:16px;
        }
        .parent{
            /* width: 50%; */
            width:10em;/*자기 자신을 이용해서 기준을
            잡기 때문에 10 em * 32px + 2px * 2= 324px이 너비가 될 것*/
            font-size:2em;/*font-size=2*16px = 32px */
        }
        .child{
            /* width: 50%; */
            width:5em;
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

위의 경우, 자식 요소에서 폰트 크기를 2 em= 32 px로 설정해두었고, 이를 이용해서 width를 10em으로 잡았기 때문에, border 너비까지 고려하게 되면, 총 324px의 너비가 parent 요소에 지정된다

🌹폰트 사이즈 1 em의 기준은 부모 요소로부터 상속받아서 em으로 설정할 수 있다! (그래서 ⬆️에서처럼 사용 가능)

▶️ 아래에서 처럼 child 요소에서 2 em으로 폰트 크기를 설정해주면, parent 요소를 기준으로 폰트 크기가 결정되기 때문에 64px이 된다(1 em= 32 px(parent 요소 기준))

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border:2px solid;
        }
        .container{
            width: 37.5em;
            font-size:16px;
        }
        .parent{
   
            width:10em;
            font-size:2em;/*font-size=2*16px = 32px */
        }
        .child{
            width:5em;
            font-size:2em;/*32px * 2= 64px*/
        }
    </style>
</head>
<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>
</html>

🌟 이러한 폰트 크기 상속, 기준 요소를 거점으로 비율적으로 크기를 변경하는 특성으로 인해서

부모 요소의 크기는 px로 고정하고 그 이후는 상대적인 수치로 일괄 변경을 하고자 할 때 em이 사용된다!

🌻 단점 : 영향을 받는 요소 간 관계가 복잡해지거나, from top to bottom 순서로 진행되다가 중간의 특정 요소에 대해서만 크기를 별도 지정할 필요가 있는 경우에는 적용이 번거로워질 수 있음(관리면에서) ▶️ rem 단위가 이를 해결해줄 수 있다!!

rem 단위 : 중간 단계는 다 건너뛰고, 최종 조상 요소를 기준으로 상대적인 크기 수치를 정할 수 있도록 하는 단위

-html에 지정된 폰트 사이즈의 영향만을 받음!

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 10px;
        }

        body * {
            /*body 내부의 모든 요소들(=body의 후손들)에 대해서 적용*/
            border: 2px solid;
        }

        .container {
            width: 60rem;/*60 * 10 = 600px*/
            font-size: 5rem;/*5*10px=50px*/
        }

        .parent {
            width: 20rem;/*20 * 10 = 200px*/
            font-size: 2rem;/*2*10px=20px*/
        }

        .child {
            width: 10rem;/*10 * 10 = 100px*/
            font-size: 1rem;/*1*10px=10px*/
        }
    </style>
</head>

<body>
    <div class="container">
        Container
        <div class="parent">
            Parent
            <div class="child">Child1</div>
            <div class="child">Child2</div>
        </div>
    </div>
</body>

</html>

CSS 단위- rem

-위에서 처럼, html 내부에 대해서 font-size를 지정한 후, rem 단위를 적용하게 된다면

(1) container의 width=60 rem = 60 * 1rem(=10px) ←(1rem =10px) = 600px font-size = 5 rem = 5 * 10px =50px

(2) parent 요소 width = 20 rem = 20 * 10px = 200 px

font-size= 2 rem = 2 * 10px = 20px

(3) child 요소

width = 10 rem= 10 * 10px= 100px

font-size = 1 rem = 10px

로 적용될 수 있게 된다!

🌟 rem의 장점- 중간에 body 요소의 font 크기에는 영향을 주고 싶지 않다!

-그러면 위에서 font-size를 rem으로 해두었는데 이를 px이나 em 단위로 이용해보고

-다시 font-size 속성을 밑에 처럼 body 요소나, 특정 요소에서

body{
	font-size: 16px;
}

로 덮어써주면 rem에 영향을 주지 않고 폰트만 크기 지정, 사용이 가능하다

vw와 vh

viewport의 너비, 높이를 기준으로 상대적인 너비, 높이를 지정
viewport : html, css, js를 이용해서 출력되는 페이지 전체 화면을 의미
백분율을 이용해서 표현 가능! 따라서 , 절반을 이용하려면 50vw 처럼 사용 !!

범위는 [0,100] !!

CSS 단위- vw, vh

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .container{
            width: 50vw;
            height: 100vh;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

위와 같은 경우, container의 너비는 뷰포트의 절반, 높이는 100vh로 뷰포터 전체 높이만큼을 사용하게 된다!

🌟 뷰포터 크기가 변경되면 변경됨에 따라서 유동적으로 변경됨을 확인해볼 수 있다!

vmin과 vmax

뷰포트의 크기(뷰포트의 너비, 높이) 중 최소크기 혹은 최대크기를 기준으로 크기를 설정

먼저 vmax부터 접근해보자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .container{
            width: 50vmax;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

CSS단위-vmax

위와 같이, width를 vmax를 이용하게 되면, 뷰포트 너비를 변화시키면서 확인해볼 경우, 1) 가로 > 세로 ➡️ vmax는 가로를 기준으로 비율로 계산됨

2) 가로 < 세로 ➡️ vmax는 세로를 기준으로 비율로 계산됨

을 확인해볼 수 있다!

그 다음은 vmin을 확인해보자!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .container{
            width: 50vmin;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

CSS단위- vmin

위와 같이, width를 vmin을 이용하게 되면, 뷰포트 너비를 변화시키면서 확인해볼 경우, 1) 가로 > 세로 ➡️ vmin은 세로를 기준으로 비율로 계산됨

2) 가로 < 세로 ➡️ vmin은 가로를 기준으로 비율로 계산됨

을 확인해볼 수 있다!

Twitter Facebook LinkedIn

J. S. Jeong

14_[css]css 단위

CSS-단위

You May Also Enjoy

1_[spring]rest api 구축에 힘을 실어주는 hateoas

2_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하는 경우

1_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하지 않는 경우

2_[spring]websockethandler를 이용한 웹소켓 서버 구현