CSS Variables - The var() Function
var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.

CSS 변수는 DOM에 액세스 할 수 있습니다. 즉, 로컬 또는 전역 범위로 변수를 만들고,
JavaScript로 변수를 변경하고, 미디어 쿼리를 기반으로 변수를 변경할 수 있습니다.

CSS 변수를 사용하는 좋은 방법은 디자인의 색상에 관한 것입니다.
동일한 색상을 반복해서 복사하여 붙여 넣는 대신 변수에 배치할 수 있습니다.

다음 예제는 스타일 시트에서 일부 색상을 정의하는 전통적인 방법을 보여줍니다
(각 특정 요소에 대해 사용할 색상을 정의하여).

    body {
      background-color: #1e90ff;
    }
 
    h2 {
      border-bottom: 2px solid #1e90ff;
    }
 
    .container {
      color: #1e90ff;
      background-color: #ffffff;
      padding: 15px;
    }
 
    button {
      background-color: #ffffff;
      color: #1e90ff;
      border: 1px solid #1e90ff;
      padding: 5px;
    }

var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.

var() 함수의 구문은 다음과 같습니다:

var(name, value)

Note: 변수 이름은 두 개의 대시 (--)로 시작해야 하고, 대소문자를 구별합니다.

우선: CSS 변수는 전역 또는 로컬 범위를 가질 수 있습니다.

전역 변수(global scope)는 전체 문서를 통해 액세스/사용할 수 있지만,
지역 변수(local scope)는 선언된 셀렉터(selector) 내에서만 사용할 수 있습니다.

전역 범위를 가지는 변수를 만들려면, :root 셀렉터 내에서 선언하십시오.
:root 셀렉터는 문서의 루트 요소와 일치합니다.

로컬 범위를 가지는 변수를 만들려면, 사용할 셀렉터 내에서 선언하십시오.

다음 예제는 위의 예제와 동일하지만, var() 함수를 사용합니다.

먼저, 두 개의 전역 변수(--blue 와 --white)를 선언합니다.
그런 다음 var() 함수를 사용하여 나중에 스타일 시트에 변수 값을 삽입합니다.

    :root {
      /* Global variables */
      --blue: #1e90ff;
      --white: #ffffff;
    }
 
    body {
      background-color: var(--blue);
    }
 
    h2 {
      border-bottom: 2px solid var(--blue);
    }
 
    .container {
      color: var(--blue);
      background-color: var(--white);
      padding: 15px;
    }
 
    button {
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }

var() 사용의 장점은 다음과 같습니다.

• 코드를 읽기 쉽게 (더 이해하기 쉽게) 만듭니다.
• 색상 값을 더 쉽게 변경할 수 있습니다.

파란색과 흰색을 더 부드러운 파란색과 흰색으로 변경하려면, 두 가지 변수 값만 변경하면 됩니다.

    :root {
      /* Global variables */
      --blue: #6495ed;
      --white: #faf0e6;
    }
 
    body {
      background-color: var(--blue);
    }
 
    h2 {
      border-bottom: 2px solid var(--blue);
    }
 
    .container {
      color: var(--blue);
      background-color: var(--white);
      padding: 15px;
    }
 
    button {
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }