CSS 색상

실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-2.html

CSS에서는 다양한 색을 나타낼수 있다.

black white 등 색상의 이름을 입력할수도 있지만

색상의 코드를 입력하여 출력할수도 있다.

• 16진수로 표현하는 색상 #000000 : 검은색 #ffffff : 흰색 이와 같이 숫자와 알파벳으로 구성된 RGB의 값을 입력하여 색상을 표현한다.
  

<h1>Color can be set using hexadecimal values</h1>
    <div style="background-color:#ff0000">abc</div>
    <div style="background-color:#00ff00">abc</div>
    <div style="background-color:#0000ff">abc</div>

    <h1 style="color:#ff0000">Heading</h1>
    <h1 style="color:#00ff00">Heading</h1>
    <h1 style="color:#0000ff">Heading</h1>

출력값

• ff/00/00의 코드로 각각 R G B색상을 표현한것을 알수있따
  • 그렇기에 가장 ff코드가 앞에 있을때는 red
  • 중간에 있을때는 green
  • 마지막에 있을때는 blue 색상을 보인다

.b{
      color:black;
    }
    .a{
        color:#000000;
      }
      .d{
        color:#000;
      }
      .e{
        color:rgb(0,0,0);
      }
      .f{
        color:rgba(0,0,0,1);
      }

				<p class="b">black</p>
      <p class="a">#000000</p>
      <p class="d">#000</p>
      <p class="e">rgb(0,0,0)</p>
      <p class="f">rgba(0,0,0,1)</p>

• b : black, 색의 절대 고유명사를 입력한다
• a : #000000 16진수로 된 값, 2개씩 R/G/B로 인식된 수로 색을 표현한다
• d : a와 마찬가지지만 RGB값을 3자리수로 입력받는다
• e : rgb값을 3자리로 입력받는것은 같으니 0~255의 색을 가진다 000 이면 검은색
• f : rgb에 값아서 Alpha값을 추가로 입력한다 마지막 a의 값은 0이면 투명 1이면 불투명 0.5면 반투명이다.

개발자도구

개발자 도구를 활용하면 절대 색상의 값도 확인이 가능하다