[CSS 수업] 7강 - 미디어 쿼리(반응형 웹 디자인)

반응형 웹 디자인은 모바일 기기부터 데스크톱 화면까지 다양한 디바이스에서 웹 페이지가 최적으로 표시되도록 하는 기술입니다.

이 기술은 사용자 경험을 향상시키고 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다. 이제 우리는 CSS 미디어 쿼리를 활용하여 반응형 웹 디자인을 구현하는 방법에 대해 알아보겠습니다.

 

CSS 미디어 쿼리

CSS 미디어 쿼리는 브라우저가 특정 조건을 충족할 때 CSS 스타일을 적용하는 데 사용됩니다. 주로 디바이스의 너비와 높이, 뷰포트 크기 등을 기준으로 스타일을 변경합니다.

예를 들어, 모바일 기기에서는 화면이 작기 때문에 레이아웃이 달라지고, 데스크톱 화면에서는 큰 화면을 활용하여 레이아웃을 조정할 수 있습니다.

 

반응형

 

미디어 쿼리 예제

- 데스크톱 CSS 미디어 쿼리

/* 데스크톱 화면에 대한 스타일 */
@media only screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
  /* 다른 데스크톱 화면에 대한 스타일 추가 가능 */
}

 

- 태블릿 환경 CSS 미디어 쿼리

/* 태블릿 화면에 대한 스타일 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
  /* 다른 태블릿 화면에 대한 스타일 추가 가능 */
}

 

 

- 모바일 환경 CSS 미디어 쿼리

/* 모바일 화면에 대한 스타일 */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
  /* 다른 모바일 화면에 대한 스타일 추가 가능 */
}

 

위의 예제에서는 모바일, 태블릿, 데스크톱 화면에 따라 글꼴 크기를 다르게 설정하는 방법을 보여줍니다. 이와 같이 CSS 미디어 쿼리를 사용하면 다양한 디바이스에 맞춰 웹 페이지의 레이아웃과 스타일을 조정할 수 있습니다.

반응형 웹 디자인은 사용자들에게 최적화된 경험을 제공하고, 검색 엔진에서도 높은 가시성을 확보하는 데 중요한 역할을 합니다. 따라서 모든 웹 개발자는 이러한 기술을 숙지하고 적절히 활용하는 것이 필수적입니다.

 

 

- 이전 수업 목록