코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Colors</title> <style> body { background-image: url("/examples/images/img_check_pattern.png"); color: white; } #header_01 {background-color: hsl(0, 100%, 0%);} #header_02 {background-color: hsl(0, 100%, 20%);} #header_03 {background-color: hsl(0, 100%, 40%);} #header_04 {background-color: hsl(0, 100%, 50%);} #header_05 {background-color: hsl(0, 100%, 60%);} #header_06 {background-color: hsl(0, 100%, 80%);} #header_07 {background-color: hsl(0, 100%, 100%);} </style> </head> <body> <h1 id="header_01">HSL 색상값에서 명도 값을 변경 : 명도 0%</h1> <h1 id="header_02">HSL 색상값에서 명도 값을 변경 : 명도 20%</h1> <h1 id="header_03">HSL 색상값에서 명도 값을 변경 : 명도 40%</h1> <h1 id="header_04">HSL 색상값에서 명도 값을 변경 : 명도 50%</h1> <h1 id="header_05">HSL 색상값에서 명도 값을 변경 : 명도 60%</h1> <h1 id="header_06">HSL 색상값에서 명도 값을 변경 : 명도 80%</h1> <h1 id="header_07">HSL 색상값에서 명도 값을 변경 : 명도 100%</h1> </body> </html>
