@media 미디어 쿼리(Media Query) 정의하기

@media는 미디어 쿼리(Media Query)를 정의하기 위해 사용되는 CSS 규칙으로, 화면 크기나 디바이스 종류에 따라 스타일을 다르게 적용할 수 있게 합니다. 주로 반응형 웹 디자인을 구현할 때 유용합니다.

기본 문법

@media (조건) {
    /* 조건이 참일 때 적용될 CSS 스타일 */
    요소 {
        속성: 값;
    }
}

사용 예시

1. 화면 크기에 따라 스타일 적용하기

아래 예제는 화면의 너비가 600px 이하일 때, .container의 background-color를 lightblue로 설정합니다.

.container {
    background-color: white;
}

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

2. 다양한 조건 설정하기

여러 조건을 결합하여 다양한 디바이스 조건에 맞춰 스타일을 적용할 수 있습니다.

@media (min-width: 600px) and (max-width: 1200px) {
    /* 화면 너비가 600px 이상, 1200px 이하일 때 */
    .container {
        font-size: 20px;
    }
}

@media (orientation: landscape) {
    /* 화면이 가로 방향일 때 */
    .container {
        padding: 20px;
    }
}

3. 장치 종류에 따라 스타일 적용하기

디바이스 타입을 기준으로 스타일을 구분할 수도 있습니다.

@media screen and (max-width: 768px) {
    /* 화면 크기가 768px 이하일 때 */
    body {
        font-size: 14px;
    }
}

@media print {
    /* 인쇄할 때 적용될 스타일 */
    body {
        color: black;
        background: white;
    }
}

주요 미디어 속성들

• max-width: 화면 너비가 설정된 값 이하일 때
• min-width: 화면 너비가 설정된 값 이상일 때
• orientation: 화면 방향 (landscape 또는 portrait)
• max-height / min-height: 화면 높이가 설정된 값 이하 또는 이상일 때
• resolution: 화면의 해상도에 따라 스타일을 다르게 설정