icon안동민 개발노트

CSS 변수와 계산식

 CSS 변수(사용자 정의 속성)와 계산식은 CSS를 더 동적이고 유연하게 만들어주는 강력한 기능입니다.

 이 절에서는 이들의 개념, 사용법, 그리고 실제 적용 사례에 대해 알아보겠습니다.

CSS 변수 (사용자 정의 속성)

 CSS 변수는 문서 전체에서 재사용할 수 있는 값을 저장합니다.

 이를 통해 코드의 중복을 줄이고 유지보수성을 높일 수 있습니다.

 선언 방법

 변수는 두 개의 대시(--)로 시작하는 이름으로 선언합니다.

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

 사용법

 var() 함수를 사용하여 변수를 참조합니다.

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

 전역 변수와 지역 변수

  • 전역 변수 : :root 선택자에서 선언되어 문서 전체에서 사용 가능
  • 지역 변수 : 특정 선택자 내에서 선언되어 해당 요소와 그 하위 요소에서만 사용 가능
:root {
    --global-color: blue;
}
 
.local-scope {
    --local-color: red;
    color: var(--local-color); /* red */
}
 
.another-element {
    color: var(--global-color); /* blue */
}

 변수 상속과 재정의

 CSS 변수는 일반적인 CSS 속성처럼 상속됩니다. 하위 요소에서 변수를 재정의할 수 있습니다.

.parent {
    --text-color: blue;
}
 
.child {
    color: var(--text-color); /* blue */
}
 
.special-child {
    --text-color: red;
    color: var(--text-color); /* red */
}

calc() 함수

 calc() 함수는 CSS 내에서 수학적 계산을 수행할 수 있게 해줍니다.

 기본 사용법

.element {
    width: calc(100% - 20px);
}

 변수와 calc() 함수 조합

:root {
    --padding: 20px;
}
 
.container {
    width: calc(100% - (var(--padding) * 2));
}

기타 CSS 함수

 min()과 max()

 두 값 중 작은 값 또는 큰 값을 선택합니다.

.responsive-font {
    font-size: min(5vw, 30px);
}
 
.responsive-width {
    width: max(300px, 50%);
}

 clamp()

 값을 지정된 범위 내로 제한합니다.

.clamped-font {
    font-size: clamp(16px, 4vw, 22px);
}

고급 활용 기법

 테마 변경

 CSS 변수를 활용하여 간단히 테마를 변경할 수 있습니다.

:root {
    --bg-color: white;
    --text-color: black;
}
 
.dark-theme {
    --bg-color: black;
    --text-color: white;
}
 
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

 자바스크립트와 함께 사용

document.body.classList.toggle('dark-theme');

 반응형 디자인

 미디어 쿼리와 CSS 변수를 조합하여 효과적인 반응형 디자인을 구현할 수 있습니다.

:root {
    --container-width: 1200px;
}
 
@media (max-width: 1200px) {
    :root {
        --container-width: 100%;
    }
}
 
.container {
    width: var(--container-width);
}

 복잡한 레이아웃 계산

 CSS 변수와 calc() 함수를 조합하여 복잡한 레이아웃을 구현할 수 있습니다.

:root {
    --sidebar-width: 250px;
    --gutter: 20px;
}
 
.main-content {
    width: calc(100% - var(--sidebar-width) - var(--gutter));
    margin-left: calc(var(--sidebar-width) + var(--gutter));
}

 애니메이션과 결합

 CSS 변수를 애니메이션과 결합하여 동적인 효과를 만들 수 있습니다.

.box {
    --x-position: 0;
    transform: translateX(var(--x-position));
    transition: transform 0.3s ease;
}
 
.box:hover {
    --x-position: 50px;
}

브라우저 지원 및 호환성

 대부분의 현대 브라우저는 CSS 변수와 계산식을 지원합니다.

 그러나 일부 오래된 브라우저에서는 문제가 발생할 수 있습니다.

 폴리필 사용

 CSS 변수에 대한 폴리필을 사용할 수 있습니다.

 예를 들어, cssVars() 라이브러리를 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
<script>
    cssVars({
        // 옵션
    });
</script>

 대체 방법 제공

 변수를 지원하지 않는 브라우저를 위해 대체 값을 제공할 수 있습니다.

.element {
    color: blue; /* 대체 값 */
    color: var(--main-color);
}

 CSS 변수와 계산식은 CSS를 더욱 강력하고 유연하게 만들어줍니다. 이들을 효과적으로 활용하면 코드의 재사용성을 높이고, 유지보수를 용이하게 하며, 동적이고 반응적인 디자인을 쉽게 구현할 수 있습니다.

 변수를 사용하면 전체 웹사이트의 색상 scheme이나 레이아웃을 중앙에서 쉽게 관리할 수 있습니다. 이는 특히 대규모 프로젝트나 디자인 시스템을 구축할 때 매우 유용합니다. 또한, 자바스크립트와 연동하여 사용자 상호작용에 따라 스타일을 동적으로 변경하는 것도 가능합니다.

 calc() 함수와 다른 CSS 함수들은 복잡한 레이아웃 계산을 가능하게 하여, 이전에는 자바스크립트로 처리해야 했던 많은 작업을 CSS만으로 해결할 수 있게 해줍니다. 이는 성능 향상으로 이어질 수 있습니다.

 그러나 이러한 기능들을 사용할 때는 항상 브라우저 호환성을 고려해야 합니다. 가능한 한 폴리필이나 대체 방법을 제공하여 모든 사용자에게 일관된 경험을 제공하는 것이 중요합니다.

 마지막으로, CSS 변수와 계산식은 계속해서 발전하고 있는 분야입니다. 새로운 CSS 속성과 함수가 계속 추가되고 있으므로, 최신 트렌드와 기술을 지속적으로 학습하고 적용하는 것이 중요합니다. 이를 통해 더욱 효율적이고 혁신적인 웹 디자인을 구현할 수 있을 것입니다.

이전으로다음으로