html & css/개념

색상 적용 방법

Doo Hee 2023. 7. 4. 22:50 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- CSS 색상 적용 -->
    <!-- 1. 색상명에 해당하는 키워드 사용 -->
    <h1 style="background-color: blue">파란색 배경 적용</h1>
    <h1 style="color: orange">오렌지색 글씨 적용 적용</h1>

    <!-- 2. 색상값 사용 -->
    <!-- RGB값. R-Red, G-Green, B-Blue -->
    <!-- 0~255 -->
    <h1 style="color: rgb(255, 0, 0)">빨간색</h1>
    <h1 style="color: rgb(0, 255, 0)">초록색</h1>
    <h1 style="color: rgb(0, 0, 255)">파란색</h1>
    <h1 style="color: rgb(120, 20, 250)">어떤색</h1>

    <!-- RGBA -->
    <!-- A-Alpha(투명도) -->
    <!-- 알파값이 1, 숫자가 작아질수록 투명도가 높아짐. -->
    <h1 style="color: rgba(255, 0, 0, 0.2)">빨간색</h1>

    <!-- 3. HEX 색상값 -->
    <!-- 16진수 표기법. 광원(빛의 3원색)인 Red, Green, Blue의 조합으로 표기 -->
    <!-- 0 -> HEX '00' -->
    <!-- 255 -> HEX 'ff' -->
    <!-- 투명도를 설정할 수 없다. -->
    <h1 style="color: #ff0000">빨간색</h1>
    <h1 style="color: #e500cc">어떤색</h1>

    <!-- 4. HSL 값 -->
    <!-- 색조(hue), 채도(saturation), 밝기(lightness) 3가지 값으로 구성 -->
    <!-- 색조: 0~360, 360은 빨간색, 120은 초록색, 240은 파란색 -->
    <!-- 채도: 0~100%, 0%은 회색음영 -->
    <!-- 밝기: 0~100%, 100% 가장 밝은 값 -->
    <h1 style="color: hsl(0, 92%, 48%)">빨간색</h1>

    <!-- HSLA -->
    <!-- A-Alpha -->
    <h1 style="color: HSLA(360, 100%, 0%, 0.2)">빨간색</h1>
  </body>
</html>