CodeGym /자바 코스 /Frontend SELF KO /CSS 변수 사용하기

CSS 변수 사용하기

Frontend SELF KO

레벨 31 , 레슨 1

사용 가능

2.1 CSS 변수 선언하기

CSS 변수는 사용자 정의 속성(Custom Properties)이라고도 불리며, CSS 코드의 다양한 부분에서 재사용할 수 있는 값을 정의할 수 있게 해줘. 스타일 관리를 크게 단순화하고 유연성을 높여줘.

CSS 변수는 더블 대시(--)를 사용하여 선언되며, 어떤 선택자에서도 설정할 수 있어. 하지만 문서 전체에서 변수를 활용할 수 있도록 하기 위해 종종 루트 선택자 :root에 정의해.

문법:

    
      선택자 {
        --변수-이름: 값;
      }

예제:

이 예제에서는 네 가지 변수를 선언했어: --main-bg-color, --main-text-color, --primary-color, and --font-size.

CSS

    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

CSS 변수 사용하기

변수의 값을 사용하기 위해 var() 함수를 사용하며, 이 함수는 변수 이름을 인수로 받아.

문법:

    
      선택자 {
        속성: var(--변수-이름);
      }

예제:

이 예제에서는 변수 값을 사용하여 배경색, 텍스트 색상, 폰트 크기, 링크 색상을 지정해.

CSS

    
      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

2.2 CSS 변수 사용 예제

예제 1: 변수의 기본 사용

CSS

    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

HTML

    
      <body>
        <p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
      </body>

결과:

페이지 배경은 밝은 회색이 될 거야
텍스트는 어두운 회색이 될 거야
폰트 크기는 16픽셀이 될 거야
링크는 파란색이 될 거야

예제 2: 개별 컴포넌트에서 변수 재정의하기

CSS 변수는 개별 요소나 컴포넌트에 대해 재정의할 수 있어서 스타일링에 유연성을 제공해:

CSS

    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
      }

      .header {
        background-color: var(--primary-color);
        color: var(--main-bg-color);
      }

      .footer {
        --primary-color: #e74c3c; /* 변수 재정의 */
        background-color: var(--primary-color);
        color: var(--main-bg-color);
      }

HTML

    
      <div class="header">
        <p>This is the header.</p>
      </div>

      <div class="footer">
        <p>This is the footer.</p>
      </div>

결과:

헤더의 배경은 파란색이고, 텍스트는 밝은 회색이 될 거야
푸터의 배경은 빨간색(재정의된 변수)이고, 텍스트는 밝은 회색이 될 거야

예제 3: 다른 값들과 조합하여 변수 사용하기

CSS 변수는 다른 CSS 값 및 함수와 조합하여 사용할 수 있어:

CSS

    
      :root {
        --padding: 10px;
        --margin: 20px;
      }

      .container {
        padding: var(--padding);
        margin: var(--margin) auto;
        border: 1px solid black;
      }

HTML

    
      <div class="container">
        <p>This is a container with padding and margin.</p>
      </div>

결과:

컨테이너는 변수를 사용하여 설정된 패딩과 마진을 가질 거야

2.3 JavaScript에서 CSS 변수 사용하기

JavaScript에서 CSS 변수 사용 예

CSS 변수는 JavaScript를 사용하여 동적으로 변경할 수 있어, 실시간 스타일 적용을 가능하게 해:

CSS

    
      :root {
        --bg-color: #ffffff;
        --text-color: #000000;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }

HTML

    
      <button id="toggle-theme">Toggle Theme</button>
      <p>This is a paragraph.</p>

JavaScript

    
      document.getElementById('toggle-theme').addEventListener('click', () => {

        const root = document.documentElement;

        if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
          root.style.setProperty('--bg-color', '#333333');
          root.style.setProperty('--text-color', '#ffffff');
        } else {
          root.style.setProperty('--bg-color', '#ffffff');
          root.style.setProperty('--text-color', '#000000');
        }
      });

설명:

버튼을 클릭하면 --bg-color와 --text-color 변수의 값이 변경되어 페이지의 배경색과 텍스트 색상이 바뀌어.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION