728x90
CSS 변수(variable) 사용
CSS 코드의 가독성과 유지보수를 위해서는
변수의 사용을 권장한다.
변수의 선언은 어디서나 가능한데
변수의 선언은 원하는 변수 이름 앞에 -- 를 붙여주면 된다.
변수의 사용은 var 함수를 통해 가능하다.
변수의 선언과 사용
//변수 선언 예
--background-color : blue;
//변수의 사용 예
background : var(--background-color);하지만 하단의 예시와 같이
변수의 선언을 셀렉터 스코프 안에서 선언한다면,
다른 언어의 지역변수의 기능과 비슷하게
해당 엘리먼트에서 밖에 변수를 사용할수 없다.
셀렉터 내 변수의 선언과 사용
.selector {
//변수의 선언
--background-color : orange;
//변수의 사용
background-color: var(--background-color);
}
그래서 변수를 사용할때는 아래와같이
전역적으로 사용할수 있도록 :root 스코프 안쪽에
변수를 선언하고 모든 엘리먼트 셀렉터 스코프에서 사용한다.
전역변수 선언 및 사용
:root {
/*color*/
--background-color : orange;
/*size*/
--block-space : 30px;
--font-size : 18px;
}
샘플 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Variable</title>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>:root {
/*color*/
--box-color-blue : royalblue;
--box-color-green : lightgreen;
/*size*/
--box-size : 100px;
--box-topspace : 30px;
}
.box1 {
background : var(--box-color-blue);
width : var(--box-size);
height: var(--box-size);
margin-top : var(--box-topspace);
}
.box2 {
background : var(--box-color-green);
width : var(--box-size);
height: var(--box-size);
margin-top : var(--box-topspace);
}
출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 마우스 오버 이벤트 hover (0) | 2021.03.20 |
|---|---|
| [CSS] 짝수/홀수 번째 태그에만 style 효과 주기 (0) | 2021.03.20 |
| [CSS] Transition 애니메니션 효과 property duration timing-function (0) | 2021.03.05 |
| [CSS] Background 속성 (0) | 2021.03.04 |
| [CSS] transform - Translate 수평, 수직 정렬 (0) | 2021.03.04 |
댓글