[HTML 강좌] 13. HTML 색깔(Color) : background-color, color, border color

이번 포스팅에서는 HTML 문서에서 색(color)을 표현하는 방식인 background color, text color, border color에 대하여 알아봅니다.

색(Color) 표현 방식

HTML에서 색을 표현할때는 style 속성(attribute)의 property로 표현합니다.

색상을 표현할때는 미리 정의된 이름으로 색상을 표현하는 Color Names를 활용하는 방법과 RGB, HEX, HSL 세가지 색을 구성하는 방식으로 활용합니다.

Color Names

미리 정의된 색상의 이름을 Style에서 적용하여 표현합니다.

색상표는 아래 링크를 클릭하면 정의된 색상표를 확인할 수 있습니다.

HTML Color Names

HTML Color Names Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): Click here to see the 140

www.w3schools.com

rgb, rgba colors

RGB 는 Red, Green, Blue 세가지 색상을 혼합하여 색을 만드는 표현방식이며, RGBA라고 RGB에 투명도를 나타내는 Alpha chanel을 포함하여 색상을 표현할 수 있도록 확장하여 사용할 수 있습니다.

표현 방식은 rgb(Red, green, blue)이며 색상 수치는 0에서 255까지의 숫자로 표현합니다.

투명도를 추가한 rgba(Red, Green, blue, Alpha)로 표현되며 0에서 1 사이의 숫자로 표현합니다.

Alpha가 0인 경우 투명도가 100% 를 의미합니다.

<!DOCTYPE html>
<html>
<body>
    <!-- rgb 의 표현-->
    <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>
    <!-- rgba 투명도(Alpha channel) 추가-->
    <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>

</body>
</html>

hex colors

16진수에 해당되는 색으로 표현하며, 총 6자리의 숫자로 표현합니다.

표현 방식은 #RRGGBB로 표현되며, RR은 Red로 두자리 숫자, GG는 Green로 표현, BB는 Blue를 의미합니다.

RGB를 16 진수로 표현하므로, ff가 검은색이며, 00이 흰색입니다.

색상을 표현하는데 가장 많이 사용되는 방식입니다.

<!DOCTYPE html>
<html>
<body>
    <!-- rgb 의 표현-->
    <p>rgb 의 표현</p>
    <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>
    <!-- rgba 투명도(Alpha channel) 추가-->
    <p>rgba 투명도의 표현</p>
    <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>
    <!-- HEX-->
    <p>HEX</p>
    <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>
</body>
</html>

HSL, HSLA colors

HSL 은 3차원 공감개념의 색을 표현하는 방식으로 hue(색상), saturation(채도), lightness(명도)로 표현됩니다.

HSLA는 HSL에 투명도를 나타내는 Alpha channel 을 확장한 표현방식입니다.

hsl(hue, saturation, lightness), hsla(hue, saturation, lightness, alpha) 로 표현합니다.

<!DOCTYPE html>
<html>
<body>
    <!-- rgb 의 표현-->
    <p>rgb 의 표현</p>
    <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>
    <!-- rgba 투명도(Alpha channel) 추가-->
    <p>rgba 투명도의 표현</p>
    <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>
    <!-- HEX-->
    <p>HEX</p>
    <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>
    <!-- hsl 의 표현-->
    <p>hsl 의 표현</p>
    <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
    <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
    <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 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>
    <!-- hsla 의 표현-->
    <p>hsla 의 표현</p>
    <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
</body>
</html>

background-color property

background-color 은 배경색을 지정할때 사용하는 property입니다.

color property

color property는 컨텐츠의 색을 지정할때 사용하는 property입니다.

border color property

border color은 테두리의 색을 지정할때 사용하는 property입니다.

<!DOCTYPE html>
<html>
<body>
    <!-- Background Color-->    
    <h1 style="background-color:DodgerBlue;">백그라운드 색</h1>
    <p style="background-color:Tomato;">백그라운드 색</p>
    <!-- Text Color-->    
    <h1 style="color:Tomato;">text color</h1>
    <p style="color:DodgerBlue;">text color</p>
    <p style="color:MediumSeaGreen;">text color</p>
    <!--border color-->    
    <h1 style="border: 2px solid Tomato;">BORDER COLOR</h1>
    <h1 style="border: 2px solid DodgerBlue;">BORDER COLOR</h1>
    <h1 style="border: 2px solid Violet;">BORDER COLOR</h1>
</body>
</html>

마무리

색의 표현은 HTML 문서를 꾸미는데 매우 중요한 기능이며, 가장 많이 사용되는 속성입니다.

색상값을 외울필요는 없으나, 문서를 꾸미는 property는 확실하게 이해하도록 하십시요.

내용이 도움이 되셨거나 글쓴이를 응원하고 싶으신 분은 하트♥공감 버튼을 꾹 눌러주세요.

내용이 수정이 필요하거나, 도움이 필요하시면 댓글을 남겨주세요!!!

728x90

막새바람

[HTML 강좌] 13. HTML 색깔(Color) : background-color, color, border color