Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

데브마우스

[CSS] CSS의 단위 정리 본문

CSS/CSS: 정리

[CSS] CSS의 단위 정리

데브마우스 2023. 12. 15. 09:08

CSS의 단위

현실 세계에서는 cm, m, inch 등 다양한 단위가 있습니다. 그리고 단위에는 이것을 기준으로 1cm라고 한다는 등 기준이 있습니다. 그렇다면 CSS에서는 어떤 단위가 있으며 어떻게 기준을 잡을까요?

 

CSS에는 총 4가지 기준이 있습니다.

  • px(픽셀)
  • %
  • em,rem
  • vw,vh

px(Pixel, 픽셀)

픽셀은 고정된 사이즈를 의미합니다.

반응형이 아니며 사용자가 웹 브라우저의 크기를 줄이거나 늘려도 크기를 그대로 유지합니다.

<!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 rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <p>
            This is parent div
        </p>
        <div class="child">
            <p>
                This is child div
            </p>
        </div>
    </div>
</body>
</html>
/* style.css */
.parent {
    height: 200px;
    width: 300px;
    border: 1px solid red;
}

.child{
    height: 400px;
    width: 600px;
    border: 1px solid blue;
}

%(퍼센트)

%는 부모의 크기로 부터 %로 계산된 값 만큼 크기를 가집니다.

/* style.css */
.parent {
    height: 200px;
    width: 300px;
    border: 1px solid red;
}

.child{
    height: 200%;
    width: 200%;
    border: 1px solid blue;
}

em과 rem(root em)

em과 rem안 다른 속성으로 부터 영향을 받아서 크기를 지정합니다.

em은 부모 요소의 텍스트 크기로 부터 기준 크기를 받습니다.

만약 부모 요소의 텍스트 크기가 20px이고 자식 요소가 1em이라 작성한다면, 이 경우에서 1em의 값은 20px과 같습니다.

 

rem은 root em의 약자로써 HTML의 문서root인, html 클래스로 부터 텍스트 크기를 상속 받아서 크기를 지정합니다.

 

 

아래는 em과 rem을 확인하기 위한 예제 코드입니다.

<!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 rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <p>
            This is parent div
        </p>
        <div class="child">
            <p>
                This is child div
            </p>
        </div>
    </div>
    <br><br><br><br><br><br>
    <div class="rem_example">
        <p>This is rem example</p>
    </div>
</body>
</html>
/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html {
    font-size: 40px
}

.parent {
    font-size: 20px;
    height: 100px;
    width: 100px;
}

.parent p {
    width: 1em;
    height: 1em;

    border:1px solid red;
}

.child{
    height: 200%;
    width: 200%;
    border: 1px solid blue;
}

.rem_example {
    width: 1rem;
    height: 1rem;

    border: 1px solid green;
}

 

 

vw(Viewport Width)와 vh(Viewport Height)

vw와 vh는 브라우저의 크기가 변경되는, 반응형 환경에서 사용하기 위한 단위입니다. vw와 vh는 보이는 화면의 %를 의미합니다. 

 

아래는 vw와 vh를 활용한 예제 코드입니다.

<!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 rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <p>
            This is parent div
        </p>
        <div class="child">
            <p>
                This is child div
            </p>
        </div>
    </div>
    <br><br><br><br><br><br>
    <div class="rem_example">
        <p>This is rem example</p>
    </div>
</body>
</html>
/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

.parent {
    font-size: 20px;
    height: 100px;
    width: 100px;
}

.parent > p {
    width: 10vw;
    height: 10vh;

    border:1px solid red;
}

.child{
    height: 200%;
    width: 200%;
    border: 1px solid blue;
}

CSS 단위 정리 테이블

분류 px % em,rem vh,vw
사이즈 분류 고정 동적 동적 동적
필수 조건 없음 없음 없음 HTML의 <head>에서 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 필수
사이즈 기준 고정적 크기 부모 요소의 크기를 기준으로 크기 결정 em: 부모 요소의 font-size의 값을 기준으로 삼습니다.
rem: HTML { font-size:16px;} 처럼 HTML 안의 font-size의 값을 기준으로 합니다.		 현재 보이는 화면의 해상도를 기준으로 사이즈를 결정합니다.

 

'CSS > CSS: 정리' 카테고리의 다른 글

[CSS]선택자 정리  (0) 2023.12.28
[CSS]CSS 상속 정리  (0) 2023.12.14
[CSS]CSS 개요 정리  (0) 2023.12.12
'CSS/CSS: 정리' Related Articles more