CSS 단위와 색상

CSS 단위

• 1. px: px단위는 화소 1개의 크기를 의미한다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다.
• 2. %: % 는 백분율 단위의 상대 단위이며 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다.
• 3. em: em은 배수 단위로 상대 단위이며 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정한다.
  지정된 사이즈에 em의 값만큼 곱해서 계산합니다.
• 4. rem: rem에서 r은 root(최상위)를 뜻한다.
  최상위의 태그에서 지정한 사이즈에 rem의 값만큼 곱해서 계산한다.
• 5. vh: vh는 Viewport height의 축약어이며, Viewport는 웹사이트에서 보이는 영역을 뜻합니다.
  속성 값이 1vh 일 경우 뷰포트 넓이의 1%만큼 계산이 됩니다.
• 6. vw: vw는 Viewport weight의 축약어입니다.
  속성 값이 1vw 일 경우 뷰포트 너비의 1%만큼 계산이 됩니다.
  
• 7. vmin: 뷰포트 너비 또는 높이를 기준으로 하는 최소 값이며 뷰포트의 너비, 높이 값 중
  작은 값을 기준으로 값이 동적으로 설정됩니다. 기준값의 1% 값
• 8. vmax: 뷰포트 너비 또는 높이를 기준으로 하는 최대 값이며 뷰포트의 너비, 높이 값 중
  큰 값을 기준으로 값이 동적으로 설정됩니다. 기준값의 1% 값

CSS 색상

CSS에는 색을 표현하는 네 가지 방법이 있습니다.

1. 색상 이름으로 표현

색상 이름으로 표현이 가능합니다.

2. RGB 색상값으로 표현

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가집니다.

3. 16진수 색상값으로 표현

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가집니다.

4. HSL/HSLA 값으로 표현

HSL는 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다. 색상은 0부터 360까지의 색상환에 따라 결정되며 0:red, 120:green, 240:blue로 나타나며 채도와 명도는 백분율로 나타냅니다. HSLA는 HSL방식에서 불투명도 지정 기능이 추가된 것이며 HSLA(색상, 채도, 명도, 불투명도) 형식으로 나타냅니다.