반응형 웹 레이아웃

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Media query Resolution Dependent Layout</title>
    <meta charset="UTF-8">
    <style>
        html, body, ul, ol, li, form, fieldset, legend
        {
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
        fieldset,img { border: 0; }
        legend { color: #000; }
        li { list-style: none; }
        sup { vertical-align: text-top; }
        sub { vertical-align: text-bottom; }

        table
        {
            border-collapse: collapse;
            border-spacing: 0;
        }

        caption, th, td
        {
            text-align: left;
            vertical-align: top;
            font-weight: normal;
        }

        input, textarea, select
        {
            font-size: 110%;
            line-height: 1.1;
        }

        abbr, acronym
        {
            border-bottom: .1em dotted;
            cursor: help;
        }

        body
        {
            margin: 20px;
            color: #000;
            background: #fff;
            font: 90%/1.3 Gillim, Arial;
        }

        #container
        {
            float: left;
            width: 1000px;
            background: #bbb;
        }

        #nav
        {
            float: left;
            width: 200px;
            background: lime;
        }

        #content
        {
            float: left;
            width: 550px;
            margin: 0 0 0 25px;
            background: yellow;
        }

        #extras
        {
            float: right;
            width: 200px;
            background: gray;
        }

        .feature-image
        {
            float: right;
            margin: 0 0 10px 10px;
        }

        @media screen and (max-width:999px)
        {
            #container { width: 800px; }

            #extras
            {
                clear: left;
                float: none;
                margin: 0 0 0 225px;
                width: 550px;
            }
        }

        @media screen and (max-width:480px)
        {
            #container { width: 400px; }

            #nav
            {
                float: none;
                width: auto;
            }

            #content
            {
                float: none;
                width: auto;
                margin: 0;
            }

            #extras
            {
                float: none;
                width: auto;
                margin: 0;
            }

            .feature-image { display: none; }
        }
    </style>
</head>
<body>
<div id="container">
    <h1>웹디자인 및 개발</h1>
    <div id="nav">
        <ul>
            <li><a href="#">메뉴 1</a></li>
            <li><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>웹디자인 및 개발 직종 소개</h2>
        <p>
            <img class="feature-image" src="http://lorempixel.com/240/192/technics" alt="fern" />웹이라는 매체를 이용해서 채용사이트, 그룹웨어와 같이 기관, 단체, 회사의 특정한 목적을 효과적으로 달성할 수 있도록 기획, 디자인, 프로그래밍, 데이터베이스 설계 및 구축 등을 거쳐 인터넷 환경에 맞는 웹페이지를 제작한다.경기과제는 실기 작업만으로 이루어져 있으며 컴퓨터로 작업한다. 프리젠테이션 응용 프로그램을 사용하여 기획서를 작성한다. 그래픽 응용프로그램을 사용하여 이미지 및 애니메이션을 제작한다. 주어진 주제와 기능에 맞도록 데이터베이스를 설계․구축하고, php 및 java 등의 프로그래밍 언어를 사용하여 웹사이트를 구축한다.
        </p>
    </div>
    <div id="extras">
        <h3>관련정보</h3>
        <p>
        - Plan & Graphic Design<br>
        - Animation & Video<br>
        - Usability & Accessibility(웹표준)<br>
        - Client & Server-side programming 등<br>
        </p>
    </div>
</div>
</body>
</html>