1. 크기 단위
| 단위 | 설명 |
| % | 백분율 단위 |
| em | 배수 단위 (1em=100%, 1.5em=150%, ...) |
| px | 픽셀 |
<head>
<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>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
2. 색상 단위
| 단위 형태 | 설명 |
| red, orange, blue, green, brown, purple, ... | |
| #000000 | HEX 코드 단위 |
| rgb(red, green, blue) | RGB 색상 단위 |
| rgba(red, green, blue, alpha) | RGBA 색상 단위 |
| hsl(hue, saturation, lightness) | HSL 색상 단위 |
| hsla(hue, saturation, lightness, alpha) | HSLA 색상 단위 |
(alpha : 0.0을 입력할 경우 완전히 투명한 상태를 나타내고 1.0을 입력할 경우 불투명한 상태)
<head>
<style>
h1 { background-color: rgb(100, 200, 100); }
</style>
</head>
<body>
<h1>Header</h1>
</body>
3. URL 단위
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('cat.jpg');
}
</style>
</head>
<body>
<h1>URL Unit</h1>
<p>This is cat</p>
</body>
<html>
Reference
W3Schools : https://www.w3schools.com/
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] 스타일 속성 - 박스 속성 (0) | 2022.10.31 |
|---|---|
| [CSS] 스타일 속성 - 가시 속성 (0) | 2022.10.31 |
| [CSS] 선택자 (Selector) (0) | 2022.10.24 |
| [HTML] 입력 양식 태그 (0) | 2022.10.19 |
| [HTML] CodePen (0) | 2022.10.06 |
