미디어 쿼리: 미디어 쿼리를 활용하여 반응형 디자인을 만듬

미디어 쿼리(Media Queries)는 반응형 웹 디자인을 만드는 데 핵심적인 CSS 기능입니다. 다양한 화면 크기와 미디어 유형에 따라 적절한 스타일을 적용할 수 있도록 도와줍니다. 

미디어 쿼리 기본 구조

미디어 쿼리는 CSS에서 다음과 같은 구조로 사용됩니다:

 

@media [미디어 유형] and ([조건]) {
    /* 조건에 맞을 때 적용할 CSS 스타일 */
}

 

 

미디어 유형

1. All:
   • 모든 미디어 유형에 적용됩니다.
2. Print:
   • 인쇄 미디어에 적용됩니다.
3. Screen:
   • 컴퓨터 화면, 태블릿, 스마트폰 등의 스크린에 적용됩니다.

조건 (Queries)

1. Width and Height:
   • min-width, max-width, min-height, max-height: 화면의 너비나 높이에 따라 스타일을 적용합니다.
2. Orientation:
   • orientation: landscape 또는 orientation: portrait: 화면의 방향(가로 또는 세로)에 따라 스타일을 적용합니다.
3. Aspect Ratio:
   • aspect-ratio: 화면의 종횡비에 따라 스타일을 적용합니다.
4. Resolution:
   • resolution: 화면의 해상도에 따라 스타일을 적용합니다.

예제

미디어 쿼리를 사용한 반응형 웹 디자인 예제:

 

 

@media screen and (max-width: 600px) {
    .container {
        background-color: lightblue;
    }
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
    .container {
        background-color: lightgreen;
    }
}

@media print {
    .container {
        background-color: white;
    }
}