CSS변수선언
By Sera on
변수는 대소문자를 구분하며 변수값은 하위 요소에 상속된다. CSS에서 변수를 선언할 때는 :root라는 가상선택자를 최상위 엘리먼트에 선언하여 모든 요소에서 변수를 사용할 수 있도록 한다.(대표적으로 부트스트랩) 각 요소에 변수를 지정해도 상관은 없지만, 굳이 변수를 사용하는 이유가 없어보인다. 변수에는 css 값이 아닌, 순수한 데이터 값을 넣어 사용한다.
1.변수 선언
:root{ /* 어디서나 읽을 수 있도록 함 */
--pink: pink; /* 변수명: 값; */
--red:; /*오류*/
--blue: ; /*공백이 있으니 변수 선언*/
--gray: #ccc;
--yellow: yellow;
--green: green;
--font: 20;
}
.variable{
background-color:var(--gray); /* 속성 : var(--변수명); */
}
.Q1{
padding:30px;
background: var(--pink, hotpink); /* 속성: var(--변수명, default 값); */
color: var(--green, var(--gray, var(--yellow, yellow))); /*default값도 변수로 삽입 가능하다.*/
}
.Q2{
background-color: red; /*css 변수를 지원하지 않는 브라우저(ex. 익스플로러)에서 적용 */
background-color: var(--yellow, orange); /* 변수 값(yellow)이 지정되지 않은 경우 default값인 orange */
}
.Q3{
background-color: green;
background-color: var(--font, orange);
/*
font: 20이니, background-color:20;이 되어버린다.
이처럼 올바르지 않은 값이 들어갈 경우 속성의 default 값으로 돌아간다. (background-color: transparent)
--font 뒤의 orange는 변수 값이 없을 때의 대체용 값이다.
지금은 변수 값이 있지만, 속성에 맞는 값이 아닌 경우이므로 해당이 없다.
*/
}
Q1. CSS 변수 사용하기
Q2. CSS 변수를 적용할 수 없을 때 방어코드
익스플로러에서는 red, 그 외의 브라우저는 yellow
Q3. 오류 : 배경이 투명함
2.활용하기
:root{
--img: url("/assets/images/7.jpg");
--color2: green;
--color2: var(--color2); /*color2는 "var(--color2)"의 값을 가진다*/
--size: 8em;
}
.Q4{
background: var(--img);
}
.Q5{
height: var(--size);
}
.Q6{
height: calc(var(--size) + 1em);
}
.Q7{
background: blue;
background: var(--color2, orange);
}
Q4. 배경에 이미지 넣어보자
Q5. height : 8em
Q6. height : 8em + 1em
Q7. 변수 재정립
Explore more like this
브라우저에서 사용할 수 있는 사이즈는 뭐가 있을까?
2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고,...
메타 태그에 대해 알아보자
검색 엔진 마케팅을 위해 필요한 것은? 바로 메타 태그이다. 그 외에도 웹페이지의 올바른 메타 태그로 인해 문서의 대략적인 내용을 알 수가 있으니 이보다 중요한 것은 없다. 메타 태그의 종류는 다양하지만,...