반응형
css 에서 특별한 기능이 숨겨져 있습니다.
알고 있으면 굉장히 유용한 기능 입니다.
바로 변수를 선언하고 호출 할 수 있습니다.
sass나 scss를 사용 하지 않아도 말입니다.
1. 변수 선언 --(변수명)
-- 대쉬 두개를 쓰고 뒤에 변수명을 붙여줘서 변수를 선언 할 수 있습니다.
--main-background-color: red;
2. 변수 호출 var(변수명)
원하는 css 부분에 변수를 사용 하기 위해서는 var 함수를 호출하고 그 안의 파라미터로 '변수명' 을 넣어 줍니다.
body {
background-color: var(--main-background-color);
}
3. 전역 변수 설정하기
전역 변수는 해당 페이지 안에서 모든 영역에서 해당 변수를 사용 할 수 있습니다.
지역 변수는 해당 하는 스코프 안에서 만 사용 할 수 있습니다.
전역 변수를 선언 하기 위해서는 :root 또는 body 스코프에서 변수를 선언 하면 됩니다.
<html>
<head>
<style>
body{
--main-header-bg-color : red;
--main-div-bg-color : blue;
}
header{
height : 200px;
background: var(--main-header-bg-color);
}
div{
height : 100px;
background: var(--main-div-bg-color);
}
</style>
</head>
<body>
<header></header>
<div></div>
</body>
</html>
4. 지역 변수 설정 하기
지역 변수는 :root 또는 body 스코프를 제외한 해당 태그 안에서 변수를 선언하고 호출 하면 됩니다.
또한 해당 태그 내 에서는 css 의 특성인 Cascading 때문에 자식 태그들에게 해당 변수가 상속 가능 합니다.
<html>
<head>
<style>
header{
--main-header-bg-color : red;
height : 200px;
background: var(--main-header-bg-color);
}
div{
--main-div-bg-color : blue;
height : 100px;
background: var(--main-div-bg-color);
}
</style>
</head>
<body>
<header></header>
<div></div>
</body>
</html>
5. 변수의 default 값 설정 하기
만약 변수 선언을 안해주었거나, 특정 경우에는 default 값을 설정해줘야 할 경우가 있습니다.
그럴 경우 var 함수 안에서 두번째 파라미터에 default 값을 설정해 주시면 됩니다.
var('변수명', 'default 값') 이런식으로 호출해 주시면 됩니다.
<html>
<head>
<style>
div{
height : 100px;
background: var(--main-div-bg-color, red);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6. Cross Browsing
생소한 기능인 만큼 브라우저 호환성을 살펴 봐야겠죠?
Chrome - 49.0 IE - 15.0 Firefox - 31.0 Safari - 9.1 Opera - 36.0
에서 호환 가능 합니다.
반응형
'Publishing' 카테고리의 다른 글
| favicon 설정 (0) | 2020.05.06 |
|---|---|
| 한줄로 말줄이기 in css (0) | 2020.05.04 |
| figure figcaption 태그 (0) | 2020.04.30 |
| input 태그 유효성 검사 (0) | 2020.04.28 |
| input label 태그 연결 (4) | 2020.04.26 |