[CSS] media query 사용법

🎯 media query 사용법

• 미디어 쿼리는 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용하는 css 구문이다.

 

📝 media query

@media () and () {

}

@media (min-width: 320px) and (max-width: 800px) {

}

• 미디어 쿼리를 사용하면 기존 속성을 교체할 수도, 새로운 속성을 추가할 수도 있다.

 

📝 viewport

• viewport는 디지털 기기에 표시되는 화면이다.
• 모바일이나 태블릿은 미리 설정되어 있는 모바일이나 태블릿은 미리 설정되어 있는 viewport로 인해 미디어 쿼리가 제대로 작동하지 않을 수 있다.
• <meta> 태그의 속성 중 하나인 viewport을 입력해서 디바이스에서 의도한 대로 화면이 출력되도록 하자.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 모든 기기의 뷰포트가 다 다르게 설정되어 있기 때문에 모든 기기의 배율을 1로 설정하겠다 라는 의미

 

📝 media query - 속성 상속

• 미디어 쿼리는 미디어 쿼리 바깥쪽 영역에 있는 css 속성을 상속받는다.
• 예를 들면 바깥쪽에 빨간색 테두리를 설정해줬다면 미디어 쿼리 안쪽까지 상속을 받아 css 스타일이 그대로 적용된다. 상속을 받고 싶지 않다면 따로 설정 해제 속성을 추가해주자.(none)

 

🏷 요약

• 미디어 쿼리 내에서 트랜지션이 있고 밖에 트랜지션이 없다면, 들어갈 때만 트랜지션 효과가 나오고 나갈 때는 효과 없이 복귀한다.
• 만약 미디어 쿼리 밖에 트랜지션을 주고 미디어 쿼리 내에 안 줬다면 상속이 되어서 미디어 쿼리 내부에도 트랜지션이 적용된다.

@media (min-width: 320px) and (max-width: 800px) {
    /* 기존 너비가 960으로 지정되어 있어서 800으로 했을 시 좌측이 잘려 보인다.   */
    .container {
        width: 640px;
    }

    #intro h1 {
        width: 100%;
    }

    #intro nav {
        width: 100%;
    }

    #intro h1 a { 
        text-align: center;
        padding: 22px 0 0 0;
    }

    #intro {
        height: 160px;
    }
}

• 미디어 쿼리 내부에서 container의 너비 값을 설정해 준 이유는 기존 container의 너비가 960인데 media의 최댓값이 800이므로 미디어 쿼리 동작시 좌측이 잘려 보여서 640으로 재설정해 줌으로써 전체 레이아웃을 벗어나지 않게 해 준다.
• 미디어 쿼리 내부의 코드가 외부 코드보다 우선순위가 밀리면 적용되지 않는다.