CSS - 단위 : 길이와 폰트 크기를 이해하자 (in, cm, mm, pt, pc, em, ex, px)

2025. 3. 20. 16:34

CSS에서 요소의 크기나 폰트 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. 이 단위들은 각각 다른 특징을 가지고 있으며, 상황에 맞게 적절히 사용해야 합니다. 이 글에서는 절대 단위(in, cm, mm, pt, pc)와 상대 단위(em, ex, px)에 대해 쉽게 설명하고, 예시 코드를 통해 실제로 어떻게 사용되는지 알아보겠습니다.

CSS에서 사용하는 길이와 폰트 단위

CSS에서 사용하는 길이와 폰트 단위

1. 절대 단위: in, cm, mm, pt, pc

2. 상대 단위: em, ex, px

3. 절대 단위와 상대 단위의 차이점

4. 예시 HTML 코드

5. 결론

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

절대 단위: in, cm, mm, pt, pc

절대 단위는 실제 물리적인 크기를 기준으로 하는 단위입니다. 주로 인쇄물이나 특정 디바이스에서 정확한 크기를 지정할 때 사용됩니다.

절대 단위의 특징

in (인치): 1인치는 2.54cm입니다. 주로 미국에서 사용됩니다.
cm (센티미터): 1cm는 10mm입니다. 국제적으로 널리 사용됩니다.
mm (밀리미터): 1mm는 0.1cm입니다. 매우 작은 단위로 정밀한 크기 지정에 사용됩니다.
pt (포인트): 1pt는 1/72인치입니다. 주로 폰트 크기를 지정할 때 사용됩니다.
pc (파이카): 1pc는 12pt입니다. 주로 인쇄물에서 사용됩니다.

절대 단위 예시

<div style="width: 2in; height: 1cm; padding: 5mm; font-size: 12pt; background-color: lightblue;">
    이 박스는 절대 단위로 크기가 지정되었습니다.
</div>

상대 단위: em, ex, px

상대 단위는 다른 요소나 환경에 따라 크기가 변할 수 있는 단위입니다. 주로 웹 페이지에서 유연한 디자인을 구현할 때 사용됩니다.

상대 단위의 특징

em: 현재 폰트 크기를 기준으로 합니다. 예를 들어, 현재 폰트 크기가 16px일 때 1em은 16px입니다.
ex: 현재 폰트의 x-높이를 기준으로 합니다. x-높이는 소문자 'x'의 높이를 의미합니다.
px (픽셀): 화면의 픽셀을 기준으로 합니다. 1px은 화면의 한 픽셀을 의미합니다.

상대 단위 예시

<p style="font-size: 16px;">
    이 문장의 폰트 크기는 16px입니다. <span style="font-size: 1em;">1em은 16px입니다.</span>
</p>
<p style="font-size: 20px;">
    이 문장의 폰트 크기는 20px입니다. <span style="font-size: 1em;">1em은 20px입니다.</span>
</p>
<p style="font-size: 16px;">
    이 문장의 폰트 크기는 16px입니다. <span style="font-size: 1ex;">1ex는 현재 폰트의 x-높이입니다.</span>
</p>
<p style="font-size: 16px;">
    이 문장의 폰트 크기는 16px입니다. <span style="font-size: 20px;">20px는 절대 크기입니다.</span>
</p>

절대 단위와 상대 단위의 차이점

특징	절대단위(in, cm, mm, pt, pc)	상대 단위(em, ex, px)
기준	물리적인 크기	다른 요소나 환경에 따라 변함
사용처	인쇄물, 특정 디바이스	웹 페이지, 유연한 디자인
예시	1in = 2.54cm, 1cm = 10mm	1em = 현재 폰트 크기, 1px = 한 픽셀

예시 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="CSS 단위의 종류와 사용법을 쉽게 이해할 수 있는 예시입니다.">
    <title>CSS 단위 이해하기</title>
    <style>
        /* 절대 단위 스타일 */
        .absolute-unit {
            width: 2in; /* 너비: 2인치 */
            height: 1cm; /* 높이: 1센티미터 */
            padding: 5mm; /* 패딩: 5밀리미터 */
            font-size: 12pt; /* 폰트 크기: 12포인트 */
            background-color: lightblue; /* 배경색 */
        }

        /* 상대 단위 스타일 */
        .relative-unit {
            font-size: 16px; /* 폰트 크기: 16픽셀 */
        }

        .em-unit {
            font-size: 1em; /* 1em = 현재 폰트 크기 */
        }

        .ex-unit {
            font-size: 1ex; /* 1ex = 현재 폰트의 x-높이 */
        }

        .px-unit {
            font-size: 20px; /* 20픽셀 */
        }
    </style>
</head>
<body>
    <h1>CSS 단위 이해하기</h1>
    
    <!-- 절대 단위 예시 -->
    <h2>절대 단위: in, cm, mm, pt, pc</h2>
    <div class="absolute-unit">
        이 박스는 절대 단위로 크기가 지정되었습니다.
    </div>

    <!-- 상대 단위 예시 -->
    <h2>상대 단위: em, ex, px</h2>
    <p class="relative-unit">
        이 문장의 폰트 크기는 16px입니다. <span class="em-unit">1em은 16px입니다.</span>
    </p>
    <p class="relative-unit">
        이 문장의 폰트 크기는 16px입니다. <span class="ex-unit">1ex는 현재 폰트의 x-높이입니다.</span>
    </p>
    <p class="relative-unit">
        이 문장의 폰트 크기는 16px입니다. <span class="px-unit">20px는 절대 크기입니다.</span>
    </p>

    <!-- 추가 설명 -->
    <p>
        절대 단위는 물리적인 크기를 기준으로 하며, 상대 단위는 다른 요소나 환경에 따라 크기가 변할 수 있습니다. 상황에 맞게 적절한 단위를 선택하여 사용하세요.
    </p>
</body>
</html>

결론

CSS 단위는 웹 디자인의 기본 개념입니다. 절대 단위는 물리적인 크기를 기준으로 하며, 상대 단위는 다른 요소나 환경에 따라 크기가 변할 수 있습니다.

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 자바스크립트 배열(Array) 모든 문법 사용법 (0)	2025.03.21
HTML - display(인라인, 인라인블록, 블록) 개념 이해하기 (0)	2025.03.20
HTML - Box 모델 (블록박스, 인라인박스) 웹디자인 기본 개념 (0)	2025.03.20
CSS - 스타일이 잘 안 먹힐 때 구체성 때문이다 (0)	2025.03.19
CSS - 속성 선택자(Selector) 7가지 사용방법 (0)	2025.03.19

열공의 기록