코드:
결과보기 »
<!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, 0%, 50%);} #header_02 {background-color: hsl(0, 20%, 50%);} #header_03 {background-color: hsl(0, 40%, 50%);} #header_04 {background-color: hsl(0, 60%, 50%);} #header_05 {background-color: hsl(0, 80%, 50%);} #header_06 {background-color: hsl(0, 100%, 50%);} </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 색상값에서 채도 값을 변경 : 채도 60%</h1> <h1 id="header_05">HSL 색상값에서 채도 값을 변경 : 채도 80%</h1> <h1 id="header_06">HSL 색상값에서 채도 값을 변경 : 채도 100%</h1> </body> </html>
