미디어 쿼리

728x90

미디어쿼리

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

1. < Link ~ media " " >

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

크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 또한 다음 트로이 (http://troy.labs.daum.net/) 에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수도 있습니다.

모바일 기기	가로	세로
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 Note8	360	640
iPad Pro	1024	1336
⋮	⋮	⋮

2. @media

처음 로딩할 때 성능이 저하되지 않도록 CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형 웹 CSS입니다.

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

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

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

미디어 쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다.

@media only screen and (orientattion: protrait) {
body {background: skyblue; }
}

위 구문은 모바일 기기를 세워 세로가 가로보다 긴 세로방향이 되면 배경색을 하늘색으로 지정한다는 뜻입니다.

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

위 구문은 모바일 기기를 세워 가로가 세로보다 긴 가로방향이 되면 배경색을 연두색으로 지정한다는 뜻입니다.

쉼표로 구분하여 조건을 추가할 수 있습니다.

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

위 구문은 가로가 600px에서 900px 사이일 때, 그리고 1100px 이상일 때에만 글자색을 빨간색으로 한다는 뜻입니다.

3. 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에 속성을 추가하면 모바일일 때의 속성이 등록되는 것입니다.

예제 2-75)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>오르세 미술관</title>
    <style type="text/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%;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <header>
            <h1>Musee d'Orsay</h1>
        </header>
        <div id="container" class="clear">
            <div class="lnb">
                <ul>
                    <li><a href="#">작가의 작품</a></li>
                    <li><a href="#">작가의 시대</a></li>
                    <li><a href="#">작가의 일생</a></li>
                </ul>
            </div>
            <div class="content">
                <h2>PICTURES</h2>
                <p>
                    <a href="#">피리부는 소년</a><br>
                    <a href="#">고흐의 방</a><br>
                    <a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
                    <a href="#">오페라좌의 관혁악단</a><br>
                    <a href="#">만종</a><br>
                    <a href="#">제비꽃 장식을 단 베트르모리조</a><br>
                    <a href="#">피리부는 소년</a> <br>
                    <a href="#">고흐의 방</a><br>
                    <a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
                    <a href="#">오페라좌의 관혁악단</a><br>
                    <a href="#">만종</a><br>
                    <a href="#">제비꽃 장식을 단 베트르모리조</a>
                </p>
            </div>
            <div class="aside">
                <ul class="ext">
                    <li>
                        <h2>Workshop Go</h2><a href="#">Life drawing workshop</a>
                    </li>
                    <li>
                        <h2>Summer Exhibition</h2>
                        <a href="#">A-level Summer Exhibition Online 2010</a>
                    </li>
                    <li>
                        <h2>RA Collection</h2>
                        <a href="#">RA Collections</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <p>©2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
    </footer>
</body>

</html>

결과 보기

See the Pen 2-75 by HwangYoujin (@youJin2) on CodePen.

728x90

'CSS' 카테고리의 다른 글

이미지 표현 (3)	2022.08.22
Scss로 강아지 만들기 (7)	2022.08.18
Scss (5)	2022.08.18
CSS 기본 규칙 (4)	2022.08.15
01. 비트맵과 벡터 (9)	2022.08.10

🎆Youcodein🎇

미디어 쿼리

미디어쿼리

1. < Link ~ media " " >

2. @media

미디어 쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다.

쉼표로 구분하여 조건을 추가할 수 있습니다.

3. media query를 흉내내는 script

예제 2-75)

'CSS' 카테고리의 다른 글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바

미디어 쿼리

미디어쿼리

1. < Link ~ media " " >

2. @media

미디어 쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다.

쉼표로 구분하여 조건을 추가할 수 있습니다.

3. media query를 흉내내는 script

예제 2-75)

'CSS' 카테고리의 다른 글

관련글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바