속성 - 색상

Robyn·2023년 4월 8일
0

컬러의 경우 다양한 형태로 컬러 값을 적용할 수 있다.

hexa 뜻
접두사적으로 쓰이는 6이라는 뜻의 그리스어.

decimal 뜻
십진법(十進法, 문화어: 열올림법)은 10을 기수로 한 기수법이다. 자리수로 0, 1, 2, 3, 4, 5, 6, 7, 8, 9를 쓴다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>form</title>
    <style>
        h1{color: darkslategrey;}
        h2{color: #5b5c54;} /* Hexadecimal colors */
        h3{color: #666;}
        h4{color: rgb(153, 161, 140);}
        h5{color: rgba(176, 181, 174, 1);}
    </style>
</head>

<body>
    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
</body>

</html>


hexadecimal
16진수
숫자 0~9
알파벳 a~f
10+6 = 16
0에 가까워질수록 검정색
f에 가까워질수록 하얀색
2개씩 나눠서 R, G, B

<body>
    <div style="background-color: #ff0000; color: #00ffff;">#00ffff</div>
    <div style="background-color: #00ff00; color: #ff00ff;">#ff00ff</div>
    <div style="background-color: #0000ff; color: #ffff00;">#ffff00</div>
</body>


16진수에서 같은 수가 두 개씩이면 축약하여 세 자리로도 표현 가능하다.

<body>
    <div style="background-color: #f00; color: #0ff;">#00ffff</div>
    <div style="background-color: #0f0; color: #f0f;">#ff00ff</div>
    <div style="background-color: #00f; color: #ff0;">#ffff00</div>
</body>

rgb는 각 자리마다 0~255의 숫자를 적용할 수 있다.
세 자리 모두 0에 가까울수록 검은 색
255, 255, 255로 적용했을 때 하얀 색으로 표현된다.
빨 - 255, 0, 0
초 - 0, 255, 0
파 - 0, 0, 255

what is alpha in rgba라고 구글에 물었더니
The alpha value represents the level of transparency/opacity of the color.
0과 1 사이의 값
0으로 하면 아예 안 보임
rgba할 때는 뒤에 꼭 알파에 해당하는 값을 선언해주어야한다.
안 그럼 취소선이 그어지고 안 보임.

HSL values (css3), HWB values(css4)같은 방법도 있다.

브라우저마다 지원하는 게 다르니 주의해야한다.

0개의 댓글