css 변수 , 연산

 

• CSS변수 선언 

     선언식 : --font-color: #fff; or --width: 100px; 와 같이 앞에 두 개의 바가 들어간다.

     변수의 사용 범위 : 변수가 선언된 요소의 하위 트리.

     전역 변수로 사용할 경우 :root{ --font-color: #fff;  } 내에 선언하면 되고,

     지역 변수로 사용할 경우는 사용할 트리의 기준이 되는 상위 요소에 선언.

• CSS변수 사용

        요소{ color: var(--font-color);}

//지역 변수 선언
:root{
	--bg-color:#26ae9a;
    }
    
 //지역 변수 선언
 section2 .outbox{
 	--fnot:'Roboto', sans-serif;
    
    }
    
    
  
// 변수 사용
section1{
	background-color:var(--bg-color:#26ae9a;)
    }
section2{
	background-color:var(--bg-color:#26ae9a;)
    }
 
section2 .outbox > p{
	font-family:var(--fnot); // .outbox 영역 내에서만 사용 가능
    background-color:var(--bg-color:#26ae9a;) //전역 변수 사용 가능
}

• 자바스크립트에서 변수 값 얻기

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--font");

// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--font");

  

• CSS 사칙 연산

     calc() 함수 사용으로 더하기( + ), 빼기 ( - ), 곱하기( * ), 나누기( / ) 를 함.

     *(더하기와 빼기의 연산자는 앞 뒤로 띄어쓰기 반드시 필요)

     width: calc(100% - 20px)는 기준요소의 width 100%에서 20px를 뺀 width를 가짐.

     중첩 사용 가능 : width:  calc(calc( 100%  /  3) - 10px); => 100%가 600px일 경우 190px의 width를 가짐.

 

+유용한 기능

       :scroll-behavior => 페이지 내에서 링크 이동시 자바스크립트 없이 부드러운 이동이 가능함.

        auto, smooth 두 가지의 속성을 가짐, auto는 애니메이션 없는 기본 속성, smooth는 부드러운 애니메이션.

       사용=> :root{ scroll-behavior: smooth;}

        *속도 조절은 안됨.