CodeGym /자바 코스 /Frontend SELF KO /CSS 변수

CSS 변수

Frontend SELF KO

레벨 13 , 레슨 4

사용 가능

10.1 변수 선언

CSS 변수(또는 사용자 정의 속성(CSS Custom Properties))는 개발자들이 값들을 한 곳에 저장하고 문서 내에서 재사용할 수 있게 해줘. 이 기능은 특히 큰 프로젝트에서 CSS를 더 유연하고 관리하기 쉽게 만들어줘.

변수 선언

CSS에서 변수는 변수가 선언될 때 두 개의 대시 (--)로 시작해. 일반적으로 이 변수들은 :root 선택자 안에 선언돼서 문서 전체에서 사용할 수 있어.

구문:

    
      :root {
        --변수-이름: 값;
        --변수-이름: 값;
      }

예:

이 예에서는 세 개의 변수를 선언했어: --main-color, --secondary-color, 그리고 --font-size.

    
      :root {
        --main-color: #3498db;
        --secondary-color: #2ecc71;
        --font-size: 16px;
      }

10.2 변수 사용

변수를 사용할 때는 var() 함수를 사용해, 이 함수는 변수 이름을 인수로 받아.

구문:

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

예:

이 예에서는 이전에 선언된 변수를 사용하여 <body> 요소의 배경, 텍스트 색상 및 글꼴 크기를 스타일링 해.

CSS

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

10.3 변수의 상속 및 재정의

CSS 변수는 요소의 계층 구조를 따라 상속돼. 즉, 한 요소에 선언된 변수를 그의 자식 요소들도 사용할 수 있다는 거야. 변수들은 다른 선택자 내에서 다시 정의할 수도 있어.

예:

이 예에서 .header 요소는 --main-color 변수를 재정의 하고, 이 새로운 변수는 단지 이 요소에만 적용돼. 동시에, .footer 요소는 :root에 선언된 변수 값을 사용해.

HTML

    
      <div class="header">Header</div>
      <div class="footer">Footer</div>

CSS

    
      :root {
        --main-color: #3498db;
      }

      .header {
        --main-color: #e74c3c;
        background-color: var(--main-color);
      }

      .footer {
        background-color: var(--main-color);
      }

10.4 CSS 변수 사용의 장점

1. 스타일 관리 간소화:

변수들을 사용하면 한 위치에서 하나의 속성 값을 변경할 수 있고, 이 변경은 변수가 사용된 모든 장소에 자동으로 적용돼. 이는 특히 테마화 및 일관된 스타일 유지에 유용해.

2. 코드 가독성 및 유지보수 향상:

변수를 사용하면 CSS 코드가 더 읽기 쉽고 이해하기 쉬워져. 왜냐하면 색상이나 크기 같은 값을 설명하는 데 사용할 수 있기 때문이야, 예를 들어 색상 이름을 사용해 의미 있는 이름으로 만들 수 있어 (--main-color 대신에 #3498db).

3. 스타일의 동적 업데이트:

변수들은 JavaScript를 통해 동적으로 변경될 수 있어서 더 인터랙티브하고 동적인 사용자 인터페이스를 만들 수 있어.

이전 이전 레슨

다음 다음 레슨

코멘트

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