CSS 변수(사용자 지정 속성)는 스타일 시트에서 재사용 가능한 값을 정의하는 데 사용되는 변수입니다. 이 변수들은 웹 사이트나 웹 앱 전체에서 일관된 디자인 및 스타일을 유지하는 데 도움이 됩니다. 예를 들어, 색상, 글꼴, 여백 등과 같은 스타일 속성에 대한 값들을 변수로 정의하여 여러 곳에서 사용할 수 있습니다. 이렇게 하면 스타일을 일관되게 유지하고 변경할 때 유연성을 제공할 수 있습니다. CSS 변수는 --로 시작하며, var() 함수를 사용하여 값을 참조합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 사용자 지정 속성 예제</title>
<style>
/* 사용자 지정 속성 정의 */
:root {
--main-color: blue;
}
/* 사용자 지정 속성 사용 */
h1 {
color: var(--main-color);
}
p {
font-size: var(--text-size, 16px); /* 기본값 지정 가능 */
}
/* 클래스를 이용한 사용자 지정 속성 정의 및 사용 */
.custom-bg {
--background-color: pink;
}
div {
background-color: var(--background-color);
padding: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
<p>이것은 사용자 지정 속성을 사용한 예제입니다.</p>
<div>이 div는 기본 배경색을 가집니다.</div>
<div class="custom-bg">이 div는 사용자 정의 배경색을 가집니다.</div>
</body>
</html>
":root"는 CSS에서 변수를 정의하는 데 사용되는 특별한 선택자입니다. 이 선택자는 HTML 문서의 최상위 요소를 나타내며, 보통 <html> 요소를 가리킵니다.
":root" 선택자를 사용하여 CSS 변수를 선언할 때, 해당 변수는 전역적으로 사용할 수 있습니다. 이는 해당 CSS 파일 내에서 어디에서나 변수를 사용할 수 있고, 필요에 따라 동적으로 값을 변경할 수 있다는 장점을 제공합니다.
예를 들어, 아래와 같이 ":root" 선택자를 사용하여 변수를 정의할 수 있습니다:
:root {
--main-color: #ff0000;
--secondary-color: #00ff00;
}
그 후에는 다른 요소에서 이러한 변수를 사용하여 색상을 지정할 수 있습니다:
.element {
color: var(--main-color);
background-color: var(--secondary-color);
}
이렇게 하면 CSS 코드를 더욱 유연하게 만들고, 일관성 있는 디자인을 유지하는 데 도움이 됩니다.
css/style.css