CSS - 속성값의 단위

김석환·2020년 10월 12일

CSS

목록 보기

3/18

CSS 속성에는 키워드 , 크기단위 , 색상 단위 등의 특정 단위를 갖는 값을 지정한다.

1.키워드

속성에 따라 사용할 수 있는 키워드가 존재한다. 예를들어 display 속성의 값으로 사용할 수 있는 키워드는 block , inline , inline-block 이 있다.
이 외에도 많은 키워드들이 있지만 나열하기에 너무 많으므로 자주쓰거나 필요에 따라 찾아보며 사용하는것이 추천된다.

2.크기 단위

CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.
px는 절대값이고 em, %는 상대값이다.
대부분 브라우저의 폰트 사이즈 기본값은 16px , 1em, 100%이다.

2.1 px

px(픽셀)단위는 화소 1개의 크기를 의미한다.
이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식한다.
px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            font-size: 14px;
        }
        span{
            font-size: 1em;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        Font size : 14px;
    </div>
    <span>
        Font size : 16px;
    </span>
</body>
</html>

2.2 %

%는 백분율 단위의 상대단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            font-size: 150%;

        }
        span{
            font-size: 1em;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        Font size : 16px * 150% = 24px;
    </div>
    <span>
        Font size : 16px;
    </span>
</body>
</html>

2.3 em

em은 배수 단위로 상대 단위이다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적인 사이즈를 설정한다. 예로 1em은 요소에 지정된 사이즈와 동일하고 1.5em은 요소에 지정된 사이즈에 1.5배이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-size: 14px;
            text-align: center;
        }
        div {
            font-size: 1.2em;
            /* 14px * 1.2 = 16.8px */
            font-weight: bold;
            padding: 2em;
            /* 16.8px * 2 = 33.6px */
            background-color: rgba(255, 0, 0, 0.2);
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        Font size : 16px * 150% = 24px;
    </div>
    <span>
        Font size : 16px;
    </span>
</body>
</html>