CSS 변수 – 스타일시트 간소화

강의 17: CSS 변수 – 스타일시트 간소화

이번 강의에서는 CSS 변수(사용자 정의 속성이라고도 함)에 대해 알아보고 이 변수가 스타일시트 전체에서 값을 재사용할 수 있게 하여 코드를 단순화하는 방법을 알아봅니다.

1. CSS 변수란 무엇입니까?

CSS 변수를 사용하면 색상, 글꼴 크기, 간격 등의 값을 중앙 위치에 저장하고 스타일시트 전체에서 재사용할 수 있습니다. 전체 스타일시트를 검색하는 대신 한 곳에서 값을 쉽게 업데이트할 수 있으므로 코드 유지 관리가 더욱 쉬워집니다.

CSS 변수는 -- 접두사로 정의되며 var() 함수를 사용하여 액세스할 수 있습니다.

2. CSS 변수 정의

CSS 변수는 일반적으로 문서의 최상위 수준을 나타내는 :root 선택기에 정의됩니다.

예:

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

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
}

이 예에서는:

• 맞춤 변수로 --primary-color, --secondary-color 및 --font-size를 정의합니다.
• 이러한 변수는 var() 함수를 통해 body 및 h1 스타일에 사용됩니다.

3. CSS 변수 사용의 이점

• 재사용성: 스타일시트 전체에서 동일한 값을 재사용하여 코드 중복을 줄일 수 있습니다.
• 유지관리성: 색상이나 글꼴 크기를 변경해야 하는 경우 변수 값을 한 곳에서 업데이트하기만 하면 됩니다.
• 동적 업데이트: CSS 변수는 JavaScript를 사용하여 동적으로 업데이트할 수 있으므로 대화형 디자인을 만드는 데 더 많은 유연성을 제공합니다.

4. CSS 변수 재정의

특정 선택기 내에서 CSS 변수를 재정의하여 상황별 값을 제공할 수 있습니다.

예:

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

.dark-mode {
    --primary-color: #34495e;
}

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

이 예에서는 .dark-mode 클래스가 적용될 때 --primary-color가 재정의됩니다. 이를 통해 다양한 색 구성표(예: 밝은 모드와 어두운 모드) 간에 쉽게 전환할 수 있습니다.

5. 미디어 쿼리에 변수 사용

CSS 변수는 미디어 쿼리와 잘 작동하므로 화면 크기에 따라 값을 조정할 수 있습니다.

예:

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

이 예에서는 작은 화면에서 --font-size 변수가 줄어들어 모바일 장치에서 텍스트를 더 쉽게 읽을 수 있습니다.

6. CSS 변수의 대체 값

변수가 브라우저에서 정의되지 않거나 지원되지 않는 경우 CSS 변수에 대한 대체 값을 제공할 수 있습니다.

예:

body {
    font-size: var(--font-size, 18px);
}

여기서 --font-size가 정의되지 않으면 브라우저는 기본적으로 18px로 설정됩니다.

7. 변수와 자바스크립트

CSS 변수의 가장 강력한 측면 중 하나는 JavaScript를 사용하여 변수를 조작할 수 있어 동적이고 대화형 스타일을 만들 수 있다는 것입니다.

예:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

이 예에서는 페이지 스타일을 동적으로 변경하는 JavaScript를 사용하여 --primary-color 변수가 새로운 색상(#e74c3c)으로 업데이트됩니다.

8. 실제 사용 사례

• 테마: CSS 변수를 사용하여 웹사이트에 밝은 테마와 어두운 테마를 만듭니다.
• 디자인 시스템: 색상, 간격, 타이포그래피에 대한 변수를 사용하여 일관된 디자인 시스템을 구축하세요.
• 동적 상호작용: CSS 변수와 JavaScript를 사용하여 실시간으로 스타일을 업데이트하는 대화형 요소를 만듭니다.

결론

CSS 변수는 스타일을 관리하고, 코드 유지 관리를 개선하고, 동적 업데이트를 활성화하는 유연한 방법을 제공합니다. CSS 변수를 작업 흐름에 통합하면 개발 프로세스를 간소화하고 유지 관리 및 확장이 더욱 용이한 스타일시트를 만들 수 있습니다.

---

링크드인에서 나를 팔로우하세요

리도이 하산

위 내용은 CSS 변수 – 스타일시트 간소화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!