====== 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}}