Colors

CSS에서 색상을 나타내기 위해서는 16진수로 된 RGB 코드 값 또는 몇 가지의 기본 색상 이름으로 표현해야 합니다. 일반적으로 16진수로 나타낼 경우에는 '#'기호를 해당 해당 16진 코드 앞에 붙여서 표시합니다.

CSS 3에서는 색상 값을 지정하는 모든 프로퍼티에 transparent 키워드를 사용할 수 있습니다. currentColor 키워드를 사용해서 부모 요소의 색상을 상속할 수도 있습니다.

RGB

RGB 색상 값은 다음과 같은 형태중 하나로 표현할 수 있습니다.
  • #336699
  • #369
  • rgb(51, 102, 153)
  • rgb(30%, 60%, 100%)

RGBA

RGB 색상값에 알파 값을 추가해서 표현할 수도 있습니다.

  • rgba(255, 0, 0, 1)


HSL

또한, CSS 3에서는 HSL 형식의 색상 값을 사용할 수도 있습니다.
  • hsl(120, 100%, 50%)

HSLA

HSL 색상에 알파값을 추가할 수도 있습니다.

  • hsla(120, 100%, 50%, 0.5)



CSS의 기본적인 색상의 이름은 다음과 같습니다.
  • aqua(#00ffff), black(#000000), blue(#0000ff), fuchsia(ff00ff), gray(#808080), green(008000), lime(#00ff00), maroon(#800000), navy(#000080), olive(#808000), purple(#800080), red(#ff0000), silver(#c0c0c0), teal(#008080), white(#ffffff), yellow(#ffff00)
CSS 3에서는 기본 색상의 이름이 더 많이 추가되어 정의되었습니다. 그리고 CSS 2에서 정의되었던 시스템 컬러는 CSS 3에서는 폐기되었습니다.

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.