#12. 미디어 쿼리를 사용한 반응형 웹 디자인

 

Media Queries는 CSS 기술의 일부로, 웹 페이지의 레이아웃이나 스타일을 디바이스의 화면 크기에 따라 조정할 수 있도록 하는 것입니다.

 

예를 들어, 모바일 기기에서는 좁은 화면 크기에 맞춰 레이아웃을 다시 정렬하고, 데스크탑에서는 넓은 화면 크기에 맞춰 다른 레이아웃을 사용할 수 있습니다.

미디어 쿼리는 CSS @media rule을 통해 작성할 수 있으며, 특정 조건(예를 들어, 화면 크기)이 만족될 때 CSS 스타일을 적용할 수 있도록 합니다.

예:

@media (condition) {
  /* CSS 규칙 */
}

condition은 미디어 쿼리의 조건을 나타내며, 여러 조건을 결합할 수도 있습니다.

 

다음 예는 미디어 유형이 스크린이고, 가로 폭이 640px 이상일 때 적용되는 스타일을 정의합니다.

미디어 유형은 screen, speech, all, print 등이 있습니다.

 

@media screen and (min-width: 640px) {
  /* 적용할 규칙 */
}

 

다음 예는 가로 폭이 720px 이상이고, 1080px 이하인 경우에만 적용되는 스타일을 정의합니다

@media (min-width: 720px) and (max-width: 1080px) {
  /* CSS 규칙 */
}

 

 

미디어 쿼리에서 사용 가능한 조건은 다양하며, 가로 폭, 세로 폭, 디바이스 종류, 기기의 종류, 화면 방향, 디스플레이의 밀도(dpi) 등이 있습니다

@media screen and (min-width: 720px) {
  /* 최소 너비가 720px인 장치에 대한 CSS 규칙 */
}

@media (orientation: portrait) {
  /* 세로 방향의 장치에 대한 CSS 규칙 */
}

@media (max-resolution: 200dpi) {
  /* 최대 해상도가 200dpi인 장치에 대한 CSS 규칙 */
}

@media (pointer: coarse) {
  /* 정확도가 제한된 포인터가 있는 장치에 대한 CSS 규칙(예: 터치 스크린 등) */
}

@media (prefers-color-scheme: dark) {
  /* 다크모드 장치에 대한 CSS 규칙 */
}

 

CSS Media Queries는 CSS 파일에서 여러 미디어 쿼리를 정의할 수 있으며, 여러 미디어 쿼리에서 같은 선택자에 대해서는 마지막에 정의된 스타일이 적용됩니다.

CSS Media Queries를 사용하면, 다양한 디바이스에서 사용자 경험을 향상시킬 수 있습니다.

또한, 반응형 웹 디자인에서 중요한 역할을 하며, 디바이스 크기에 따라서 다른 레이아웃을 적용할 수 있어서 사용자에게 최적의 웹 사이트 경험을 제공할 수 있습니다.