• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Colors</title>
7
    <style>
8
        body {
9
            background-image: url("/examples/images/img_check_pattern.png");
10
            color: white;
11
        }
12
        #header_01 {background-color: hsl(0, 100%, 0%);}
13
        #header_02 {background-color: hsl(0, 100%, 20%);}
14
        #header_03 {background-color: hsl(0, 100%, 40%);}
15
        #header_04 {background-color: hsl(0, 100%, 50%);}
16
        #header_05 {background-color: hsl(0, 100%, 60%);}
17
        #header_06 {background-color: hsl(0, 100%, 80%);}
18
        #header_07 {background-color: hsl(0, 100%, 100%);}
19
    </style>
20
</head>
21
​
22
<body>
23
​
24
    <h1 id="header_01">HSL 색상값에서 명도 값을 변경 : 명도 0%</h1>
25
    <h1 id="header_02">HSL 색상값에서 명도 값을 변경 : 명도 20%</h1>
26
    <h1 id="header_03">HSL 색상값에서 명도 값을 변경 : 명도 40%</h1>
27
    <h1 id="header_04">HSL 색상값에서 명도 값을 변경 : 명도 50%</h1>
28
    <h1 id="header_05">HSL 색상값에서 명도 값을 변경 : 명도 60%</h1>
29
    <h1 id="header_06">HSL 색상값에서 명도 값을 변경 : 명도 80%</h1>
30
    <h1 id="header_07">HSL 색상값에서 명도 값을 변경 : 명도 100%</h1>
31
​
32
</body>
33
​
34
</html>