#3. 버튼(class)에 효과 주기 - 기본 스타일링(색상)

 

1. 기본 스타일링

• color: 텍스트 색상
  • 색상 이름: color: red;
  • HEX 코드: color: #ff0000;
    • 16진수로 색상을 표현
  • RGB: color: rgb(255, 0, 0);
    • 설명: 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 값 
    • 형식: rgb(red, green, blue)
    • 범위: 각 값은 0에서 255 사이의 정수
  • RGBA: color: rgba(255, 0, 0, 0.5);
    • 설명: RGB 값에 알파(Alpha) 값(투명도)을 추가하여 색상을 표현
    • 형식: rgba(red, green, blue, alpha)
    • 범위: 각 RGB 값은 0에서 255 사이의 정수, 알파 값은 0.0(완전히 투명)에서 1.0(완전히 불투명) 사이의 소수
  • HSL: color: hsl(0, 100%, 50%);
    • 설명: 색상(Hue), 채도(Saturation), 명도(Lightness)로 색상을 표현
    • 형식: hsl(hue, saturation, lightness)
    • 범위:
      • hue (색상): 0에서 360 사이의 각도
      • saturation (채도): 0%에서 100% 사이의 백분율
      • lightness (명도): 0%에서 100% 사이의 백분율
  • HSLA: color: hsla(0, 100%, 50%, 0.5);
    • 설명: HSL 값에 알파(Alpha) 값(투명도)을 추가하여 색상을 표현합니다.
    • 형식: hsla(hue, saturation, lightness, alpha)
    • 범위:
      • hue (색상): 0에서 360 사이의 각도
      • saturation (채도): 0%에서 100% 사이의 백분율
      • lightness (명도): 0%에서 100% 사이의 백분율
      • alpha (알파): 0.0(완전히 투명)에서 1.0(완전히 불투명) 사이의 소수

 

• background-color: 배경 색상
  • 색상 이름: background-color: blue;
  • HEX 코드: background-color: #0000ff;
  • RGB: background-color: rgb(0, 0, 255);
  • RGBA: background-color: rgba(0, 0, 255, 0.5);
  • HSL: background-color: hsl(240, 100%, 50%);
  • HSLA: background-color: hsla(240, 100%, 50%, 0.5);

 

  <style>
        .hex-color {
            color: #ff0000; /* 빨간색 */
        }
        .rgb-color {
            color: rgb(255, 0, 0); /* 빨간색 */
        }
        .rgba-color {
            color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */
        }
        .hsl-color {
            color: hsl(0, 100%, 50%); /* 빨간색 */
        }
        .hsla-color {
            color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨간색 */
        }
    </style>