CSS 단위 part2 - by. UXKM

  • Publishing
  • CSS
  • CSS 초급
  • CSS 단위 part2
요약 설명

CSS 단위는 요소의 크기, 간격, 색상 등을 정확하게 표현하기 위해 숫자와 함께 사용하는 측정 단위입니다.
CSS 속성 값에 크기나 색상을 지정할 때 단위를 사용하여 브라우저가 값을 해석하고 화면에 표시할 수 있도록 합니다.

CSS 단위는 크게 길이 단위와 색상 단위로 나뉩니다.
길이 단위는 요소의 크기나 간격을 지정할 때 사용하며, 색상 단위는 요소의 색상을 표현할 때 사용합니다.

요약 설명

CSS 단위 part-2에서는

  • CSS 단위 비교 표
  • 색상 표현 단위
  • opacity 속성에 대해 다룹니다.

CSS 색상은 색상 이름, RGB/RGBA, HEX, HSL/HSLA 등으로 표현할 수 있으며, opacity 속성은 요소의 투명도를 0.0(완전 투명)부터 1.0(완전 불투명)까지 설정할 수 있습니다.
주의: 숫자와 단위 사이에는 공백을 두지 않습니다. (예: #ff0000(○), #ff 0000(×))

CSS 단위 비교 표

CSS 단위 비교 표
[px, em, %, pt, HTML, KeyCode 비교표]

색상 표현 단위

CSS에서 색상을 지정하는 방법은 색상 이름, RGB/RGBA, HEX, HSL/HSLA 등이 있으며, color, background-color, border-color 등 색상 관련 속성에 사용됩니다.
색상 키워드 목록은 W3C css3-color를 참고하세요.

  1. 색상 이름(red,black, blue 등)
  2. rgb(red, green, blue)값
  3. rgba(red, green, blue, alpha)값
  4. hsl(hue, saturation, lightness)값
  5. hsla(hue, saturation, lightness, alpha)값

위의 5가지 방법 중에서 rgba, hsl, hsla는 CSS 3에서 새로 추가된 속성입니다.

색상 이름

색상 키워드(color keyword)를 사용하는 방법으로, 예를 들어 red, blue, green 등을 사용할 수 있습니다. 사용이 간편하지만 표현할 수 있는 색상의 수는 제한적입니다.

HEX 코드

HEX 코드는 16진수로 색상을 표현하는 방법으로, # 기호와 6자리 16진수로 구성됩니다. (예: #000000, #ff0000)

HEX 색상 코드는 #RRGGBB 형식으로, 처음 두 자리(RR)는 빨강, 세 번째와 네 번째(GG)는 녹색, 다섯 번째와 여섯 번째(BB)는 파랑의 강도를 나타냅니다.
16진수는 0-9와 A-F를 사용하며, 각 색상 값은 00(최소, 0)부터 FF(최대, 255)까지입니다. 예를 들어 16진법에서 FF는 십진법의 255를 의미합니다. (F=15, FF=15×16+15=255)

각 색상 값의 두 자리가 같으면 3자리로 축약할 수 있습니다. (예: #0099FF → #09F, #ffffff → #fff)
단, 두 자리가 다르면 축약할 수 없습니다. (예: #009AFF는 축약 불가)

다음 색상 값은 모두 동일한 빨간색을 표현합니다: #f00, #ff0000, rgb(255,0,0), rgb(100%, 0%, 0%)
대소문자는 구분하지 않지만 소문자 사용을 권장합니다.

RGB

RGB(Red, Green, Blue)로 색상을 표현하며, 예를 들어 rgb(255, 255, 0)처럼 사용할 수 있습니다.
0~255 사이의 숫자 또는 0%~100% 사이의 백분율로 표현할 수 있으며, rgb(0,0,255) = rgb(0%,0%,100%)와 같이 동일한 색상을 표현할 수 있습니다.

RGBA

RGBA는 RGB에 투명도(Alpha)를 추가한 것으로, 예를 들어 rgba(255, 255, 0, 1)처럼 사용할 수 있습니다.
Alpha 값은 0.0(완전 투명)부터 1.0(완전 불투명)까지 설정할 수 있습니다.

HSL

HSL(색상, 채도, 명도)로 색상을 표현하며, 예를 들어 hsl(0, 100%, 50%)처럼 사용할 수 있습니다.
Hue(색상)는 0~360 사이의 숫자로 색상환의 각도를 나타냅니다. 0 또는 360은 빨강, 120은 녹색, 240은 파랑입니다.
Saturation(채도)는 0%~100%로 색의 진함을 나타냅니다. 0%는 회색, 100%는 가장 진한 색입니다.
Lightness(명도)는 0%~100%로 색의 밝기를 나타냅니다. 0%는 검정, 50%는 보통 색, 100%는 흰색입니다.

HSLA

HSLA는 HSL에 투명도(Alpha)를 추가한 것으로, 예를 들어 hsla(60, 100%, 50%, 1)처럼 사용할 수 있습니다.
Alpha 값은 0.0(완전 투명)부터 1.0(완전 불투명)까지 설정할 수 있습니다.

참고: CSS Colors Level 4부터 hsla()는 hsl()의 별칭(alias)입니다. 즉, hsla(60, 100%, 50%, 1)와 hsl(60, 100%, 50%, 1)는 완전히 동일하게 작동합니다. 투명도가 있는 경우에도 hsl() 함수만 사용해도 됩니다.

색상 표현 단위 종합 예제

opacity 속성

요소의 불투명도를 설정하는 속성으로, 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도를 의미하며 투명도의 반대 개념입니다.
opacity는 요소 전체(내용과 배경 모두)에 영향을 주지만 자식 요소는 상속하지 않으며, opacity 값이 1이 아니면 새로운 쌓임 맥락(stacking context)을 생성합니다.

값 :
0 : 요소가 완전히 투명해 보이지 않습니다.
0과 1 사이의 숫자 : 요소가 반투명해 뒤의 내용을 볼 수 있습니다.
1 (기본값) : 요소가 완전히 불투명합니다.