미디어 쿼리를 활용한 반응형 웹 디자인

반응형 웹 디자인은 오늘날 웹 개발에서 필수적인 요소가 되었습니다. 사용자들이 다양한 크기의 화면을 가진 기기로 웹사이트를 방문하기 때문에, 모든 사용자에게 최적의 경험을 제공하기 위해 웹사이트가 다양한 화면 크기에 맞게 조정되어야 합니다. 이를 위해 우리는 CSS의 강력한 도구인 미디어 쿼리를 사용할 수 있습니다.

미디어 쿼리는 웹사이트의 스타일을 다양한 화면 크기와 조건에 따라 적용할 수 있게 해줍니다. 이를 통해 작은 화면에서는 컨텐츠를 한 열로 보여주고, 큰 화면에서는 여러 열로 보여주는 등의 조정이 가능해집니다.

기본 미디어 쿼리 사용법

미디어 쿼리를 사용하기 위해서는 다음과 같은 형식을 사용합니다:

@media (조건) {
  /* 조건이 참일 때 적용할 스타일 */
}

예를 들어, 화면의 너비가 600픽셀보다 작을 때 적용할 스타일은 다음과 같이 작성할 수 있습니다:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

이 코드는 화면의 너비가 600픽셀보다 작을 때, 배경색을 lightblue로 변경합니다.

다양한 화면 크기에 대응하기

웹사이트를 다양한 화면 크기에 맞게 조정하려면, 여러 미디어 쿼리를 사용하여 다양한 화면 크기에 대한 스타일을 정의해야 합니다. 예를 들어, 태블릿과 데스크탑 화면 크기에 맞는 스타일을 추가하려면 다음과 같이 작성할 수 있습니다:

/* 태블릿 */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: peachpuff;
  }
}

/* 데스크탑 */
@media (min-width: 901px) {
  body {
    background-color: lavender;
  }
}

이 코드는 화면의 너비가 601픽셀에서 900픽셀 사이일 때 배경색을 peachpuff로, 901픽셀 이상일 때는 lavender로 변경합니다.

실습해보기

이제 여러분이 직접 미디어 쿼리를 사용해보세요. 간단한 웹 페이지를 만들고, 다양한 화면 크기에 따라 배경색이 변경되도록 미디어 쿼리를 추가해보세요. 이를 통해 반응형 웹 디자인의 기초를 실습하며 익힐 수 있습니다.

미디어 쿼리를 활용한 반응형 웹 디자인은 사용자 경험을 향상시키는 중요한 방법 중 하나입니다. 이 기술을 잘 활용하여 다양한 기기에서도 멋진 웹사이트를 제공해보세요!