media query, 미디어쿼리, viewport

날이 갈 수록 PC보다 모바일의 중요성이 커지고 있다.

실제로 요즘 10대들은컴퓨터를 사용하는 시간보다, 모바일에 쏟는 시간이 훨~씬 많다. 

영상편집, 글쓰기, 검색 등을 모두 할 수 있으니

컴퓨터 플러그를 연결하고, 전원을 켜고, 부팅하고, 사이트로 들어가, 로그인을 하고, 작업을 하는 긴 과정보다

자동로그인 되어 있는 모바일의 버튼 하나만 클릭하면 되는 간편함을

요즘 시대는 추구하는 것이 당연하기도 하다.

 

그렇다면 웹개발자는 이런 시대의 특성을 반영해야 한다. 

실제로 구글에서는 웹사이트를 검색에서 노출시킬 때, 

해당 웹사이트가 다양한 사이즈의 화면에서도 유동적으로 크기를 조절하고 배치하는

웹반응형인지를 체크하고, 그렇지 않다면 검색 순위에서 떨어뜨린다. 

따라서 웹개발자는 반응형웹을 구성할 수 있어야 한다. 

 

추가적으로 이야기할 것은 viewport 뷰포트이다.

뷰포트는 웹사이트가 표시하는 화면의 크기이다.

 

오늘은 뷰포트에 따라 화면의 구성이 달라지게 표현하는 기술인

Media Query  미디어 쿼리에 대해 알아본다. 

 

 

@media <type> (feature) {

새롭게 적용할 내용을 적는다

}

지금부터 미디어쿼리가 작동하는 대략적인 구조를 설명하겠다. 

미디어 타입이다. 우리가 선택하는 미디어의 유형이다.예를 들어 print라고 적혀져 있다면, print의 경우에만 미디어쿼리가 활성화되는 것이다.

@media

미디어 키워드이다. 이 키워드는 { } 중괄호로 둘러싸고 있는 모든 것이 미디어 쿼리라는 것을 의미한다.

<type>

미디어 타입이다. 우리가 선택하는 미디어의 유형이다.예를 들어 print라고 적혀져 있다면, print의 경우에만 미디어쿼리가 활성화되는 것이다. 

(feature)

쿼리는 질문이다. 여기서는 이것이 참인지, 거짓인지를 확인한다는 뜻이다. feature는 특징이다. 여기서는 특정 조건이라고도 볼 수 있다. 즉, 서술된 feature가 참인지, 거짓인지를 확인하고 참인 경우에만 미디어 쿼리를 실행한다는 의미이다.

1) feature: max-width:764px

최대 764픽셀

화면의 가로 길이가 764까지는 미디어 쿼리를 적용하라는 뜻이다.

@media (max-width:764px) {
    h1 { 
        color:red;
    }
}

 

 

2) feature: min-width:764px

최소 764px

화면의 가로 길이가 764 이상인 경우에만 미디어쿼리를 적용하라는 의미다.

@media (min-width:764px) {
    h1 { 
        color:red;
    }
}

 

 

3) feature: (min-width:300px) and (max-width:764px) 

최소 300px, 최대 764px

화면의 너비가 300보다 크고, 764보다 작다는 의미이다.

@media (min-width:300px) and (max-width:764px) {
    h1 { 
        color:red;
    }
}