동영상 강좌보기

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

색상이름(영문)

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

배경색

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

<h1 style="background-color:DodgerBlue;">안녕하세요?</h1>
<p style="background-color:Tomato;">어쩌구 저쩌구...</p>

텍스트 색상

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

<h1 style="color:Tomato;">안녕하세요?</h1>
<p style="color:DodgerBlue;">웹공부...</p>
<p style="color:MediumSeaGreen;">사이트공부...</p>

테두리(경계)색

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

<h1 style="border:2px solid Tomato;">안녕하세요?</h1>
<h1 style="border:2px solid DodgerBlue;">안녕하세요?</h1>
<h1 style="border:2px solid Violet;">안녕하세요?</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).

회색(gray)음영은 rgb 3개의 광원에 대해 동일한 값을 사용하여 정의됩니다.

HEX값

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

#rrggbb

rr(빨강), gg(초록), bb(파랑)는 00에서 ff사의 16진수 값입니다.(십진수 0~255와 동일).

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

HSL값

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

hsl(hue, saturation, lightness)

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

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

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

채도(Saturation)

채도는 색상의 강도라고 할 수 있습니다.

100% 순수한 색상, 회색 음영은 없습니다.

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

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

명도(Lightness)

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

회색 음영은 색조와 채도를 0으로 설정하고 밝기를 0%에서 100%사이를 조정하여 만듭니다.

RGBA값

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

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

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

HSLA값

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

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

hsla(hue, saturation, lightness, alpha)

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