🐧글자색 관련 스타일 속성
📌color : 글자색 관련 스타일 속성
◈ 속성값 : 색 관련 키워드 - red, green, blue 등
🌠속성값 : 색 관련 키워드 - red, green, blue 등
.color1 { color: red; }
🌠속성값 : 색에 대한 16진수 표기법 - #RGB 또는 #RRGGBB 등
.color2 { color: #00FF00}
🌠속성값 : rgb 함수를 사용하여 색 표현 - rgb(RED:0~255,GREEN:0~255,BLUE:0~255)
.color3 { color: rgb(0, 0, 255);}
🌠속성값 : hsl 함수를 사용하여 색 표현 - hsl(색상:0~360,채도:0~100%,명도:0~100%)
.color4 { color: hsl(200, 100%, 50%);}
🌠속성값 : rgba 함수를 사용하여 색 표현 - rgb(RED:0~255,GREEN:0~255,BLUE:0~255,투명도:0.0(투명)~1.0(불투명))
.color5 { color: rgba(0, 0, 255, 0.5);}
🌠속성값 : hsl 함수를 사용하여 색 표현 - hsl(색상:0~360,채도:0~100%,명도:0~100%투명도:0.0(투명)~1.0(불투명))
.color6 { color: hsl(200, 100%, 50%, .5);}
📃16_color.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> div { margin: 20px; font-size: 24px; font-weight: bold; } /* color : 글자색 관련 스타일 속성 */ /* 속성값 : 색 관련 키워드 - red, green, blue 등 */ .color1 { color: red; } /* 속성값 : 색에 대한 16진수 표기법 - #RGB 또는 #RRGGBB 등 */ .color2 { color: #00FF00} /* 속성값 : rgb 함수를 사용하여 색 표현 - rgb(RED:0~255,GREEN:0~255,BLUE:0~255) */ .color3 { color: rgb(0, 0, 255);} /* 속성값 : hsl 함수를 사용하여 색 표현 - hsl(색상:0~360,채도:0~100%,명도:0~100%) */ .color4 { color: hsl(200, 100%, 50%);} /* 속성값 : rgba 함수를 사용하여 색 표현 - rgb(RED:0~255,GREEN:0~255,BLUE:0~255,투명도:0.0(투명)~1.0(불투명)) */ .color5 { color: rgba(0, 0, 255, 0.5);} /* 속성값 : hslㅁ 함수를 사용하여 색 표현 - hsl(색상:0~360,채도:0~100%,명도:0~100%투명도:0.0(투명)~1.0(불투명)) */ .color6 { color: hsl(200, 100%, 50%, .5);} </style> </head> <body> <h1>글자색 관련 스타일 속성</h1> <hr> <div class="color1">글자색 관련 스타일 속성을 배우고 있습니다.</div> <div class="color2">글자색 관련 스타일 속성을 배우고 있습니다.</div> <div class="color3">글자색 관련 스타일 속성을 배우고 있습니다.</div> <div class="color4">글자색 관련 스타일 속성을 배우고 있습니다.</div> <div class="color5">글자색 관련 스타일 속성을 배우고 있습니다.</div> <div class="color6">글자색 관련 스타일 속성을 배우고 있습니다.</div> </body> </html>
