CSS3 단위

미어캣의 개발일지·2022년 11월 21일

목록 보기

3/13

📖CSS 단위

📃크기 단위

단위	설명
%	백분율 단위
em	배수 단위
px	픽셀

CSS3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px 주로 위의 표의 단위를 사용함

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Style Property Basic</title>
    <style>
        p:nth-child(1) { }
        p:nth-child(2) { font-size: 100%;}
        p:nth-child(3) { font-size: 150%;}
        p:nth-child(4) { font-size: 200%;}

        p:nth-child(1) { }
        p:nth-child(2) { font-size: 1.0em;}
        p:nth-child(3) { font-size: 1.5em;}
        p:nth-child(4) { font-size: 2.0em;}

        p:nth-child(1) { }
        p:nth-child(2) { font-size: 16px;}
        p:nth-child(3) { font-size: 24px;}
        p:nth-child(4) { font-size: 32px;}
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

출력

- 퍼센트 단위

퍼센트 단위는 기본 설정된 크기에서 상대적으로 키기를 지정
100%가 초기에 설정된 크기

		p:nth-child(1) { }
        p:nth-child(2) { font-size: 100%;}
        p:nth-child(3) { font-size: 150%;}
        p:nth-child(4) { font-size: 200%;}

- 배수 단위

em 단위는 배수를 나타내는 단위 1배=1em=100% 1.5배=1.5em=150% 이다

p:nth-child(1) { }
        p:nth-child(2) { font-size: 1.0em;}
        p:nth-child(3) { font-size: 1.5em;}
        p:nth-child(4) { font-size: 2.0em;}

- 픽셀 단위

절대적으로 크기를 지정할 때는 px 단위 사용

p:nth-child(1) { }
        p:nth-child(2) { font-size: 16px;}
        p:nth-child(3) { font-size: 24px;}
        p:nth-child(4) { font-size: 32px;}

추가예정 - rem, vh, vw, vmin, vmax, ex, ch

📃색상 단위

단위형태	설명
#000000	HEX 코드 단위
rgb(red, green, blue)	RGB 색상 단위
rgba(red, green, blue, alpha)	RGBA 색상 단위
hsl(hue, saturation, lightness)	HSL 색상 단위
hsla(hue, saturation, lightness, alpha)	HSLA 색상 단위

A는 투명도를 의미하는 알파 값
알파값은 0.0 부터 1.0사이의 숫자를 입력
0.0은 완전 투명, 1.0은 불투명

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        h1 { background-color: rgb(255, 255, 255); }
        h2 { background-color: #0094FF;}
        h3 { background-color: hsl(33, 100%, 50%);}
        h4 { background-color: red;}
    </style>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
</body>
</html>

출력

📃URL 단위

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
      		/* 현재 폴더 내부에 있는 img폴더의 CSS.jpg */
            background-image: url('img/CSS.jpg');
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>