CSS에서도 변수를 사용할 수 있다는 사실을 알고 있는가? 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
:root {
--main-color: #489ee3;
--default-border: 1px solid var(--main-color);
}
body {
height: 1000vh;
margin: 50px;
}
p {
background-color: var(--main-color);
}
a {
color: var(--main-color);
border: var(--default-border);
}
</style>
</head>
<body>
<p>Life's not all gloom and despondency.</p>
<div>
<a href="#">website</a>
</div>
</body>
</html>여기서 --main-color이 변수다. CSS에서 변수를 쓰는 방법은 --를 먼저 써주고 변수이름을 써줘야 한다. 그리고 빈 공간이 있다면 -로 채워야한다. 따라서 --main-color라고 변수를 써준 것이다. 그리고 이 변수를 사용하려면 var(변수명)을 써주면 된다. 결과를 확인해보자.
p태그와 a태그에 스타일이 적용되어 색이 바뀌었음을 확인할 수 있다!
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #20.Tranformations (0) | 2022.01.15 |
|---|---|
| [HTML/CSS] #19.Transitions (0) | 2022.01.14 |
| [HTML/CSS] #17.Pseudo Selector2 (0) | 2022.01.14 |
| [HTML/CSS] #16.States (0) | 2022.01.11 |
| [HTML/CSS] #15.attribute selector (0) | 2022.01.10 |
