2. 기본 레이아웃 구성
jpg 파일 두 가지와 html 파일을 사용해 시작합니다.
html 파일은 [코드 13-4]처럼 구성되어 있습니다. 그다지 어려운 구성은 아니므로 자세한 설명은 생략합니다. 단, 모바일 페이지이므로 viewport meta 태그를 사용했습니다.
<코드 13-4> 시작 페이지
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 초기화 -->
<style>
</style>
<!-- 공통 구성-->
<style>
</style>
<!-- 헤더 구성 -->
<style>
</style>
<!-- 본문과 푸터 구성 -->
<style>
</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 aidpiscing elit. Sed non diam neque. Maecenas mauris massa, aliquet ut mollis fermentum, pellentesque et leo, Sed eu pellentesque ex</p>
</article>
</dlv>
<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 prottitor eget. Praesent mattis tellus eu neque pharetra, quis pulvinar sem rhoncus. Morbi maximus justo urna, ac malesuada nulla suscipit in.</p>
</article>
</div>
<div id="main-footer">
<footer class="container">
<div>ⓒ1991-2017 Example. All rights reserved.</div>
</footer>
</div>
</body>
</html>
