CSS3 - 반응형 웹 만들기 @media

액트 2019. 7. 18.

@media 속성을 이용한 화면 크기에 따른 css 적용

screen width 값에 따른 속성을 정의해서 스마트폰, 태블릿, PC 화면 등을 구별하여 정의한다.

사용법

모바일 환경: @media screen and (max-width:767px) { ... } /* 최대 크기가 767 인 것 */

태블릿 환경: @media screen and (min-width:767px) and (max-width:959) { ... }

컴퓨터 환경: @media screen and (min-width:960) { ... } /* 최소 크기가 960 인 것, 즉 960 이상인 것 */

max-width 에 따라서 적용되게끔 작성한다.

아래 예시

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title></title>

    <style>

        @media screen and (max-width:767px) {
            #wrap { width:100%; }
            #content_wrap #content p { font-size:3em; font-weight:bold; color:blue;}
        }

        @media screen and (min-width:768px) and (max-width:959px) {
            #wrap { width:100%; }
            #content_wrap #content p { font-size:1.5em; font-weight:bold; color:green;}
        }

        @media screen and (min-width:960px) {
            #wrap { width:80%; }
            #content_wrap #content p { font-size:1em; font-weight:bold; color:red;}
        }

        * { margin:0; padding:0; }
        li { list-style:none; }

        #wrap { margin:0 auto; }

        #header { border:1px solid #cccccc; height:100px; }
        #header > h1 { text-align:center; }

        #nav { border:1px solid #cccccc; }
        #nav ul { overflow:hidden; }
        #nav ul li { float:left; text-align:center; width:20%; height:60px; line-height:60px; border:1px solid #cccccc; box-sizing:border-box; }

        #content_wrap { border:1px solid #cccccc; }
        #content_wrap #content { padding:10px; }
        #content_wrap #content > h2 { border-bottom:1px solid #cccccc; margin-bottom:10px; height:100px; line-height: 100px; text-align: center;}
        #content_wrap #content > p { border-bottom:1px solid #cccccc; margin-bottom:10px; height:300px; line-height: 300px; text-align: center;}

        #footer { height:100px; line-height:100px; text-align:center; font-size:1.5em; font-weight:bold; margin:0 auto; border:1px solid #cccccc; }

    </style>

</head>
<body>

    <div id="wrap">
        <div id="header">
            <h1>HEADER</h1>
        </div>

        <div id="nav">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
                <li>menu5</li>
            </ul>
        </div>

        <div id="content_wrap">
            <div id="content">
                <h2>Nye의 IT세상</h2>
                <p>
                    반응형 웹 만들기
                </p>
            </div>
        </div>

        <div id="footer">
            우진아빠
        </div>
    </div>

</body>
</html>

각 사이즈 별로 적용 되어 달라진 색깔을 확인한다.

모바일 = 파랑, 태블릿 = 초록, PC = 빨강

모바일 환경

@media screen and (max-width:767px) {
            #wrap { width:100%; }
            #content_wrap #content p { font-size:3em; font-weight:bold; color:blue;}
        }

태블릿 환경

@media screen and (min-width:768px) and (max-width:959px) {
            #wrap { width:100%; }
            #content_wrap #content p { font-size:1.5em; font-weight:bold; color:green;}
        }

컴퓨터 환경

@media screen and (min-width:960px) {
            #wrap { width:80%; }
            #content_wrap #content p { font-size:1em; font-weight:bold; color:red;}
        }

'IT > 소프트웨어' 카테고리의 다른 글

HTML5 & CSS3 - 웹접근성 스킵 메뉴 만들기 (0)	2019.07.24
HTML5 - 기본 레이아웃 만들기 (0)	2019.07.23
CSS3 - 반응형 웹 만들기 @media 규칙 (0)	2019.07.18
CSS3 - 웹 폰트, 구글 폰트, font 적용 (0)	2019.07.16
CSS3 - CSS 드롭다운 가로 메뉴 만들기 (0)	2019.07.16