[CSS]@media쿼리와 @container container-type의 차이점

 

container-type와 @media는 각각 CSS에서 반응형 디자인을 구현하는 데 사용되는 방법들이지만, 이 둘은 서로 다른 용도로 사용됩니다. 아래에서 두 가지의 차이점과 사용 예시를 설명하겠습니다.

@media

@media는 미디어 쿼리로, 뷰포트(브라우저 창)의 크기나 기기의 특성에 따라 스타일을 적용하는 데 사용됩니다. 뷰포트 너비, 높이, 해상도, 방향 등의 특성에 따라 다른 스타일을 적용할 수 있습니다.

주요 특징:

• 뷰포트나 기기의 특성을 기준으로 스타일을 적용합니다.
• 전체 페이지 또는 특정 요소의 스타일을 변경할 수 있습니다.

예시:

/* 기본 스타일 */
body {
    background-color: white;
}

/* 뷰포트 너비가 600px 이상일 때 스타일 */
@media (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 뷰포트 너비가 900px 이상일 때 스타일 */
@media (min-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

container-type

container-type는 CSS 컨테이너 쿼리의 일부로, 부모 요소의 크기에 따라 자식 요소의 스타일을 적용하는 데 사용됩니다. 이는 특정 요소의 크기가 변할 때, 해당 요소 내의 자식 요소의 스타일을 조정할 수 있게 합니다.

주요 특징:

• 요소(컨테이너)의 크기를 기준으로 스타일을 적용합니다.
• 컨테이너 쿼리는 뷰포트가 아닌 특정 요소의 크기에 따라 스타일을 변경할 수 있습니다.
• 반응형 디자인을 더욱 세밀하게 조정할 수 있습니다.

예시:

/* 컨테이너 타입 설정 */
.container {
    container-type: inline-size;
    width: 100%;
    padding: 20px;
    background-color: lightgrey;
}

/* 기본 스타일 */
.box {
    background-color: blue;
    color: white;
    padding: 20px;
    font-size: 16px;
}

/* 컨테이너 너비가 600px 이상일 때 스타일 */
@container (min-width: 600px) {
    .box {
        background-color: green;
        font-size: 24px;
    }
}

차이점 요약

• 기준:
  • @media: 뷰포트 또는 기기의 특성을 기준으로 스타일을 적용합니다.
  • container-type: 특정 요소(컨테이너)의 크기를 기준으로 스타일을 적용합니다.
• 사용 용도:
  • @media: 전체 페이지 또는 특정 요소의 스타일을 뷰포트 크기나 기기의 특성에 따라 조정할 때 사용합니다.
  • container-type: 부모 요소(컨테이너)의 크기에 따라 자식 요소의 스타일을 조정할 때 사용합니다.
• 구체성:
  • @media: 페이지 레벨에서 적용되므로 전역적인 스타일 조정에 유용합니다.
  • container-type: 특정 요소 레벨에서 적용되므로 보다 세밀하고 로컬화된 스타일 조정에 유용합니다.

이 두 가지 방법을 적절히 활용하면 다양한 크기와 환경에서 최적의 사용자 경험을 제공하는 반응형 디자인을 구현할 수 있습니다.

호환성 정보 (2024년 기준)

• Chrome: 105 이상
• Firefox: 110 이상
• Safari: 16.4 이상
• Edge: 105 이상
• Opera: 91 이상

호환성 확인 방법

브라우저 호환성 정보를 실시간으로 확인하려면 다음 사이트들을 참조하세요:

1. Can I Use:
   • URL: Can I Use - Container Queries
2. MDN Web Docs:
   • URL: MDN Web Docs - Container Queries

이들 사이트에서는 각 브라우저 버전에 따른 지원 현황을 자세히 확인할 수 있습니다.