반응형 웹 디자인이란 모든 기기에서 적절한 화면 크기와 레이아웃을 제공하는 웹 디자인 기술입니다. 이를 구현하기 위해서는 CSS 미디어 쿼리를 이해하고 사용해야 합니다.
CSS 미디어 쿼리는 브라우저에게 특정 조건이 충족될 때 특정 CSS 규칙을 적용하도록 지시하는 CSS 기술입니다. 예를 들어, 스마트폰이나 태블릿 같은 모바일 기기에서는 데스크톱에서와는 다른 화면 크기와 레이아웃이 필요합니다. 이를 위해 CSS 미디어 쿼리를 사용하여 모바일 기기용 CSS 규칙을 적용할 수 있습니다.
Media Query Syntax:
미디어 쿼리는 @media 속성을 사용하여 구현됩니다. 구문은 다음과 같습니다.
@media (property: value) { CSS rules }
미디어 쿼리 BLOCK은 다음과 같은 세 가지 요소로 구성됩니다.
1. 속성(property)
2. 값을(value)
3. 미디어 타입(media type)
미디어 쿼리를 사용하면 하나의 스타일 시트에서 여러 가지 화면 크기와 레이아웃에 대한 스타일 정의를 할 수 있습니다. 미디어 쿼리를 사용하여 화면 크기와 해상도를 검사하고 적절한 스타일을 적용할 수 있습니다.
예를 들어, PC에서는 헤더 메뉴가 풀 너비로 표시되지만 모바일에서는 메뉴 버튼으로 변경되어야 합니다. 이 경우 CSS 미디어 쿼리를 사용하여 모바일 기기에서 메뉴 버튼으로 변경하기 위한 CSS 스타일을 정의할 수 있습니다.
@media (max-width: 768px) {
.menu-button {
display: block;
}
.main-menu {
display: none;
}
}
위의 코드는 모바일 기기 화면 너비가 768px 이하일 때 (.menu-button) 클래스를 표시하고 (.main-menu) 클래스를 숨깁니다.
CSS 미디어 쿼리의 다른 예로, 모바일 기기에서는 폰트 크기를 줄이고 줄간격을 늘리는 CSS 스타일을 정의할 수 있습니다. 이렇게 하면 기기의 해상도에 맞게 텍스트가 잘 읽히므로 사용자에게 더 나은 사용 경험을 제공할 수 있습니다.
@media (max-width: 480px) {
body {
font-size: 14px;
line-height: 20px;
}
}
CSS 미디어 쿼리는 반응형 웹 디자인에서 필수적인 기술입니다. 모바일 기기와 데스크톱 등 서로 다른 기기와 화면 크기에서도 일관된 사용자 경험을 제공할 수 있도록 해줍니다. CSS 미디어 쿼리를 제대로 이해하고 사용하면, 반응형 웹 디자인을 구현하는데 매우 유용한 도구가 될 것입니다.