CSS 미디어 쿼리 알아보기

웹 공부일지

CSS 미디어 쿼리 알아보기 본문

MarkUp

CSS 미디어 쿼리 알아보기

개발자로 거듭나기 2022. 8. 13. 17:10

미디어쿼리 (media query)

미디어 쿼리란 반응형 웹 디자인의 핵심 부분입니다. 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다.

가장 간단한 미디어 쿼리 구문은 다음과 같습니다.

@media media-type and (media-feature-rule) {
/* CSS rules go here */
}

@media 작성 방법과 속성들

미디어 타입에 대해서 알아보겠습니다. and 전 후에 띄워 씁니다.

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

(max-width : npx) => 화면 폭이 npx 이하로 떨어질 때 부터 적용된다는 소리
(min-width : npx) => 화면 폭이 npx 이상이 될 때 부터 적용된다는 소리

★ 원래 글자색은 빨강, 화면 크기가 768px보다 작아지면 글씨색이 파랑이 됩니다.

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

★ 위의 구문과 효과는 같아요. 하지만 작은 장치에서 페이지를 더 효울적으로 표시되게 하려면 모바일 우선으로 설계합니다.

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

★ 브라우저의 방향에 따라 다른 레이아웃을 제공할 수 있습니다. 다음은 세로방향이 더 길 때 배경색을 하늘색으로 지정한다는 뜻 입니다.

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

★ 다음은 가로방향이 더 길 때 배경색을 연두색으로 지정한다는 뜻 입니다.

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

실전 코드

다음은 미디어 쿼리를 적용해서 기종의 화면 크기에 따라서 레이아웃 배치가 바뀌는 코드입니다. 768px, 1024px, 1280px 로 해서 모바일과 태블릿, PC의 경계를 설정했습니다. 우선 레이아웃 배치 형태를 보시죠!

코드 보기

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

<head>
    <meta charset="utf-8">
    <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 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>

결과

참고

기기별 해상도 입니다. 다음을 참고해서 기기에 맞는 mediaQuery를 작성해 봅시다.

모바일 기기	가로	세로
iPhoneX	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

'MarkUp' 카테고리의 다른 글

CSS - SCSS가 뭘까? (10)	2022.08.18
정규식 표현 맛보기 (7)	2022.08.16
HTML - 구조 관련 요소 알아보기 (8)	2022.08.12
CSS 기본과 사용법을 알아보자! (5)	2022.08.12
비트맵과 벡터의 차이는 무엇일까? (13)	2022.08.09