IT Cookbook, HTML5 프로그래밍 입문 (3판)

8장 반응형 웹

기본 예제 8-1 뷰포트 설정

246페이지

코드 8-2 with_meta.html
<!DOCTYPE html>
<html>
<head>
    <title>With Viewport Meta</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1">
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

기본 예제 8-2 모니터와 프린터 구분

250페이지

코드 8-3 at_media_rule.html
<!DOCTYPE html>
<html>
<head>
    <title>Media Type</title>
    <style>
        @media screen {
            body {
                background-color: red;
            }
        }

        @media print {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <h1> Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

기본 예제 8-3 스마트폰, 태블릿PC, 데스크톱 구분

254페이지

코드 8-7 media_feature.html
<!DOCTYPE html>
<html>
<head>
    <title>Responsive Web Basic</title>
    <style>
        @media (max-width: 499px) {
            body { background: red; }
        }

        @media (min-width: 500px) and (max-width: 799px) {
            body { background: green; }
        }

        @media (min-width: 800px) {
            body { background: blue; }
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

기본 예제 8-4 화면 방향 전환

255페이지

코드 8-8 orientation.html
<!DOCTYPE html>
<html>
<head>
    <title>Media Feature</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
    <style>
        @media screen and (orientation: portrait) {
            body {
                background-color: red;
            }
        }

        @media screen and (orientation: landscape) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

다음 예제는 데스크톱에서는 큰 차이가 발생하지 않습니다.

기본 예제 8-5 반응형 웹 패턴 1

260페이지

코드 8-9 pattern1.html
<!DOCTYPE html>
<html>
<head>
    <title>패턴1</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
    <style>
        * { 
            margin:0; 
            padding: 0;
        }

        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        #menu {
            width: 260px;
            float: left;
        }

        #section {
            width: 700px;
            float: right; /* left로 입력해도 상관 없습니다. */
        }

        @media screen and (max-width: 767px) {
            /* 스마트폰 사이즈에서는 전부 해제합니다. */
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
    </div>
</body>
</html>

작은 화면과 큰 화면 두 개의 결과를 확인해보세요.

기본 예제 8-6 반응형 웹 패턴 2

261페이지

코드 8-9 pattern2.html
<!DOCTYPE html>
<html>
<head>
    <title>패턴2</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
    <style>
        * { 
            margin:0; 
            padding: 0;
        }

        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        #menu {
            width: 260px;
            float: right;
        }

        #section {
            width: 700px;
            float: left;
        }

        li { list-style:none; }

        @media screen and (max-width: 767px) {
            /* 스마트폰 사이즈에서는 전부 해제합니다. */
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
    </div>
</body>
</html>

기본 예제 8-7 반응형 웹 패턴 3

263페이지

코드 8-9 pattern3.html
<!DOCTYPE html>
<html>
<head>
    <title>패턴3</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
    <style>
        * { 
            margin:0; 
            padding: 0;
        }

        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        #menu {
            width: 260px;
            float: right;
        }

        #section {
            width: 700px;
            float: left;
        }

        li { list-style:none; }

        @media screen and (max-width: 767px) {
            /* 스마트폰 사이즈에서는 전부 해제합니다. */
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
    </div>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
</body>
</html>

기본 예제 8-8 반응형 웹 패턴 4

264페이지

코드 8-9 pattern4.html
<!DOCTYPE html>
<html>
<head>
    <title>패턴4</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
    <style>
        * { 
            margin:0; 
            padding: 0;
        }

        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        #menu {
            width: 260px;
            float: left;
        }

        #section {
            width: 700px;
            float: right;  /* left로 입력해도 상관 없습니다. */
        }

        li { list-style:none; }

        @media screen and (max-width: 767px) {
            /* 스마트폰 사이즈에서는 전부 해제합니다. */
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
    </div>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
</body>
</html>

← 9장 →