CSS에서 변수를 지정할 때는 변수 맨 앞에 --를 붙여야 한다.
변수를 호출할 때는 var(변수명)의 방식을 사용한다.
<html />
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="item">3</div>
<css />
.container {
--lightgray: #f5f5f5;
width: 400px;
height: 400px;
border: 2px solid orange;
background-color: var(--lightgray);
}
.item {
font-size: 50px;
width: 150px;
height: 150px;
border: 2px solid red;
background-color: var(--lightgray);
}
CSS에서 변수의 유효범위는 변수가 선언된 요소 자신부터 그 요소의 후손 요소까지이다.
전역적으로 사용하기 위해서 html에 변수를 선언하는 경우가 많다.
'카카오테크캠퍼스 > 선택과정' 카테고리의 다른 글
| [카카오테크캠퍼스 선택과정] 애플 예제: 애니메이션 (0) | 2023.05.17 |
|---|---|
| [카카오테크캠퍼스 선택과정] 애플 예제: Sprite Image (0) | 2023.05.16 |
| [카카오테크캠퍼스 선택과정] 애플 예제: Hero 콘텐츠 (0) | 2023.05.14 |
| [카카오테크캠퍼스 선택과정] 애플 예제: 내비게이션 (0) | 2023.05.13 |
| [카카오테크캠퍼스 선택과정] 애플 예제: 검색 바 (0) | 2023.05.13 |
