Responsive Web Design: CSS 미디어 쿼리
미디어 쿼리 (Media Queries)란?
미디어 쿼리는 웹 페이지의 디자인을 다양한 디바이스와 화면 크기에 맞게 조절하는 데 사용되는 CSS 기술이다. 이를 통해, 반응형 웹 디자인(Responsive Web Design)을 구현하여 모바일 기기부터 데스크톱까지 다양한 화면 크기에 대응할 수 있다.
#. 기본적인 미디어 쿼리 구문
미디어 쿼리는 @media 규칙을 사용하여 정의된다.
예제_
@media only screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
#. 미디어 쿼리 주요 속성
-
only screen: 미디어 유형을 지정한다. 대부분 screen을 사용하여 스크린 기반의 디바이스에 스타일을 적용한다.
-
(min-width: 768px): 최소 화면 너비를 지정한다. 768px 이상의 화면에 스타일을 적용한다.
-
(max-width: 767px): 최대 화면 너비를 지정한다. 767px 이하의 화면에 스타일을 적용한다.
실용적인 예제_
/* 데스크톱 및 태블릿 화면에 대한 스타일 */
@media only screen and (min-width: 768px) {
/* 데스크톱 및 태블릿에 대한 스타일 설정 */
}
/* 모바일 화면에 대한 스타일 */
@media only screen and (max-width: 767px) {
/* 모바일에 대한 스타일 설정 */
}
/* 데스크톱에서만 적용되는 스타일 */
@media only screen and (min-width: 1024px) {
/* 데스크톱에서만 적용되는 스타일 설정 */
}
미디어 쿼리를 활용하면 각 기기에 맞게 유연하게 스타일을 조절할 수 있습니다.
이것이 반응형 웹 디자인의 핵심 원리 중 하나이다.
⭐️지난 포스팅에 이어서 css에 대해서 특별히 미디어쿼리(Media Queries)에 대해서 자세히 알아보았습니다.
