미디어 쿼리

미디어쿼리(media query)

뷰포트의 해상도에 따라 CSS를 분기시키는 기법으로 반응형 프로젝트에서 반드시 필요합니다.

뷰포트 해상도가 달라질 때 레이아웃이 깨질 수 있습니다. 이를 방지하기 위해 해상도마다 레이아웃을 다르게 지정해 주도록 해주는 것이 미디어쿼리입니다.

---

1. <link~media="">

<link rel="stylesheet> media="all and (min-width: 1000px)" href=style_pc.css"

<link>를 사용하는 방식은 최소 가로폭이 일정치가 되었을 때 해당 스타일시트를 연결합니다.
위의 예시는 1000px 이상일 때 style_pc.css를 연결합니다.

브라우저는 일단 모든 css를 내려받기 때문에 <link> 방식은 사이즈가 커지고 속도가 느려져 자주 사용하는 방식은 아닙니다.

2. @media

@media all and (min-width: 1000px){
　　.container {
　　　　width: 96%
　　}
}

하나의 CSS 파일 내부에서 조건에 따라 분기시키는 가장 일반적인 형태의 미디어쿼리 방식입니다.
위의 예시 역시 마찬가지로 가로폭이 1000px 이상일시 적용됩니다.

▶ Media Type

media type	설명
all	모든 미디어 장치에 사용 (기본값)
print	프린터에 사용
screen	PC, 태블릿, 스마트폰에 사용
speech	스크린리더기가 페이지를 읽는데 사용

미디어타입을 사용해서 어떤 타입에 사용할지 구분할 수 있습니다.

@media screen and (min-width: 768px){
　　body {
　　　　color: blue;
　　}
}

해당 예시는 PC나 모바일에서 화면이 768px 이하가 되었을 때 배경이 파란색이 됩니다.

3. media query를 흉내내는 script

function inmitLayout( ) {
　　var widthWin = $(window).width( );
　　if (widthWin < 1000) $('body').addClass('mob').removeClass('pc');
　　else $('body').removeClass('mob').addClass('pc');
}

미리 만들어둔 script를 통해 창 크기가 바뀔 때마다 실행되어 레이아웃을 변화시킬 수 있습니다.

위의 예시는 순서대로 창의 가로 크기를 재고 1000px보다 좁으면 body에 mob 클래스를 붙이고 pc 클래스는 제거하고, 1000px 이상에서는 pc 클래스를 붙이고, mob 클래스는 제거해서 PC일때와 모바일일 때의 화면을 조절합니다.