미디어쿼리 알아보기

미디어쿼리(media query)

미디어쿼리는 뷰포트의 해상도에 따라 CSS를 분기시키는 기법이며, 반응형 프로젝트에서 반드시 필요한 기법입니다.

▶ <link ~ media="">

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

최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다.

> 팁!

태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다.

모바일 기기	가로	세로
iPhone X	375	812
iPhone 6,7,8	375	667
iPhone 6,7,8 plus	414	736
iPhone 5	320	568
Galaxy S5, S8	360	640
Galaxy Note 8	360	640
iPad Pro	1024	1366

---

▶ @media

처음 로딩할 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 일반적인 형태의 반응형 웹 CSS입니다. all은 Media Type를 나타냅니다. and 전, 후에 띄어 씁니다.

@media all and (min-width: 1000px) {
    모든 기기에서 해상도가 최고 1000px 인 경우 적용할 속성들…
}

> 팁!

작은 장치에서 페이지를 더 빠르게 표시되게 하려면, 모바일 우선으로 CSS를 설계합니다.

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

[ 예제 ]

미디어쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다.
▼ 다음은 모바일 기기를 세워 세로가 가로보다 긴 방향이 되면 배경색을 하늘색으로 변경하는 미디어쿼리입니다.

@media only screen and (orientation: portrait) {
    body { background: skyblue; }
}

▼ 다음은 모바일 기기를 눕혀 가로가 세로보다 긴 방향이 되면 배경색을 연두색으로 변경하는 미디어쿼리입니다.

@media only screen and (orientation: landscape) {
    body { background: lightgreen; }
}

쉼표로 구분하여 조건을 추가할 수도 있습니다.
▼ 다음은 가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 떄에만 글자색을 red로 변경하는 미디어쿼리입니다.

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
    body { color: red; }
}

▼ 다음은 미디어쿼리를 활용할 수 있는 기기 해상도에 따른 반응형 웹 디자인의 예시입니다.

---

▶ media query를 흉내내는 script

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

→ 위의 스크립트는 창의 가로 크기를 재고 1000px 보다 좁으면 body에 mob 클래스를 붙이고 pc 클래스는 제거하고, 1000px 이상이면 body에 pc 클래스를 붙이고, mob 클래스는 제거하는 스크립트입니다.

$(window).resize(function() {
    initLayout();
});

→ 미리 만들어 둔 스크립트를 창 크기가 바귈 때마다 실행합니다.

…
    body.mob { max-width: 720px }
…

→ css에서 body.mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.