[CSS]#2 Colors and Variables

<색상과 변수>

 

CSS에서 알아야할 컬러 시스템은 3가지 정도 

1. hexadecimal color (16진수 컬러)

2. rgb(red, green, blue)

3. rgba( rea, green, blue , alpha*투명도)

참고: alpha*투명도 의 표기법은( 0.0 ~ 1 )으로 0.5는 50%의 투명도를 말하는 것이고 

0을 하면 제로니까 아예 안보이는 것 1은 100%니까 원색이 보입니다. 

 

*chrome확장 프로그램 중에 [color picker] 라는 프로그램을 설치하면 화면상의 색을 추출할 수 있습니다. 

 

:root 라 불리는 엘리먼트에 변수를 추가해보자

:root는 기본적으로 모든 document의 뿌리가 될 것이다. like starting point

:root 에 --main-color라는 변수 선언

변수명: --main-color로 잡고 document의 root에 저장하는 것

이렇게 변수를 지정하고 나면 기존에 일일이 색상값을 개별로 주던 것을 

var(--main-color); 로 하면 색상값을 변경할 일이 생겼을 때 root에서 변경해주면 된다!

우리가 변수(variable)라고 부르는 것은 custom property 와 같은 말이다.

->원래는 custom property라고 부른다고 하네요. 

CSS변수 공식명칭: CSS custom properties

 

변수명 작성법(선언?) : 2 dashes + dash + 변수이름 (중간에 1개의 dash는 단어와 단어를 구분할 때 써주는 것 공백허용이 안되기 때문에)

e.g.) --color-link:red;

변수를 사용할 때: var(변수명); 

e.g.)  var(--color-link);

 

아래는 활용ver 

--default-border 변수 선언

선언할 때 미리 선언한 변수를 갖다가 적용할 수 있다.

 

어떤 브라우저에서 작동되는 지 확실하게 알고싶다면 

css custom properites 를 검색해서 check!

->참고로 인터넷 익스플로러(IE)를 제외하면 다 가능하다.