CSS - 7 [Colors, Variables]

CSS에서 알아야할 colors system 3가지

 

1. color 이름

이런식으로 color의 이름을 그대로 css에 넣는 방식이 있다.

- 이방식은 사람들이 직접 색에 이름을 지었다

 

2. hexadecimal code (16진 코드)

이렇게 16진수 법으로 색을 표현하는 형식이다.

- 디자이너들이 color point(크롬 확장프로그램등)종류의 프로그램으로 

색을 따와서 넣는경우 컬러코드가 복사된것을 넣을 수 있다.

 

3. rgb

rgb 형식으로 컬러를 표현 가능하다. 

- rgb에는 투명도 조절도 가능하다. 정확히 말하면 rgba에서 가능하다.

- rgba(색, 색, 색, 투명도)

 

테마를 선정하여 같은 색을 element에 여러 번 많이 사용할때

색깔을 한번만 수정해서 다양한 element의 색을 한번에 바꾸자

 

:root{

}

- 위 문장은 모든 document에서 설정이 된다.

custom property

- 색을 변수로 지정해두면 다양한 곳에 사용되는 한색을 쉽게 바꿀수 있다.

- 변수이름은

'--name-name1-name2'

이런식으로 '--이름-이름1-이름2' 이런식으로 지어주어야한다.

- 비단 색에만 한정되는 것은 아니다.

'--main-border: 1px solid var(--main-color)'

이렇게 설정하고

 

p{

    border: var(--main-border)

}

을 설정해주면 적용이된다.