7. HTML 색상
HTML 색상
: HTML 색상은 미리 정의 된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.
-색상이름
: HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.
HTML은 140개의 표준 색상 이름을 지원합니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomoto</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">Dodgerblue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</html>
실행결과
-텍스트 색상
: 텍스트 색상을 설정할 수 있습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
</html>
실행결과
-테두리 색
: 테두리 색상을 설정할 수 있습니다.
border를 사용하여 정의할 수 있습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
</html>
실행결과
-RGB 값
: HTML에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있습니다.
-> rgb (빨강, 초록, 파랑)
각 매개 변소 (빨강, 녹색 및 파랑)는 0에서 255사이의 색상 강도를 정의합니다.
예를 들어, 빨간색은 가장 높은 값 (255)으로 설정되고 다른 값은 0으로 설정되므로 rgb (255, 0, 0) 는 빨간색으로 표시됩니다.
색상을 검정색으로 표시하려면 모든 색상 매개 변수를 다음과 같이 0으로 설정해야 합니다
-> rgb (0, 0, 0)
흰색을 표시하려면 모든 색상 매개 변수를 다음과 같이 255로 설정해야 합니다.
-> rgb (255, 255, 255)
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1><h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</html>
실행결과
-16진수 값
: rr (빨강), gg (녹색) 및 bb (파랑) 은 00에서 ff 사이의 16진수 값입니다 (십진수 0-255와 동일).
예를 들어 빨간색은 가장 높은 값 (ff) 으로 설정되고 다른 값은 가장 낮은 값 (00) 으로 설정되므로 #ff0000은 빨간색으로 표시됩니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1><h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</html>
실행결과
- HSL Value
: hsl ( 색조, 채도, 명도 )
색상은 0에서 360까지의 색 상환에 대한 정도입니다.
0은 빨간색이고 120은 녹색이며 240은 파란색입니다.
채도는 백분율 값이고, 0%는 회색 음영을 나타내며 100%는 풀 컬러입니다.
밝기도 백분율 0%는 검은색, 5%는 밝거나 어두움, 100%는 흰색입니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1><h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
</html>
-Saturation(포화)
: 채도는 색상의 강도로 설명 할 수 있습니다.
100%는 순수한 색상, 회색 음영 없음
50%는 50%회색이지만 색상을 볼 수 있습니다.
0%는 완전히 회색이라서 더 이상 색상을 볼 수 없습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1><h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
</html>
실행 결과
- RGBA 값
: RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다.
rgba ( 빨강, 초록, 파랑, 알파)
알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1><h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</html>
실행 결과
- HSLA Value
: HSLA 색상 값은 색상의 불투명도는 지정하는 알파 채널이 있는 HSL 색상 값의 확장입니다.
hsla (색조, 채도, 발기, 알파)
알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.