색 이름 활용하기 🔍
우리가 사용하는 색상 이름을 직접 입력하여 사용이 가능하다
h1 {
color : red;
background-color : white;
}css에서는 140가지의 색상을 이름으로 지원하는데, 해당 방법으로는 색을 표현하는데 있어 한계점이 존재한다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB 등을 사용하는 것이다.
🔗 색상 참고 사이트
https://www.w3schools.com/cssref/css_colors.php
RGB 사용하기
RGB 색상표기법은 rgb(red,green,blue) 형식으로 색상을 표현하는데, 각 요소에는 0 ~ 255사이의 숫자를 입력한다. 색상에 투명도를 더하고 싶다면 rgba(red,green,blue,alpha) 형식으로 blue 값 뒤에 4번째 자리에 불투명도를 표기해주면 된다. 투명도는 0~1까지 0에 가까울수록 투명 , 1에 가까울수록 불투명이다.
p{
background-color: rgb(12, 211, 42);
}
div{
background-color: rgba(12, 211, 42, 0.4);
}--> 결과
HEX 사용하기
실제로 실무에서 가장 많이 사용하는 색상 표기법으로 RGB 순서대로 16진수로 변환하여 00~ff 까지 두자리씩 표기한다. 색상코드 맨 앞에는 #을 붙이고, 만약 같은 숫자가 반복된다면 줄여서 표현할 수 있다 (#ffffff --> #fff)
p{
background-color: #12ff32
}
div{
background-color: #ff12A2;
}
