[HTML] 12. HTML 색상
이전 글:
2020/03/16 - [HTML and CSS] - [HTML] 11. HTML 코멘트
2020/03/12 - [HTML and CSS] - [HTML] 10. HTML 인용과 인용구
관련 글:
2020/03/09 - [HTML and CSS] - [HTML] 8. HTML 스타일
이번 내용은 <8. HTML 스타일>과 매우 관련 있는 내용이다.
HTML 스타일에서 다음과 같은 문구를 사용했던 것을 기억할 것이다.
<p style="color:red;">I am red</p>위의 문구로부터 우리는 "I am red"라는 문장에 빨간색이라는 색상을 입힐 수 있었다.
이번 장에서 배울 내용은 어떤 색상을, 어떻게 입힐 수 있는가에 대한 것이다.
HTML 색상은 미리 지정된 색상 이름, 혹은 RGB, HEX, HSL, RGBA, HSLA 값으로 표현할 수 있다.
1. 미리 지정된 색상 이름들
HTML에는 사용자들이 이용하기 편하도록 미리 특정 색상들에 대해서 이름을 정해놓았다.
우리가 일반적으로 아는 색상들로 다음과 같은 색상이 있다.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</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>
</body>
</html>위의 코드를 시행하면 다음과 같은 색상들이 나타난다.
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
위의 색깔들 이외에도 140가지의 표준 색상 이름들이 존재한다.
그 이름들은 여기를 참조하면 알 수 있다.
https://en.wikipedia.org/wiki/Web_colors
2. 배경 색깔 지정
<8. HTML 스타일>에서도 잠깐 언급됬지만,
우리는 HTML을 통해 배경에 색상을 입힐 수 있다.
다음 예시를 보자.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
예시를 시행시키면 다음과 같은 결과가 도출된다.
Hello World
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.
배경색 지정을 통하여 우리는 웹사이트를 좀 더 다채롭게 꾸밀 수 있다.
3. 텍스트 색상 지정
그러면 배경 말고 텍스트의 색상을 지정하는 법을 보자.
이는 다음과 같은 예시를 참조하면 된다.
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
상단의 코드를 시행하면 아래와 같은 결과가 나온다.
Hello World
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.
여기에 사용된 색상 이외에도 다른 색상으로 예시를 실행시켜보는 것도 도움이 될 것이다.
4. 경계선 색상 지정
이번에는 앞에서 다루지 않았던 내용을 보자.
바로 경계선에 대한 색상을 지정하는 것이다.
흔히 우리가 강조하고 싶은 텍스트에 경계선의 색상을 지정하여 눈에 띄게 만들 수 있다.
<!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>
</body>
</html>
위의 예시로부터 우리는 3개의 다른 경계선을 볼 수 있다.
이번 예시는 여기에 결과를 따로 올리지 않겠다.
한번 .html 파일을 만들어서 직접 실행해보기를 바란다.
앞의 4가지 방법으로 우리는 사이트를 꾸밀 수 있다.
앞에 방법들에서는 표준 색상 이름만 사용하여 꾸몄는데,
그러면 RGB, HEX, HSL, RGBA, HSLA 값들은 어떤 것일까?
예를 들어, 우리가 텍스트 배경에 "Tomato"라는 색상을 입히고 싶다면 아래와 같은 명령어를 쓸 것이다.
<h1 style="background-color:Tomato;">하지만 다음의 명령어들 또한 같은 결과를 가져온다.
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
위에서부터 순서대로 RGB, HEX, HSL 값들로 색상을 표현한 것이다.
이 중에 HEX를 제외하고 RGB와 HSL에서는 투명도를 조절할 수가 있는데,
그것이 RGBA와 HSLA이다.
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
자세히 보면, RGBA와 HSLA는 RGB와 HSL에 비해 0.5라고 숫자가 하나 더 들어간 것이 보일 것이다.
이 숫자가 1이면 정말 투명해지며, 0이면 기존 색상과 동일한 색상이 나오게 된다.
위의 RGB, HEX, HSL, RGBA, HSLA값으로 표현된 색상들은 직접 실행해보기를 바란다.
사실상 HTML 코드를 작성하면서 상대적으로
RGB, HEX, HSL 값들보다 기존에 표준으로 정해져 있던 색상 이름을 사용한다.
당신이 전문적인 서버 구축자거나 디자인 전공자라면 RGB, HEX, HSL에 익숙해질 필요는 있다.
하지만 대부분은 표준 색상을 사용할 것이기 때문에,
가볍게 알고 넘어가도 상관없다.
아예 이 장에서 색상에 관한 것을 설명하는 것이 좋을 것 같아서
간단히 RGB, HEX, HSL에 대해 설명을 좀 더 하고 넘어가도록 하겠다.
1). RGB 값
RGB 값은 다음 포맷으로 나타난다.
rgb(red, green, blue)
red, green, blue는 0부터 255 사이의 값으로 그 강도가 표현된다.
예를 들어, rgb(255, 0, 0)은 빨간 색상을 보여주며,
rgb(0, 0, 0)은 검은색, rgb(255, 255, 255)는 하얀색을 나타낸다.
아래 예시를 통해 여러 색상을 테스트해보자
<!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>
<p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>
2). HEX 값
HEX 값은 hexadecimal값이라고도 명명할 수 있다.
포맷은 다음과 같다.
#rrggbb
여기서는 rr(red), gg(green), bb(blue)가 00과 ff사이의 hexadecimal값으로 표현된다.
hexadecimal에 대한 내용은 다음을 참조하자.
https://simple.wikipedia.org/wiki/Hexadecimal
예를 들어, #ff0000는 빨간 색상을 보여준다.
왜냐하면 ff가 가장 높은 값을 의미하고, 00은 가장 낮은 값을 의미하기 때문이다.
다음 예시를 보자
<!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>
<p>In HTML, you can specify colors using Hex values.</p>
</body>
</html>
3). HSL 값
HSL 값은 Hue, Saturation, 그리고 Lightness를 의미한다.
hsl(hue, saturation, lightness)
Hue는 0부터 360으로 표현되는 색상 바퀴로,
0은 빨간 색상, 120은 초록 색상, 240은 파란 색상을 나타낸다.
Saturation은 퍼센트 값으로 지정되는데,
0%는 회색, 그리고 100%는 본래 색상으로 설정된다.
Lightness 또한 퍼센트 값으로 지정되고,
0%는 검은색, 50%는 아무런 변화가 없고, 100%는 하얀색이 된다.
HSL은 RGB와 HEX와는 색다른 색깔 표현 방식이지만,
채도와 명도에 초점을 맞추었다고 보면 된다.
다음 예시를 보자.
<!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>
<p>In HTML, you can specify colors using HSL values.</p>
</body>
</html>
우리는 이번 장에서 HTML에서 어떻게 색상을 사용하고,
또한 어떤 색상을 사용할 수 있는지 배웠다.
무엇보다 중요한 점은 앞으로 자주 사용하여
몸에 익숙해지게 만들어야 한다는 것이다.
특히 색상 같은 경우는 웹사이트를 하얀 배경에 검은색으로만 채우고 싶은 것이 아니라면,
언젠가는 사용할 수밖에 없다.
(물론 사진을 붙여 넣을 수도 있다.)
다음 장에서도 계속 <8. HTML 스타일>과
이번 장에서 언급한 색의 요소들을 결합하여
좀 더 넓은 단위의 스타일 지정을 배워볼 생각이다.
관련 글로 계속 추가해 나가도록 하겠다.