728x90
반응형
색상값주기는 텍스트, 배경, 라인 등 줄 수 있는데요
텍스트에 색상값으로 CSS를 이용하여 아래와 같이 설정해보아요~
<!DOCTYPE html>
<html>
<head>
<style>
.redtxt { color: red;}
.bluetxt {color: blue;}
</style>
</head>
<body>
<p class="redtxt">안녕하세요 ^^</p>
<p class="bluetxt">저는 파란색을 좋아해요</p>
</body>
</html>class="클래스명"
class 에 들어가는 클래스명은 본인이 알아보기 쉽고 중복되지 않는 것으로 사용해요~~
예) text color red 이니까 txt_c_r 이런식으로 쓰거나 다양하게 사용가능
class가 아니 인스타일로 주는 방식
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:red;">안녕하세요 ^^</p>
<p style="color:blue;">저는 파란색을 좋아해요</p>
</body>
</html>
색상값 넣을때 숫자값을 몰라도 예를 들어 #223344 이런식으로 숫자값으로도 줄수 있지만
간단하게 본인이 알고 있는 영어컬러명 orang, red, blue, yellow 등으로 쉽게 줄수도 있어요~~
CSS Color Names
위와 같이 컬러명으로도 다양한 색상이 표현가능해요~
CSS RGB Colors
rgb(red, green, blue)
3가지 값을 조정하여 색상값을 주는 방식이예요~~
<!DOCTYPE html>
<html>
<body>
<h1>CSS RGB Colors</h1>
</p>
<h2 style="color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
<h2 style="color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>CSS HEX Colors
rr (red), gg (green) bb (blue)
#rrggbb
<!DOCTYPE html>
<html>
<body>
<h1>CSS HEX Colors</h1>
<p>숫자값에 따라 색의 차이가 느껴집니다.</p>
<h2 style="color:#fff;">#fff</h2>
<h2 style="bcolor:#000c;">#000</h2>
<h2 style="color:#3c3c3c;">#3c3c3c</h2>
<h2 style="color:#616161;">#616161</h2>
<h2 style="color:#787878;">#787878</h2>
<h2 style="color:#b4b4b4;">#b4b4b4</h2>
<h2 style="color:#f0f0f0;">#f0f0f0</h2>
<h2 style="color:#f9f9f9;">#f9f9f9</h2>
<h2 style="color:#ff0000;">#ff0000</h2>
<h2 style="color:#0000ff;">#0000ff</h2>
<h2 style="color:#3cb371;">#3cb371</h2>
<h2 style="color:#ee82ee;">#ee82ee</h2>
<h2 style="color:#ffa500;">#ffa500</h2>
<h2 style="color:#6a5acd;">#6a5acd</h2>
</body>
</html>CSS HSL Colors
hsl(hue, saturation, lightness)
hue(색상) --> 0 에서 360 / saturation(채도) --> 0%에서 100% / lightness(명도)--> 0%에서 100%
<!DOCTYPE html>
<html>
<body>
<h1>CSS HSL Colors</h1>
<p>hue(색상) --> 0 에서 360 / saturation(채도) --> 0%에서 100% / lightness(명도)--> 0%에서 100%</p>
<h2 style="color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
<h2 style="color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>728x90
반응형
'웹디자인,퍼브리싱 > CSS' 카테고리의 다른 글
| CSS - font 서체 Sans-serif Fonts와 Serif Fonts 의 차이 (0) | 2022.11.27 |
|---|---|
| css - 백그라운드에 이미지 넣기 / 백그라운드에 이미지 패턴으로 background-image/background-repeat /background-position (0) | 2022.11.27 |
| css - 백그라운드에 색상주기 (0) | 2022.11.27 |
| CSS - select박스 화살표 없애기 / 셀렉트박스 화살표꾸미기 (0) | 2021.07.02 |
