CSS 반응형 디자인

PC와 모바일의 화면 비율은 다릅니다. 따라서 PC에 맞춘 웹 디자인은 모바일에서 보기 적합하지 않습니다.

반면, 모바일에 맞춘 웹 디자인 또한 PC에서 사용하기는 적합하지 않은경우가 많습니다.

따라서 화면의 비율에 따라 디자인이 바뀌는것을 반응형 디자인이라고 합니다.

 

다른 디자인 방법으로는 적응형디자인이 존재하는데,

적응형 디자인 같은 경우는 디바이스에 따라 웹 페이지를 따로 만드는 한편,

반응형 디자인은 웹의 크기에 따라 디자인이 변화합니다.

 

 

 

Media Query - @media

@media media-type and {media-feature-rule} {
	/* CSS rules */
}


/* 예시 */

body{
    background-color: blanchedalmond;
}

@media screen and (max-width: 300px) {
    body{
        background-color: tomato;
    }
}


/* 예시 2 */
body{
    background-color: blanchedalmond;
}

@media (min-width: 300px) and (max-width: 500px) {
    body{
        background-color: tomato;
    }
}

   - CSS 문법 중 하나로, 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있습니다.

   - 어떤 미디어를 위한 것인지 (media-type), 어떤 조건이 들어가는지 (media-feature-rule)를 표시합니다.

   - IE 6-8버전, Firefox 2-3 버전은 지원하지 않습니다.

 

 

 

 

breakpoint

@media screen and (max-width: 300px) {
    body{
        background-color: rgb(128,206,118);
    }
}

@media screen and (min-width: 768px){
    body{
        background-color: rgb(166,157,219);
    }
}


@media screen and (min-width:1024px) {
    body{
        background-color: tomato;
    }
}

 

   - 반응형 디자인에서 분기를 지정하는 방법입니다.

   - 대응하고자 하는 미디어가 많을 수록 더 많은 breakpoint를 작성하게 됩니다.

   - 여러개의 @media 속성을 사용하여 분기를 지정합니다.

   - CSS는 위에서 아래로 읽게 되므로 범위가 큰 조건을 위에 지정하여 범위가 작은 조건이 묻히지 않도록 해야합니다.