[UX/UI] HTML 마크업 - http://www.subcide.com (1)
마크업 실습
참조 : http://www.subcide.com/examples/creating-a-css-layout-from-scratch/
그룹 마크업
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>
'Web Programing > UI, UX, html' 카테고리의 다른 글
| 마크다운(markdown) (0) | 2021.03.23 |
|---|---|
| [UX/UI] HTML 마크업 - http://www.subcide.com (2) (0) | 2021.03.16 |
| [UX/UI] HTML - 폼 컨트롤 (0) | 2021.03.16 |
| [UX/UI] HTML - 링크와 이미지 (0) | 2021.03.16 |
| [UX/UI] HTML - 테이블 셀합치기 (0) | 2021.03.16 |
| [UX/UI] HTML - 테이블을 구성하는 태그 (0) | 2021.03.16 |
| [UX/UI] HTML - 목록을 구성하는 태그 (0) | 2021.03.16 |
| [UX/UI] HTML - 문장을 구성하는 태그 (0) | 2021.03.16 |