HTML-Colors

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다.

---

 

안녕하세요 Gon입니다.

 

이번 글에서는 HTML 에서 Color 들에 대하여 알아보도록 하겠습니다.

 

HTML에서 글과 배경의 색상을 지정하는 태그들이 존재합니다.

 

Colors 요소.

HTML에서 색을 입힌다는 의미는 여러가지 종류가 있습니다. 

요소의 배경 색 = background-color

요소의 글씨 색 = color

요소의 태두리 색 =boreder

등등 여러가지 요소들을 이전 글들에서 언급한 CSS와 color 속성을 통하여 다양하게 변화를 줄 수 있습니다.

 

 

배경색 변경

글씨 색 변경

 

<p style="background-color:Tomato;">배경색 변경</p>
<p style="color:green;">글씨 색 변경</p>
<p style="border:2px solid dodgerblue;">태두리 변경</p>

위에 코드처럼 스타일 속성을 이용하여 CSS언어를 불러오고 color를 설정할수 있습니다.

 

Colors를 선택하는 방법

색을 선택하는 방법은 크게 3가지가 있습니다.

 

1. 색의 이름으로 선택

   HTML에서는 여러가지 색이 이름으로 정이되어있습니다. 상단처럼 이름으로 색을 지정할 수 있습니다.

2. RGB를 이용

   HTML 에서는 RGB(3원색의 조합)으로 색을 표현 할 수 있습니다 rgb(255,91,71)등으로 말이죠

2. HEX(16진수)를 이용

   HTML에서는 이 RGB3원색의 포시를 16진수로 표현하는 것도 가능합니다 #HEX를 이용하여 색을 표현 합니다.

3. HSL를 이용

   HTML에서는 색조,채도,밝기를 이용하여 색을 표현할 수도 있습니다. 색조는 0~360범위로 120은 빨간색 파란색은 240입니다. 나머지 채도와 밝기는 100분율로 표현을 합니다.

 

위 4가지 예시는 다음과 같습니다.

<p style="color:Tomato;">이름 표기</p>
<p style="color:rgb(255,99,71);">RGB표기</p>
<p style="color:#ff6347;">HEX표기</p>
<p style="color:hsl(9,100%,64%);">HSL표기</p>

이런식으로 똑같은 색이지만 다양한 방법으로 표기할 수 있습니다.

 

색의 변화나 표시를 잘 보고싶다면 구글링을 통해 더 자세한 정보나 해당 값의 색들을 알 수 있을 겁니다.

 

이상 글을 마치도록 하겠습니다.

 

감사합니다.

 

Gon