반응형 웹 - 미디어 쿼리의 구조

반응형 웹디자인에 대해 포스팅을 해보겠습니다.

반응형 웹디자인은 해상도에 따라 레이아웃이 변경되는 구조입니다.

일단 사용전에.. 이것들을 꼭 확인하셔야 합니다.

1. HTML5인지 확인합니다. ==> HTML 4.0 버전에서는 개발하기 힘듭니다.

2. <TABLE>이 하나라도 있는지 확인합니다. ==> TABLE가 존재할 경우 레이아웃이 깨집니다.

3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다. (설마.. 웹개발자가 IE만 있지는 않겠죠..ㅎㅎ;;)

==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠.

4. 되도록 스크립트 코드는 <head>부분보다는 <body>끝에 작성합니다.

==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다.

구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.)

@media를 미디어쿼리라고 합니다.

모두 스타일 시트 내부에 작성됩니다.

1) @media only all and (조건문) {실행문}

2) @media all and (조건문) {실행문}

3) @media (조건문) {실행문}

여기서 실행문 안에 CSS 속성들을 삽입합니다.
조건문 안에는 최소 해상도 (min-width)와 최대 해상도 (max-width)를 설정합니다.

예시를 하나 들어볼까요??

<style>

body{background-color:blue;}

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

body{background-color:yellow}

}

@media all and (min-width:720px){

body{background-color:red;}

}

@media all and (min-width:1024px){

body{background-color:skyblue;}

}

</style>

이렇게 입력하시면 해상도에 따라 색상이 변화하는 것을 보실 수 있습니다.

미디어쿼리의 조건이 모두 맞는 경우 가장 나중에 선언된 속성이 우선이 됩니다.

또한 미디어 쿼리 밖에 작성된 코드는 조건에 맞지 않는 경우 사용됩니다.

막블로그