3.1 사용자 정의 속성
CSS 변수, 즉 사용자 정의 속성은 웹 개발에서 스타일을 관리하는 강력한 도구야. 이걸 사용하면 코드의 성능과 조직을 향상시키고 CSS의 지원과 유연성을 개선할 수 있어. 사용자 정의 속성과 상속이 이런 측면들에 어떻게 영향을 미치는지 자세히 알아보자.
사용자 정의 속성이란?
사용자 정의 속성(CSS 변수라고도 함)은 CSS에서 설정한 다음 스타일 파일 전반에 걸쳐 여러 번 사용할 수 있는 값이야. 이들은 이중 대시(--)를 사용하여 선언되고 var() 함수로 사용할 수 있지.
사용자 정의 속성 선언:
:root {
--main-color: #3498db;
--padding: 10px;
}
사용자 정의 속성 사용:
background-color: var(--main-color);
padding: var(--padding);
3.2 성능에 미치는 영향
1. 재사용 최적화
CSS 변수를 사용하면 동일한 값을 여러 번 사용할 수 있기 때문에 코드 중복을 피할 수 있어. 이는 코드 양을 줄이고 유지보수를 쉽게 해주지.
예시:
:root {
--main-color: #3498db;
}
.header {
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
2. 캐싱 및 렌더링
브라우저는 CSS 변수를 효율적으로 캐싱하고 처리할 수 있어, 이는 성능에 긍정적인 영향을 줄 수 있단다. 변수 값이 변경될 경우 브라우저는 스타일을 한 번만 재계산하면 되기 때문에 렌더링 부담을 줄일 수 있지.
3. 동적 업데이트
CSS 변수는 JavaScript를 통해 동적으로 변경될 수 있어서, 전체 페이지 재계산 없이 스타일을 업데이트할 수 있어.
예시:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
3.3 코드 조직에 미치는 영향
중앙 집중식 스타일 관리
CSS 변수를 한 곳에 정의함으로써 스타일을 중앙에서 관리할 수 있어, 이는 유지보수와 변경을 쉽게 해주지.
예시
:root에서 변수 값을 변경하면 문서 전체에서 연결된 스타일이 자동으로 업데이트돼:
:root {
--font-size: 16px;
--line-height: 1.5;
}
body {
font-size: var(--font-size);
line-height: var(--line-height);
}
상속과 컨텍스트
CSS 변수는 부모 요소로부터 자식 요소에게 상속돼. 이는 상위 레벨에서 값을 설정하고 더 구체적인 컨텍스트에서 사용할 수 있게 해주지.
예시:
:root {
--base-font-size: 16px;
}
.container {
font-size: var(--base-font-size);
}
.container .heading {
font-size: calc(var(--base-font-size) * 1.5);
}
가독성 향상
CSS 변수를 사용하면 코드의 가독성이 향상돼, 변수는 그 기능에 맞게 이름을 지을 수 있어 코드가 더 이해하기 쉬워져.
예시:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.primary-button {
background-color: var(--primary-color);
}
.secondary-button {
background-color: var(--secondary-color);
}
로컬 및 글로벌 변수
변수는 (:root 등) 글로벌 레벨에서도, 특정 셀렉터에 대해 로컬로도 선언될 수 있어. 이는 유연하고 적응력이 있는 스타일을 생성할 수 있게 해주지.
예시:
:root {
--global-padding: 10px;
}
.section {
--section-padding: 20px;
padding: var(--section-padding);
}
.item {
padding: var(--global-padding);
}
3.4 완전한 구현 예시
이제 상속과 로컬 재정의를 위해 변수를 사용하는 방법의 예시야:
:root {
--main-padding: 10px;
--main-margin: 20px;
--primary-color: #3498db;
}
.container {
padding: var(--main-padding);
margin: var(--main-margin);
}
.container .header {
--primary-color: #e74c3c; /* 로컬 사용을 위해 변수 재정의 */
color: var(--primary-color);
}
.container .content {
color: var(--primary-color); /* 루트에서 변수 값을 사용 */
}
<div class="container">
<div class="header">This is the header</div>
<div class="content">This is the content</div>
</div>
설명:
- 이 예시에서
--primary-color는.content요소의 텍스트 스타일에 사용되며, 루트에서 값을 상속받아 사용해 .header요소에서는--primary-color변수가 재정의되어 새로운 값이 사용돼
GO TO FULL VERSION