====== CSS Variables - Variables in Media Queries======
* description : CSS Using Variables in Media Queries
* author : 오션
* email : shlim@repia.com
* lastupdate : 2021-05-04
\\
=====Source of the article=====
[[https://www.w3schools.com/css/css3_variables_mediaqueries.asp|CSS Variables - Variables in Media Queries]]
=====Using Variables in Media Queries=====
이제 미디어 쿼리 내에서 변수값을 변경하려고 합니다.\\
\\
**Tip:** 미디어 쿼리는 다양한 장치 (스크린, 태블릿, 휴대폰 등)에 대해 다양한 스타일 규칙을 정의하는 것입니다.\\
[[https://www.w3schools.com/css/css3_mediaqueries.asp|Media Queries Chapter]]에서 더 많은 미디어 쿼리를 배울 수 있습니다.\\
\\
여기에서 먼저 ''%%.container%%'' 클래스에 대해 %%--fontsize%%라는 새 지역 변수를 선언합니다.\\
값을 25 픽셀로 설정합니다. 그런 다음 더 아래에 있는''%%.container%%'' 클래스에서 사용합니다.\\
그런 다음 "브라우저 너비가 450px 이상이면 ''%%.container%%'' 클래스의 %%--fontsize%% 변수 값을 50px로 변경합니다."라는 @media 규칙을 만듭니다.\\
\\
====Example====
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
}
\\
다음은 %%@media%% 규칙에서 %%--blue%% 변수의 값도 변경하는 또 다른 예제입니다.\\
====Example====
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
/* 브라우저 화면 너비가 450px 이상일 때 적용됨 */
:root {
--blue: lightblue;
}
}
{{tag>오션, CSS Variables in Media Queries}}