POOPOO: 배변 일기 앱
SMALL
마크업 실습
참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/
CompanyName - PageName
Enlighten Designs is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio. We are currently undergoing a 'face lift', so if you have any questions or would like
www.subcide.com
그룹 마크업
div 만을 사용해서 마크업을 합니다
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>About | Enlighten Designs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navication</strong></dt>
<dd><a href="#contents">Skip to content</a></dd>
</dl>
<div id="wrap">
<!-- header -->
<div id="header">
<!-- 로고 -->
<h1>Enlighten Designs</h1>
<!-- 메인메뉴 -->
<h2>Main menu</h2>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<div id="contents">
<h2>About</h2>
<h2>Contact Us</h2>
</div>
<!-- //contents -->
<!-- aside -->
<div id="aside">
<h2>Aside</h2>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
</div>
<!-- //footer -->
</div>
</body>
</html>
섹션 마크업
브라우저 버전 < IE 9 인 경우에는 HTML5 요소가 제대로 적용되지 않을 수 있습니다.
따라서 아래 링크에서 제공하고있는 브라우저 버전호환을 도와주는 자바스크립트 파일을 사용하는 것으로 해결이 가능합니다.
https://raw.githubusercontent.com/aFarkas/html5shiv/master/dist/html5shiv.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>About | Enlighten Designs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="./html5shiv.js"></script>
<!--[if lt IE 9]]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>
<body>
<dl class="skip-nav">
<dt><strong>skip navication</strong></dt>
<dd><a href="#contents">Skip to content</a></dd>
</dl>
<div id="wrap">
<!-- header -->
<header id="header">
<!-- 로고 -->
<h1>Enlighten Designs</h1>
<!-- 메인메뉴 -->
<nav>
<h2>Main menu</h2>
</nav>
</header>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- contents -->
<section id="contents">
<h2>About</h2>
<h2>Contact Us</h2>
</section>
<!-- //contents -->
<!-- aside -->
<aside id="aside">
<h2>Aside</h2>
</aside>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
</body>
</html>LIST