[CSS] 사용자 지정 속성(변수) var() 함수
by mini_min[CSS] 사용자 지정 속성(변수) var() 함수
✔️ 사용자 지정 속성(변수)
: CSS 저작자가 정의하는 객체이다!
: 전용 표기법을 사용해 정의하고, var() 함수를 이용해 접근할 수 있다!!
: 사용자 지정 속성은 종속 대상이며, 부모로부터 상속한다.
📓 var() 함수
: 이 함수는 속성 이름, 선택자 또는 속성 값 이외의 다른 항목에서 사용할 수 없다!
: 주어진 변수가 아직 정의되지 않았을 때, var() 를 이용하여 여러 개의 대체 변수를 정의할 수 있다!
💡예시: --main-color:black;
color:var(--main-color)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*사용자 지정 속성(변수)*/
/*:root - 문서 트리의 루트를 나타냄. HTML 문서 어디에서나 지정 속성 접근 가능*/
:root { --div-color : blue; }
div { color: var(--div-color);}
/*var() 함수를 이용하여 사용자 정의 변수에 접근*/
</style>
</head>
<body>
<h3> 사용자 지정 CSS 속성(변수) </h3>
<div> 사용자 지정 CSS 속성 예제 입니다. </div>
</body>
</html>
'HTML' 카테고리의 다른 글
| [CSS] white-space / letter-spacing / word-space / word-break / 대소문자 (0) | 2022.09.15 |
|---|---|
| [CSS] 텍스트 관련 스타일 (font) / 웹 폰트 가져오기 (0) | 2022.09.15 |
| [CSS] 가상 요소 (Pseudo-elements) / ::after, ::before (0) | 2022.09.14 |
| [CSS] 가상 클래스 (Pseudo-classes) (0) | 2022.09.14 |
| [CSS] 결합자 (Combinator) : 인접 형제 / 일반 형제 / 자식 / 후손 (0) | 2022.09.14 |
블로그의 정보
개발자 미니민의 개발로그
mini_min