====== CSS Variables======
<WRAP left notice 80%>
  * description : CSS Variables - The var() Function
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-04
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article=====
[[https://www.w3schools.com/css/css3_variables.asp|CSS Variables - The var() Function]]
\\
''var()'' 함수는 %%CSS%% 변수의 값을 삽입하는 데 사용됩니다.\\
\\
%%CSS%% 변수는 %%DOM%%에 액세스 할 수 있습니다. 즉, 로컬 또는 전역 범위로 변수를 만들고,\\
%%JavaScript%%로 변수를 변경하고, 미디어 쿼리를 기반으로 변수를 변경할 수 있습니다.\\
\\
%%CSS%% 변수를 사용하는 좋은 방법은 디자인의 색상에 관한 것입니다.\\ 
동일한 색상을 반복해서 복사하여 붙여 넣는 대신 변수에 배치할 수 있습니다.\\

=====The Traditional Way=====

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

====Example====
<code 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;
    }
</code>
\\

=====Syntax of the var() Function=====
''var()'' 함수는 %%CSS%% 변수의 값을 삽입하는 데 사용됩니다.\\
\\
''var()'' 함수의 구문은 다음과 같습니다:\\
\\
<code css>
var(name, value)
</code>
\\
^ Value  ^ Description                                           ^
| name   | 필수. 변수 이름은 반드시 2개의 대시로 시작해야 함       |
| value  | 선택. 변수를 찾을 수 없는 경우, 대체값(fallback value)  |
\\
**Note:** 변수 이름은 두 개의 대시 %%(--)%%로 시작해야 하고, 대소문자를 구별합니다.\\
\\

=====How var() Works=====
우선: %%CSS%% 변수는 전역 또는 로컬 범위를 가질 수 있습니다.\\
\\
전역 변수(global scope)는 전체 문서를 통해 액세스/사용할 수 있지만,\\ 
지역 변수(local scope)는 선언된 셀렉터(selector) 내에서만 사용할 수 있습니다.\\
\\
전역 범위를 가지는 변수를 만들려면, ''%%:root%%'' 셀렉터 내에서 선언하십시오.\\ 
''%%:root%%'' 셀렉터는 문서의 루트 요소와 일치합니다.\\
\\
로컬 범위를 가지는 변수를 만들려면, 사용할 셀렉터 내에서 선언하십시오.\\
\\
다음 예제는 위의 예제와 동일하지만, ''%%var()%%'' 함수를 사용합니다.\\
\\
먼저, 두 개의 전역 변수%%(--blue 와 --white)%%를 선언합니다.\\ 
그런 다음 ''%%var()%%'' 함수를 사용하여 나중에 스타일 시트에 변수 값을 삽입합니다.\\

====Example====
<code css>
    :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;
    }
</code>
\\
%%var()%% 사용의 장점은 다음과 같습니다.\\

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

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

====Example====
<code css>
    :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;
    }
</code>
\\
=====CSS var() Function=====
^ Property      ^ Description                          ^
| %%var()%%     | %%CSS%% 변수의 값을 삽입합니다.       |
































{{tag>오션, CSS Variables var() function}}