[python] 반응형 웹 디자인과 미디어 쿼리

08 Dec 2023

python

반응형 웹 디자인은 사용자의 디바이스 화면 크기에 맞춰 웹사이트의 레이아웃과 디자인을 조정하는 기술입니다. 미디어 쿼리는 CSS3의 기능으로서, 미디어 유형 또는 장치의 특성에 따라 스타일을 다르게 적용할 수 있도록 합니다.

미디어 쿼리의 기본 구문

미디어 쿼리는 @media 규칙을 사용하여 정의됩니다. 아래는 간단한 구문입니다.

/* 화면 너비가 600px 미만일 때 적용 */
@media (max-width: 600px) {
  /* 스타일 정의 */
}

위 코드는 화면 폭이 600px 미만일 때 스타일을 적용하는 방법을 보여줍니다.

실전 예제

아래 예제는 특정 화면 폭 범위에 따라 다른 스타일을 적용하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 기본 스타일 */
    body {
      font-size: 16px;
    }

    /* 600px 이하일 때 스타일 */
    @media (max-width: 600px) {
      body {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <p>이 문장의 글꼴 크기는 화면 폭에 따라 조정됩니다.</p>
</body>
</html>

위의 예제는 화면 폭이 600px을 초과할 때와 미만일 때 각각 다른 글꼴 크기를 설정합니다.

반응형 웹 디자인과 미디어 쿼리를 이용하면, 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다.

결론

반응형 웹 디자인은 사용자의 화면 크기에 맞게 웹사이트를 최적화하는 중요한 기술입니다. 미디어 쿼리는 이를 가능하게 하며, CSS를 통해 화면 크기에 따라 다양한 스타일을 지정할 수 있습니다.

MDN Web Docs에서 미디어 쿼리에 대한 더 많은 정보를 확인할 수 있습니다.