4.1 기본 개념
CSS-변수와 미디어 쿼리는 반응형 웹 디자인을 만들기 위한 강력한 도구들을 제공하고, 이는 자동으로 다양한 화면 크기와 디바이스에 맞춰 조정된다. 변수는 스타일을 중앙에서 관리할 수 있게 해주고, 미디어 쿼리는 화면 너비와 같은 조건에 따라 이러한 스타일을 변경할 수 있게 해준다.
기본 개념
- CSS-변수: CSS 코드 전체에 반복적으로 사용할 수 있는 값을 설정할 수 있게 해준다. 이는 미디어 쿼리와 같은 다양한 컨텍스트에서 변경될 수 있어, 반응형 디자인에 특히 유용하다.
- 미디어 쿼리: CSS 스타일을 디바이스의 특성(예: 화면 너비나 높이)에 따라 적용할 수 있게 해준다. 이는 웹 페이지의 외형과 동작을 다양한 디바이스에 맞춰 조정할 수 있게 한다.
미디어 쿼리에서 변수 사용하기
CSS-변수는 미디어 쿼리 안에서 조건에 따라 스타일 값을 변경하기 위해 사용할 수 있다. 이는 더 유연하고 쉽게 유지관리할 수 있는 반응형 디자인을 만드는 데 도움을 준다.
미디어 쿼리에서 변수 사용 예제:
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
HTML
<body>
<p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
설명:
이 예제에서는 화면 너비에 따라 변수 값이 변경됩니다:
- 화면 너비가 600px 이하인 경우, 배경이 더 어두운 색조로 변경되고 글꼴 크기가 작아집니다.
- 화면 너비가 601px 이상 1200px 이하인 경우, 배경이 중간 색조로 변경되고 글꼴 크기가 약간 커집니다.
- 화면 너비가 1200px 이상인 경우, 기본 변수 값이 적용됩니다.
4.2 미디어 쿼리에서 변수 사용 예제
예제 1: 반응형 패딩 및 글꼴 크기
CSS
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
HTML
<div class="container">
<p>This is a responsive container with adaptive padding and font size.</p>
</div>
설명:
- 이 예제에서는
.container가 화면 너비에 따라 패딩과 글꼴 크기를 변경합니다.
예제 2: 변수와 미디어 쿼리를 사용한 사이트 테마화
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
HTML
<body>
<p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
</body>
설명:
- 이 예제에서는 사용자의 선호 컬러 테마(
prefers-color-scheme: dark)에 따라 사이트의 색상 테마가 변경됩니다. 배경색, 텍스트 색상 및 링크 색상이 밝은 테마와 어두운 테마 간 전환 시 자동으로 변경됩니다.
4.3 반응형 그리드
미디어 쿼리와 변수를 사용한 반응형 그리드 예제:
CSS
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
HTML
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
설명:
- 이 예제는 화면 너비에 따라 열 수를 변경하는 반응형 그리드를 사용하고 있습니다. 좁은 화면(600px 이하)에서는 하나의 열, 중간 화면(600px 이상 900px 이하)에서는 두 열, 넓은 화면(900px 이상)에서는 세 열이 사용됩니다.
GO TO FULL VERSION