html5에서 많은 촛점을 받고 있는것이 미디어쿼리(Media Queries) 입니다.
간단이 말해 기기의 해상도에 따라 보여지는것을 제어할 수 있는 기능입니다.
현재는 스마트폰, 테블릿, 컴퓨터등 보여지는 기기가 다양하고 보여지는 해상도 또한 다양합니다. 이러한 환경에 맞쳐 대응하도록 만든것이 미디어쿼리입니다.

드림위버를 사용하면 간단이 미디어쿼리를 작성할 수 있고, 미리보기 또한 할 수 있습니다.
어떤 화면인지 한번 보겠습니다.

이전에는 드림위버를 업데이트해서 html5로 마크업된 간단한 문서를 만들어 보았습니다.
그럼 이제 드림위버 상단에 멀티스크린을 클릭합니다.
참고로 현재 문서가 저장되어 있어야 합니다. 저장하지 않은 문서라면 적당이 이름을 부여해서 저장한후 멀티스크린을 클릭하세요.

Media Queries -1


아래 이미지를 보시면 각각의 해상도에 맞쳐 미리보기가 보여지며 어떤 해상도인지 나와 있습니다.

Media Queries -2


우측의 뷰포트 크기를 클릭하시면 폰, 테블릿, 데스크탑의 해상도를 볼 수 있습니다.

Media Queries -3


또 미디어쿼리를 클릭하면 간단하게 각 해상도에 맞는 미디어쿼리를 만들수 있습니다.
아래는 미디어쿼리를 클릭한 화면입니다.

Media Queries -4


미디어쿼리라는 새창이 뜨면 아래 기본 프리셋을 클릭하면 자기가 알아서 css 파일을 만들어줍니다.

Media Queries -5

기본 프리셋을 클릭했습니다. 3가지 기기에 맞쳐 css 파일이 생성된것을 알 수 있습니다.

Media Queries -6

여기서 각각에 맞는 css 파일 이름을 지정해주고 저장할 장소를 정해야 합니다.
우선 폰을 클릭하고 폰에 해당하는 css 파일 이름과 장소를 지정해줬습니다.
 

Media Queries -7


이런식으로 3가지 모두 지정을 해줍니다.
그럼 어떤식으로 코드가 삽입이 되었는지 한번 볼까요.
코드뷰를 클릭하면 아래처럼 3개의 코드가 삽입이 된것을 알 수 있습니다.

Media Queries -8


이로써 간단이 미디어쿼리를 미리보면서 작성하는 방법을 알아보았습니다.