<body>
<!-- CSS 색상 적용 -->
<!-- 1. 색상명에 해당하는 키워드 사용 -->
<h1 style="background-color: blue">파란색 배경색 적용</h1>
<p style="color: orange">오랜지색 글씨 적용</p>
이떄까지 색상명을 입력해서 색을 입혔었다
<!-- 2. 색상값 사용 -->
<!-- RGB값 R-Red, G-Green, B-Blue -->
<!-- 0~255까지 값 -->
이제는 RGB값 을 가지고 색상을 입혀보자
어릴적에 빨강,초록,파랑 만 있으면 색을 섞어 모든 색을 표현할 수 있는걸 배웠었다
<h1 style="color: rgb(255, 0, 0)">빨간색</h1>
style="color: rgb()" rgb 값으로 해당 태그 의 순서대로
rgb(빨간색 값,초록색 값,파란색 값) 이다
0~255까지의 값을 빨,초,파 에 적용해 색상을 만들 수 있다
(255,0,0) 값은 맨 앞 빨간색만 255로 최대 값을 적용한걸 볼 수있다 초록색 0 파란색 0
이므로 빨간색이 나온다
또 다른 예시로
<h1 style="color: rgb(255, 0, 0)">빨간색</h1>
<h1 style="color: rgb(0, 255, 0)">초록색</h1>
<h1 style="color: rgb(0, 0, 255)">파란색</h1>
이런 식으로 적용되는 것이다
vscode 프로그램 에서는
이렇게 rgb 앞에 색이 있는 네모난 박스가 있다
마우스를 네모난 박스에 가져가면
팔레트가 나와서 꼭 0~255값을 입력하지 않고도 내가 원하는 색상을 찾을 수 있다
<!-- 3. RGBA -->
<!-- A-Alpha(투명도) -->
<h1 style="color: rgba(255, 0, 0, 0.5)">빨간색</h1>
</body>
rgba 를 통해서 투명도를 적용할 수 있다
투명도는 1이 완전 불투명 값으로 나는 0.5 값을 줬으니 반만 투명해진다
앞에선 rgb 색생값을 썻지만 HEX 라는 색상값도 있다
<!-- 4.HEX 색상값 -->
<!-- 16진수 표기법. 광원(빛의 3원색)인 Red, Green, Blue의 조합으로 표기 -->
<!-- rgb : 0 -> HEX '00' -->
<!-- rgb : 255 -> HEX 'FF' -->
<h1 style="color: #ff0000">빨간색</h1>
<h1 style="color: #0000ff">파란색</h1>
<h1 style="color: #00ff00">초록색</h1>
<h1 style="color: #000000">검은색</h1>
기호는 #(샾) 이고 (00,00,00 순서 대로 빨강,초록,파랑) 의 형식을 갖는다
실무에선 HEX와 rgb값을 많이 쓴다고 한다.
<!-- 5.HSL 값 -->
<!-- 색조(hue), 채도(saturation), 밝기(lightness) 3가지 값으로 구성 -->
<!-- 색조 : 0~360, 360은 빨간색, 120은 초록색, 240은 파란색 -->
<!-- 채도 : 0~100%, 0은 회색음영 -->
<!-- 밝기 : 0~100%, 100%는 가장 밝은 값 -->
<h1 style="color: hsl(360, 100%, 50%)">빨간색</h1>
<h1 style="color: hsl(120, 100%, 50%)">초록색</h1>
<h1 style="color: hsl(240, 100%, 50%)">파란색</h1>
HSL 값도 있다
하지만 이 HSL값은 실무에서 쓰진 않는다고 한다
이런게 있다는것만 알아두자
<!-- HSLA -->
<!-- A : Alpha -->
HSL 값도 A를 붙여 알파값(투명도) 를 줄 수 있다
