[CSS] CSS3 단위

Front-End/CSS

[CSS] CSS3 단위

09009 2023. 4. 9. 19:12

스타일 속성을 적용하기 위해서 우선 스타일 값으로 입력할 수 있는 CSS3 단위를 알아야 한다.

스타일 값으로 입력할 수 있는 단위: 키워드, 크기, 색상, URL

키워드 단위

키워드를 스타일 값으로 입력하면 키워드에 해당하는 스타일이 자동으로 적용됨

크기 단위

종류: %, cm, em, mm, inch, px 등

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

다양한 크기의 단위 적용하기

1) HTML 페이지 생성

<!DOCTYPE html>
<html lang="en">
<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>
        
    </style>
</head>
<body>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    
</body>
</html>

아직 크기 단위를 적용하지 않았으므로, 본문 글자 크기는 모두 동일하게 나타난다.

2) % 단위 적용하기

style 태그 안에 아래와 같이 입력한다.

% 단위는 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정한다.

아래의 경우, 100%가 초기에 설정된 크기이다.

<!DOCTYPE html>
<html lang="en">
<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>
        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%; }
    </style>
</head>
<body>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
</body>
</html>

3) em 단위 적용하기

em : 배수를 나타내는 단위

1배 = 1em = 100%

1.5배 = 1.5em = 150%

<!DOCTYPE html>
<html lang="en">
<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>
        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.0pm; }
    </style>
</head>
<body>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
</body>
</html>

4) px 단위 적용하기

%, em은 상대적으로 크기를 지정한다

하지만, px은 크기를 절대적으로 지정한다.

    <style>
        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>

p 태그의 기본 font-size 속성이 16px이므로 실행 결과는 위와 같게 나온다.

색상 단위

영단어로 표현할 수 있는 색상은 제한되어 있으므로 CSS3에서는 색상을 더 다양하게 표현할 수 있게 색상 단위를 제공한다.

색상 단위의 종류

1) RGB 색상

형태 : rgb(red, green, blue)

빨간색, 초록색, 파란색을 조합하여 색상을 표현한다. 0과 255사이의 수를 입력한다.

2) RGBA 색상

형태 : rgb(red, green, blue, alpha)

alpha 값은 투명도를 나타낸다. 0 ~ 1사이의 수를 입력하는데 0.0은 완전 투명 상태, 1.0은 완전 불투명 상태이다.

3) HEX 코드

형태: #000000

RGB 색상 조합을 위의 형태와 같이 16진수로 입력한다.

URL 단위

이미지나 글꼴 파일을 불러올 때 사용한다.

background-image 속성을 사용하면 배경 이미지를 지정할 수 있다. url('경로') 형태로 URL 단위를 입력한다.

<!DOCTYPE html>
<html lang="en">
<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 {
            background-image: url('son.jpg');
        }
    </style>
</head>
<body>
    <p>손흥민 선수, EPL 100호골 축하드립니다.</p>
</body>
</html>

이미지 위치에 따라 URL 경로를 아래 코드와 같이 입력하여 파일에 접근한다.