12. HTML 색상

HTML 색상은 미리 정의 된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.

색상 이름

HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.

배경색

HTML 요소의 배경색을 설정할 수 있습니다.

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>

텍스트 색상

텍스트 색상을 설정할 수 있습니다.

Hello world

Lorem ipsum dolle 앉아 amet, consipetuer adipiscing elit, sed diam 딱정벌레, 노랑, 흰색, 미소, 미소,

그런 다음, 최소한의 노력으로 운동을 시작하십시오.

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

테두리 색

테두리 색상을 설정할 수 있습니다.

<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 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있습니다.

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB 값

HTML에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있습니다.

rgb ( 빨강, 초록 , 파랑 )

각 매개 변수 (빨강, 녹색 및 파랑)는 0에서 255 사이의 색상 강도를 정의합니다.

예를 들어, 빨간색은 가장 높은 값 (255)으로 설정되고 다른 값은 0으로 설정되므로 rgb (255, 0, 0)는 빨간색으로 표시됩니다.

색상을 검정색으로 표시하려면 모든 색상 매개 변수를 다음과 같이 0으로 설정해야합니다. rgb (0, 0, 0).

흰색을 표시하려면 모든 색상 매개 변수를 다음과 같이 255로 설정해야합니다. rgb (255, 255, 255).

아래의 RGB 값을 혼합하여 실험 해보십시오.

16 진수 값

HTML에서는 다음 형식의 16 진수 값을 사용하여 색상을 지정할 수 있습니다.

# rrggbb

rr (빨강), gg (녹색) 및 bb (파랑)는 00에서 ff 사이의 16 진수 값입니다 (십진수 0-255와 동일).

예를 들어, 빨간색은 가장 높은 값 (ff)으로 설정되고 다른 값은 가장 낮은 값 (00)으로 설정되기 때문에 #ff0000은 빨간색으로 표시됩니다.

HSL 가치

HTML에서는 색상, 채도 및 명도 (HSL)를 사용하여 다음과 같은 형식으로 색상을 지정할 수 있습니다.

hsl ( 색조 , 채도 , 명도 )

색조는 0에서 360까지의 색상환에 대한 정도입니다. 0은 빨간색이고 120은 녹색이며 240은 파란색입니다.

채도는 백분율 값이고, 0 %는 회색 음영을 나타내며 100 %는 풀 컬러입니다.

밝기도 백분율, 0 %는 검은 색, 50 %는 밝거나 어두움, 100 %는 흰색입니다.

포화

채도는 색상의 강도로 설명 할 수 있습니다.

100 % 순수한 색상, 회색 음영 없음

50 %는 50 % 회색이지만 여전히 색상을 볼 수 있습니다.

0 %가 완전히 회색이면 더 이상 색상을 볼 수 없습니다.

가벼움

밝기는 색상을 얼마만큼 나타낼 것인지 명시 할 수 있습니다. 0 %는 빛이 없음을 의미하고 50 %는 50 % 빛을 의미합니다 (어두운 것도 밝은 것도 없음). 100 %는 완전한 밝기 (흰색)를 의미합니다.

RGBA 값

RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 RGB 색상 값의 확장입니다.

RGBA 색상 값은 다음과 같이 지정됩니다.

rgba ( 빨강, 초록 , 파랑, 알파 )

알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.

HSLA 가치

HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 HSL 색상 값의 확장입니다.

HSLA 색상 값은 다음과 같이 지정됩니다.

hsla ( 색조, 채도 , 밝기, 알파 )

알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.