1. What are CSS varaiables?

 

자주 쓰는 색상같은것을 미리 CSS변수로 정해서 사용할려고 함.

CSS Variables == Custom Properties 라고 함.

--my-property: value;     --를 앞에 붙여서 만듬

 

https://github.com/iamshaunjp/CSS-Variables

 

 

2. Declaring Variables

태그안에 선언하면 그 안에만 적용?

전체에 적용할려면..

:root{}

 

:root{

  --theme-color: #3e84da;

  --link-color: #daa33e;

}

사용은

background: var(--theme-color);

color: var(--theme-color);

color: var(--link-color);

 

 

 

3. CSS Varable Benefis

 

--layout: 1fr 1fr 1fr;  으로 설정하고 아래와 같이 처리하면.. Responsive 처리가 가능함.

@media screen and (max-width: 760px){

  :root{

    --layout: 1fr;

  }

}

내비게이션 파트만 오버라이드..

nav{

  --link-color: #000;

}

 

 

4. CSS Variables & javascript

 

테마(색상) 선택을 변수와 Javascript로..