CSS : 미디어쿼리(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를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다.

모바일 기기	가로	세로
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입니다.

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

all은 Media Type을 나타냅니다. and 전, 후에 띄어서 씁니다.

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

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

위 구문은 원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 때는 파란색으로 지정한다는 뜻이므로 PC에서는 글자 색상이 빨간색으로, 모바일에서는 파란색으로 나타나게 됩니다.

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

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

위 구문은 원래 글자색이 파란색인데, 화면이 768px보다 커지면 글자색을 빨간색으로 지정한다는 뜻이므로 모바일 우선으로 하면서도 같은 결과를 가져옵니다.

---

미디어쿼리 실습

모바일과 태블릿, 그리고 PC의 경계를 768px, 1024px, 1280px로 하여 레이아웃이 달라지는 미디어쿼리를 실습해 보도록 하겠습니다. 레이아웃 템플릿은 Figma를 사용하여 다음과 같이 계획하였습니다.

CSS 소스 보기

h1,
h2,
ul,
li,
p,
div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style-type: none;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
}

a {
    line-height: 1.5;
    color: #333;
}

body {
    background: #f1f1f1;
    font-size: 13px;
}

header {
    background: coral;
}

h1 {
    font-size: 25px;
    color: #cc0;
    padding: 10px;
    color: #fff;
}

.lnb li {
    margin: 10px;
    padding: 10px;
    background: lightgreen;
}

.content {
    padding: 20px;
}

h2 {
    font-size: 20px;
}

.ext {
    margin: 10px;
    padding: 20px;
    background: lightgreen;
}

footer {
    padding: 10px;
    background: #aaa;
}

/* 미디어쿼리 */
@media all and (min-width: 768px) and (max-width: 1024px) {
    .lnb {
        float: left;
        width: 25%;
    }

    .content {
        float: left;
        width: 75%;
    }

    .aside {
        clear: both;
    }
}

@media all and (min-width: 1025px) {
    .wrap {
        max-width: 1280px;
        margin: 0 auto;
    }

    .lnb {
        float: left;
        width: 20%;
    }

    .content {
        float: left;
        width: 50%;
    }

    .aside {
        float: right;
        width: 30%;
    }
}

결과는 다음과 같습니다.

원본 소스 보기 원본 사이트 보기

---

미디어쿼리를 흉내내는 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에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.