미디어 쿼리...?

728x90

미디어 쿼리(media query)

미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나이며, 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있습니다.

<link ~ media="">

상단의 예시는 최소 가로폭이 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 Note8	360	640
iPad Pro	1024	1366
. . .	. . .	. . .

@media

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

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

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

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

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

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

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

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

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

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

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

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

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

예제 FIGMA

미디어 쿼리를 통해 화면 크기에 능동적으로 대처 가능하게 설정했으며,
각 768px, 1024px, 1280px에 맞춰 디바이스에 맞게 경계를 구분했습니다.

CODEPEN

코드펜을 통해 예제를 구현 해보았습니다.

전체 HTML&CSS 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>오르셰미술관</title>
    <style type="text/css">
        /* CSS와 HTML의 혼용한 상태 입니다. */
        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 Exibition Online 2010</a>
                    </li>
                    <li>
                        <h2>RA Collection</h2><a href="#">RA Collections</a>
                    </li>
                </ul>
            </div>
        </div>
        <footer>
            <p>©2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
        </footer>
    </div>
</body>
<html>

결과

728x90

'CSS' 카테고리의 다른 글

색을 정의하는 총 7가지의 다양한 방법! (6)	2022.08.24
스프라이트/ir효과/백그라운드 표현 방법에 대하여 가~보자고~! (10)	2022.08.20
SCSS에 대해 알아봅시당~~ (6)	2022.08.19
꼬리 흔드는 강아지를 만들어보자! (2)	2022.08.18
CSS 기본문법에 대하여 알아보자 (10)	2022.08.15

My Reference Book

HTML

HTML

CSS

CSS

JAVASCRIPT

JAVASCRIPT

최신댓글

미디어 쿼리...?