CSS

[CSS] 색상

katia 2023. 3. 8. 15:15

색상

  • css 에서 색을 표현하는 방법은 아래와 같다.
  • 리터널 : 리터널 색상은 별도의 코드를 활용 하지않고 약속되어 있는 색상을 지칭하는 단어를 사용하는 것이다. 가령 빨간색은 red, 파란색은 blue, 초록색은 green 등으로 사용할 수 있다.
  • rgb(r, g, b) : RGB 를 나타낼 수 있는 각 값 r, g, b를 통해 색상을 표현한다. 각 값은 0부터 255까지이고, 값이 높을수록 밝은 색이다. r은 빨간색, g는 초록색, b는 파란색을 담당한다.
    • rgb(0,0,0) 은 아무색도 들어가지 않는 검은색
    • rgb(255,255,255) 은 모든색이 최대한 들어간 흰색
    • rgb(255,0,0) 은 빨간색만 들어가는 빨간색
  • rgba(r, g, b, a) : 위 rgb함수와 동일하나 알파값(a)을 주어 투명도를 지정할 수 있다. 투명도 a는 0부터 1까지의 실수 혹은 0%부터 100% 퍼센트 값으로 표현하며, 0(0%)는 완전 투명, 1(100%)는 완전 불투명을 의미한다.
  • #rgb : 위 rgb 함수 호출에서 사용한 각 인자의 값을 16진수로 변환하여 작성하는 방식이다.
    • rgb(255,255,255) 에서 각 10진수 인 값 255는 16진수로 표현할 경우 ff가 됨으로 이는 #ffffff와 동일하다.
  • #rgba : 위 #rgb 표현과 같으나, 알파값에 대해 255를 곱한 10진수 값을 16진수로 표현한다. 단, 곱한 값이 소수점일 경우 정수부 까지 반올림한다.
    • rgba(255,255,255,100%) 에서 100%1이고 이에 255를 곱한 수는 255이며 이를 16진수로 표현할 경우 ff가 됨으로 이는 #ffffffff와 동일하다.

'CSS' 카테고리의 다른 글

[CSS] Cursur(마우스 커서 변경)  (0) 2023.03.08
[CSS] Background  (1) 2023.03.08
[CSS] Color (폰트 색상)  (0) 2023.03.08
[CSS] 시간과 크기  (0) 2023.03.08
[CSS] 선택자  (0) 2023.03.08