====== CSS Variables======
<WRAP left notice 80%>
  * description : CSS Variables - Overriding Variables
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-04
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article=====
[[https://www.w3schools.com/css/css3_variables_overriding.asp|CSS Variables - Overriding Variables]]
\\
=====Overriding Global Variables With Local Variables=====
이전 페이지(Overriding Variables)에서, 전역 변수는 전체 문서를 통해 액세스/사용할 수 있는 반면,\\ 
로컬 변수는 선언된 셀렉터 내에서만 사용할 수 있음을 배웠습니다.\\

이전 페이지(Overriding Variables)의 예제를 살펴보겠습니다.\\

<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>
\\
때로는 페이지의 특정 섹션(section)에서만 변수가 변경되기를 원합니다.\\
\\
버튼 요소에 대해 다른 색상(crimson)을 원한다고 가정합니다.\\ 
그런 다음 버튼 셀렉터 내에서 %%--blue%% 변수를 다시 선언할 수 있습니다.\\ 
이 셀렉터 내부에서 %%var(-blue)%%를 사용하면, 여기에 선언된 로컬 %%--blue%% 변수값이 사용됩니다.\\
\\
로컬 %%--blue%% 변수가 버튼 요소에 대한 전역 %%--blue%% 변수를 중단하는(override) 것을 볼 수 있습니다.\\

====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);  // override global variable with local variable
      background-color: var(--white);
      padding: 15px;
    }

    button {
      --blue: crimson;
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }
</code>
\\

=====Add a New Local Variable=====
변수가 한 곳에서만 사용되는 경우, 다음과 같이 새 지역 변수를 선언할 수도 있습니다.\\

====Example====
<code css>
  <style>
    :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 {
      --button-green: green;  /* declare new local variable */
      background-color: var(--white);
      color: var(--button-green); /* new local variable */
      border: 1px solid var(--button-green);  /* new local variable */
      padding: 5px;
    }
</code>
\\
=====CSS var() Function=====
^ Property  ^ Description          ^
| var()     | %%CSS%% 변수값을 삽입합니다.  |





























{{tag>오션, CSS Variables Overriding Variables}}