6. CSS 색(Colors)

① HTML에서는 CSS의 속성을 이용해 색을 적용할 수 있다.

② RGB, HEX, HSL, RGBA, RGBA 의 수치나 색의 이름을 이용해 색을 표현할 수 있다.

㉠ HTML에서는 140가지의 색 이름이 지원한다.

③ background-color 속성을 이용해 HTML 요소 텍스트의 배경색을 설정할 수 있다.

<!DOCTYPE>
<html lang="ko">
      <body>
<p style = "background-color: pink;">
분홍색
</p>
      </body>
</html>

④ color 속성을 이용해 HTML 요소 텍스트의 글자색을 설정할 수 있다.

<!DOCTYPE>
<html lang="ko">
      <body>
            <p style ="color:blue">파란색</p>
      </body>
</html>

⑤ border를 이용해 테두리 색을 적용할 수 있다.

<!DOCTYPE>
<html lang="ko">
      <body>
            <p style ="border:2px solid purple">보라색</p>
      </body>
</html>

⑥ RGB 색의 값은 빨간색(RED), 초록색(GREEN), 파랑색(BLUE) 광원을 나타낸다.

㉠ rgb(red, green, blue)를 이용해 RGB 색 값을 나타낼 수 있다.

㉡ 각각 0~255까지의 값이 있으며, 256 x 256 x 256 = 16777216 가지의 값이 존재한다.

<!DOCTYPE>
<html lang="ko">
      <body>
            <p style ="border:2px solid rgb(100,80,200)">무슨색?</p>
      </body>
</html>

㉢ rgba(red, green, blue, alpha)를 이용해 RGB 색 값에서 불투명도를 추가하여 나타날 수 있다.

ⓐ alpha의 값은 0.0~1.0의 사이의 숫자이며, 0.0에 가까울 수록 투명해진다. 1.0에 가까워질 수록 불투명해진다.

<!DOCTYPE>
<html lang="ko">
      <body>
            <p style ="border:2px solid rgba(100,80,200,0.2)">무슨색?</p>
      </body>
</html>

⑦ 16진수 색상은 RGB값을 16진수쌍 3개로 나타낸 방식이다.

㉠ #RRGGBB 를 이용해 16진수 색상을 나타낼 수 있다.

㉡ 00~ff의 값이 있으며, 16 x 16 = 256, 256 x 256 x 256 = 16777216 가지의 값이 존재한다.

㉢ RR, GG, BB의 16진수 값은 RGB의 R, G, B에 대응한다.

<!DOCTYPE>
<html lang="ko">
      <body>
<p style = "background-color: rgb(256,0,0);">
빨간색
</p>
      </body>
</html>

<!DOCTYPE>
<html lang="ko">
      <body>
<p style = "background-color: #ff0000;">
빨간색
</p>
      </body>
</html>

⑧ HSL은 색조, 채도, 밝기를 나타낸다.

㉠ hsl(hue, saturation, lightness)를 이용해 색을 나타낼 수 있다.

㉡ 색조(Hue)는 색의 정도로 0~360까지 있으며, 0은 빨간색, 120은 초록색, 240은 파란색을 나타낸다.

㉢ 채도(Saturation는 색의 강도로 0%~100%가 있으며, 0%는 회색 음영(shade of gray)을 의미하며, 100%는 순수한 색(full color)를 의미한다.

㉣ 밝기(Lightness)는 색상을 부여할 빛의 양으로 0%~100%가 있으며, 0%는 빛이 없는 검정색, 100%는 순수한 빛인 흰 색을 의미한다.

<!DOCTYPE>
<html lang="ko">
      <body>
<p style = "background-color: hsl(150,80%,70%);">
민트색
</p>
      </body>
</html>

㉤ HSLA는 불투명도가 있는 HSL의 확장이다.

ⓐ hsla(hue, saturation, lightness, alpha)를 이용해 색을 나타낼 수 있다.

ⓑ alpha의 값은 0.0~1.0의 사이의 숫자이며, 0.0에 가까울 수록 투명해진다. 1.0에 가까워질 수록 불투명해진다.

<!DOCTYPE>
<html lang="ko">
      <body>
<p style = "background-color: hsl(150,80%,70%,0.4);">
민트색
</p>
      </body>
</html>

취미용 블로그