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

13장 프로젝트: 모바일 페이지 제작

기본예제 13-2 input 태그를 활용환 풀다운 메뉴

450페이지

코드 13-1 pulldown_menu.html
<!DOCTYPE html>
<html>
<head>
    <title>Checkbox</title>
    <style>
        input:checked {
            display: block;
        }

        input:checked + div {
            display: none;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <div>
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit purus risus, id gravida sem luctus non. Nulla vitae condimentum arcu. Donec dignissim interdum felis, at rutrum justo placerat in. Praesent sit amet sem felis. Mauris commodo eleifend nulla, a porttitor magna accumsan pulvinar. Pellentesque molestie lobortis scelerisque. Suspendisse ac neque a risus luctus cursus elementum sed eros. Nulla eu eros dictum, rutrum sapien laoreet, facilisis leo.</p>
    </div>
</body>
</html>

input 태그를 클릭하면, 아래의 글이 사라졌다 나타났다 합니다.

프로젝트 결과

452페이지

모바일 페이지 결과이므로 너비를 작게 출력하게 했습니다.

예제 전체 코드
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 with Hanbit</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- 초기화 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
        }

        a {
            text-decoration: none;
        }

        img {
            border: 0;
        }

        li {
            list-style: none;
        }

        }
    </style>
    <!-- 공통 구성 -->
    <style>
        .container {
            margin-left: auto;
            margin-right: auto;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
    <!-- 헤더 구성 -->
    <style>
        #main-header {
            padding: 10px 5px;
        }

        #main-header h1 {
            font-size: 20px;
            font-weight: normal;
            line-height: 27px;
            color: #222;
        }

        #main-header ul {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        #main-header li {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #main-header li a {
            color: #555;
        }

        #main-header li.active a {
            color: black;
            font-weight: 500;
        }

        #main-header label {
            text-align: center;
            float: right;
            width: 40px;
            height: 27px;
            line-height: 27px;
            color: #222;
            border: 1px solid #222;
            border-radius: 5px;
        }

        #checkbox {
            display: none;
        }

        #checkbox + nav {
            display: block;
        }

        #checkbox:checked + nav {
            display: none;
        }
    </style>
    <!-- 본문과 푸터 구성 -->
    <style>
        #main-content {
            background: #00afa0;
            padding: 40px 15px 30px;
        }

        #main-content h1 {
            text-align: center;
            margin-bottom: 20px;
            color: white;
            font-weight: 500;
        }

        #main-content p {
            color: #222;
            text-align: center;
            color: white;
        }

        #sub-content {
            padding-top: 30px;
        }

        #sub-content h1 {
            text-align: center;
            color: #333;
        }

        #sub-content h2 {
            text-align: center;
            color: #333;
            font-size: 17px;
        }

        #sub-content p {
            color: #555;
        }

        #sub-content img {
            width: 200px;
            display: block;
            margin: 10px auto;
        }

        #main-footer {
            padding-top: 40px;
        }

        footer {
            background: #323232;
            color: white;
            font-size: 12px;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div id="main-header">
        <header class="container">
            <div>
                <label for="checkbox">▼</label>
                <h1>Hanbit</h1>
            </div>
            <input id="checkbox" checked="checked" type="checkbox">
            <nav>
                <ul>
                    <li><a href="#">Brand<a></li>
                    <li class="active"><a href="#">Network</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <div id="main-content">
        <article class="container">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam neque. Maecenas mauris massa, aliquet ut mollis fermentum, pellentesque et leo. Sed eu pellentesque ex</p>
        </article>
    </div>
    <div id="sub-content">
        <article class="container">
            <h1>Make : 액션</h1>
            <h2>라즈베리 파이와 아두이노로 움직임, 소리, 빛 출력하기</h2>
            <img src="image_0.jpg">
            <p>Mauris imperdiet eros mi, et tempor est porttitor eget. Praesent mattis tellus eu neque pharetra, quis pulvinar sem rhoncus. Morbi maximus justo urna, ac malesuada nulla suscipit in.</p>
            <br>
            <h1>나도 피아노 잘 치면 소원이 없겠네</h1>
            <h2>왕초보를 위한 4주 완성 피아노 연주법</h2>
            <img src="image_1.jpg">
            <p>Nulla ipsum ante, viverra vitae elit non, laoreet sagittis ligula. Quisque tempor nisl augue, eu scelerisque tellus bibendum eu.</p>
        </article>
    </div>
    <div id="main-footer">
        <footer class="container">
            <div>©1991-2017 Example. All rights reserved.</div>
        </footer>
    </div>
</body>
</html>

← 14장 →