미디어 쿼리(Media Query) 사용법 (반응형 웹)
반응형 웹 디자인은 다양한 기기와 화면 크기에서 웹 사이트가 잘 표시되도록 하는 것을 의미합니다. 이를 위해 CSS의 미디어 쿼리를 사용할 수 있습니다. 미디어 쿼리는 웹 사이트의 스타일 및 레이아웃을 특정 장치나 화면 크기에 따라 조정할 수 있는 기능을 제공합니다. 이제 미디어 쿼리의 사용법을 알아보겠습니다.
기본 문법
미디어 쿼리는 @media 키워드를 사용하여 정의됩니다. 일반적으로 다음과 같은 형식으로 사용됩니다:
@media media-type and (media-feature) {
/* 스타일 및 레이아웃 규칙 */
}media-type은 사용할 수 있는 미디어 종류(화면, 인쇄 등)를 지정합니다.media-feature은 조건을 만족하는지 확인하는 데 사용되는 특성입니다(너비, 방향 등).
스타일 및 레이아웃 규칙은 조건을 충족하는 경우에만 적용됩니다.
중단점(Breakpoint) 설정
반응형 웹에서는 일반적으로 화면의 크기에 따라 레이아웃 및 스타일이 변경됩니다. 이를 위해 중단점(Breakpoint)이라는 용어를 사용하는데, 중단점은 화면 크기의 특정 범위를 의미합니다. 따라서 미디어 쿼리를 사용하여 다양한 중단점을 설정할 수 있습니다.
예를 들어, 화면의 너비가 600px 이상인 경우와 600px 미만인 경우에 각각 다른 스타일 및 레이아웃을 적용하고 싶다고 가정해보겠습니다. 이를 위해 다음과 같은 미디어 쿼리를 사용할 수 있습니다:
@media screen and (min-width: 600px) {
/* 너비가 600px 이상인 경우에만 적용되는 스타일 및 레이아웃 규칙 */
}
@media screen and (max-width: 599px) {
/* 너비가 600px 미만인 경우에만 적용되는 스타일 및 레이아웃 규칙 */
}위의 예제에서는 min-width와 max-width 미디어 특성을 사용하여 너비 범위를 지정했습니다.
다양한 미디어 특성 활용
너비 외에도 다양한 미디어 특성을 사용하여 원하는 조건에 맞추어 스타일 및 레이아웃을 변경할 수 있습니다. 몇 가지 일반적인 미디어 특성에 대한 예제를 살펴보겠습니다:
orientation
@media screen and (orientation: landscape) {
/* 가로 방향일 때 적용되는 스타일 및 레이아웃 규칙 */
}
@media screen and (orientation: portrait) {
/* 세로 방향일 때 적용되는 스타일 및 레이아웃 규칙 */
}min-width
@media screen and (min-width: 768px) {
/* 너비가 768px 이상일 때 적용되는 스타일 및 레이아웃 규칙 */
}max-width
@media screen and (max-width: 767px) {
/* 너비가 767px 미만일 때 적용되는 스타일 및 레이아웃 규칙 */
}device-width
@media screen and (device-width: 320px) {
/* 장치의 너비가 320px일 때 적용되는 스타일 및 레이아웃 규칙 */
}aspect-ratio
@media screen and (aspect-ratio: 16/9) {
/* 화면 비율이 16:9일 때 적용되는 스타일 및 레이아웃 규칙 */
}전체 내용 정리
반응형 웹을 구현하기 위해 미디어 쿼리를 사용할 수 있습니다. 미디어 쿼리는 @media 키워드를 사용하여 정의되며, 조건을 충족할 때 스타일 및 레이아웃이 적용됩니다. 중단점을 설정하여 화면의 크기에 따라 다른 스타일을 적용할 수 있으며, 너비 및 다른 미디어 특성을 활용하여 원하는 조건에 따른 스타일 및 레이아웃을 구성할 수 있습니다.
댓글