[CSS] 컬러에 관한 속성 알아보기 (List of color properties)

 

안녕하세요 Foma 💻 입니다!

 

오늘은 CSS 속성 중 컬러에 관련된 속성에 대해서 알아보려고 합니다!

 

바로 시작할게요~

---

color

 

text 및 text-decoration 등의 색을 정하는 속성

 

색깔을 지정하는 방법은 6가지가 있습니다.

 

1. name

2. hex

3. rgb

4. hsl

5. hwb

6. global

 

  <h1 style="color:red;">안녕하세요</h1>
  <h1 style="color:#090;">안녕하세요</h1>
  <h1 style="color:rgb(34,12,64,0.6);">안녕하세요</h1>
  <h1 style="color:hsl(30,100%,50%,0.6);">안녕하세요</h1>
  <h1 style="color: hwb(1.5708rad 20% 10% / 0.7)"">안녕하세요</h1>
  <h1 style="color:initial;">안녕하세요</h1>

 

---

accent-color

 

인풋값(체크박스나,라디오버튼) 등을 눌렀을 때 액센트 컬러를 정하는 속성

 

   <input type="checkbox" style="accent-color:red;">
   <input type="radio" style="accent-color:blue;">

 

---

background-color

 

요소의 배경 색을 지정하는 속성

 

 <h1 style="background-color:red;">안녕하세요</h1>

 

---

border-color

 

테두리의 색을 정하는 속성 (border-style이 정해져 있어야 적용됨)

 

h1 {
  border-style: solid;
  border-color: red;
}

 

 

색을 두 개 지정하면 세로와 가로 색을 정할 수 있습니다.

 

h1 {
  border-style: solid;
  border-color: red blue;
}

 

 

색을 세 개 지정하면 위,가로,아래 방향 색을 정할 수 있습니다.

 

h1 {
  border-style: solid;
  border-color: red blue green;
}

 

 

색을 네 개 지정하면 위.오른쪽,아래,왼쪽 색을 정할 수 있습니다.

 

---

border-left-color

 

테두리의 왼쪽 색을 정하는 속성

 

border-right-color

 

테두리의 오른쪽 색을 정하는 속성

 

border-bottom-color

 

테두리의 아래쪽 색을 정하는 속성

 

border-top-color

 

테두리의 위쪽 색을 정하는 속성

 

h1 {
  border-style: solid;
  border-left-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-top-color: yellow;
}

 

---

border-inline-color/border-block-color

 

쓰기 모드,방향에 따라 테두리의 색상을 정하는 속성

 

가로 모드일 경우

 

h1 {
  border-style: solid;
  border-inline-color: red;
  writing-mode: horizontal-tb;
}

 

 

세로 모드일 경우

 

h1 {
  border-style: solid;
  border-inline-color: red;
  writing-mode:vertical-lr;
}

 

---

border-inline-end-color/border-block-end-color

 

쓰기 방향에 따라 테두리 끝 색을 정하는 속성

 

border-inline-start-color/border-block-start-color

 

쓰기 방향에 따라 테두리 시작 색을 정하는 속성

 

h1 {
  border-style: solid;
  border-block-end-color: red;
  border-block-start-color: blue;
  writing-mode: vertical-rl;
}

h2 {
  border-style: solid;
  border-block-end-color: red;
  border-block-start-color: blue;
  writing-mode: horizontal-tb;
}

    <h1>안녕하세요</h1>
    <h2>안녕하세요</h2>