[CSS 문법] 반응형, 적응형 , 미디어 쿼리(media query)

안녕하세요~ 이번에는 반응형과 적응형 , 미디워 쿼리(media query)에 대해 알아보겠습니다. 간단한 이론과 실습 코드로 설명해드리겠습니다. 

반응형과 적응형이라고 들어보셨나요?  반응형과 적응형의 개념부터 살펴보시죠

 

반응형이란?
반응형 : PC 사이즈와 모바일 사이즈로 변화하는 것이 아니고 접속한 디바이스를 판단해서 요청 URL이 달라질 수 있다. 현재 웹사이트 대부분마다 반응형으로 디바이스 규격에 따라 레이아웃이 다르게 나타납니다. 

 

적응형이란?

적응형 : PC 사이즈에서 모바일 사이즈 혹은 탭 사이즈로 변환될 때 화면 사이즈에 비례해서 페이지의 내용이 맞게 변화한다.

미디어 쿼리(media query)란? 
웹 페이지가 보여지는 기기의 종류나 화면 크기에 따라 스타일을 다르게 적용할 수 있도록 해주는 CSS의 기능입니다.

다음은 디바이스 규격에 맞게 미디어 쿼리에 대한 예시 코드입니다. 

모바일 규격에 맞게 작성한 미디어 쿼리 코드

/* 모바일 사이즈 이상으로 넘어가면 */
@media only  screen and (min-width: 768px) {
   #wrap {
        width: 100%;
        min-height: 100vh;
        background-color: red;
   } 
}

PC(데스크탑) 규격에 맞게 작성한 미디어 쿼리 코드 

@media only screen and (min-width: 1200px) {
    /* #wrap 아이디로 페이지의 전체의 영역을 묶어줬다고 가정하고 */
    #wrap {
        width: 1200px;
        /* height: 100%; */
        /* vw, vh */
        /*
            vw : 현재 브라우저의 너비 100vw는 100% 비율로 보면 된다.
            vh : 브라우저의 높이 100vh 또한 100%의 비율
            너비, 높이 등을 퍼센트로 주면 자식태그는 부모태그의 너비나 높이 만큼만 크기가 지정될 수 있는데
        */
        min-height: 100vh; /* 최소 높이 : 내용의 높이가 커지면 커지고 내용물이 없어도 기본 최소 높이가 정의된다. */
        margin: 0 auto;
        background-color: blue;
    }
}

테블릿 레이아웃에 맞게 작성한 미디어 쿼리 코드 

@media only screen and (min-width: 992px) {
    #wrap {
        width: 100%;
        min-height: 100vh;
        background-color: violet;
    }
}

각각 화면에 레이아웃의  맞게 미디어 쿼리를 작성하여 웹 브라우저의 나타낼 수 있습니다.