[HTML&CSS] Colors , Variables

 

 

 

 

 

[HTML&CSS] Colors , Variables

( UPDATE 2023 - 05 - 30 )

 

 

 

---

Colors

---

 

 

 

색상 체계 (color system)

 

 

 

1)

hexadecimal color

(16진수 컬러)

#2ecc71와 같은 색상 코드

 

 

 

 

 

2)

rgb

(디자이너들이 많이 씀)

각각 red, green, blue를 의미.

rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200이라고 이해할 수 있다.

 

 

 

 

3)

rgba

rgb와 동일하지만 a가 포함된 형태.

'a(alpha)'는 투명도를 의미

0(투명)~1(불투명) 사이의 값으로 조절할 수 있다.

 

 

 

 

 

---

Variables (=custom property)

---

 

 

 

 

variables (=custom property)

css를 프로그래밍언어처럼 보이게 한다.

전에는 일일이 다 반복작업에 대한 걸 수행해야 했다면,

Variable(변수)를 사용해서 작업량을 줄여줄 수 있다.

mozilla 문서에 따르면, variable은 IE를 제외하고 다 이용 가능하다.

 

 

---

예를 들면,

 

div {color: #2ecc71}

p {color: #2ecc71}

상태에서, 둘 모두의 색을 바꾸고 싶다면 우리는 div와 p의 색상 코드를 지우고, 또 다시 입력해야 한다.

그러나 variable을 이용하면 더 간단해진다.

---

 

 

:root

저장하고 싶은 속성을 작성

:root 라는 엘리먼트에 변수를 추가하는 것.

:root는 기본적으로 모든 document의 뿌리가 된다.

 

 

 

 

 

---

Variable(변수) 작성하는 방법

---

 

 

 

1) 색상

 

:root {

--main-color:#ff0000;

}

a {

color:var(--main-color);

}

 

 

 

 

 

2) 기본 디폴트 박스 설정

 

 

:root {

--default-border:1px solid var(--main-color);

}

.a {

border:var(--default-border);

}

 

 

 

 

---

출처

---

 

노마드 코더 코코아톡 클론코딩