공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

기본엘리먼트 작성하기 - nonCss

serpiko 2013. 11. 26. 19:14

HTML5's header, nav, article, aside, footer

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>test coding by ul element and div</title>
</head>
<body id="body">
	<div id="wrap">
		<header>
			<h1>header는 블로그의 제목같은 정보를 그룹핑</h1>
		</header>

		<div id="toolbar">
			<input type="button" value="balck" />
			<input type="button" value="white" />
		</div>
		
		<nav>
			<p>다른 페이지로 이동할 수 있는 메뉴와 같은 요소.</p>
			<ul>
				<li><a href="#">javascript</a></li>
				<li><a href="#">actionscript</a></li>
				<li><a href="#">php</a></li>
				<li><a href="#">mySQL</a></li>
				<li><a href="#">linux</a></li>
				<li><a href="#">c/c++</a></li>
			</ul>
		</nav>

	<article>
		<h2>페이지의 핵심적인 내용. 본문</h2>
		<div>
			<p>오늘은</p>
			<ul>
				<li>회사에서 일을</li>
				<li>집에서 운동을</li>
			</ul>

			<p>내일은</p>
			<ul>
				<li>회사에서 칼퇴를</li>
				<li>집에서 휴식을</li>
			</ul>
		</div>
	</article>

	<aside>
		<h2>페이지의 핵심적인 관련이 없는 부가요소</h2>
		<div>
			<ul>
				<li>최신글</li>
				<li>카테고리</li>
			</ul>
		</div>
	</aside>
	
	<footer>
		<h2>페이지 하단의 요소들</h2>
		<div>
			<ul>
				<li>회사정보</li>
				<li>회사정책</li>
				<li>회사주소</li>
			</ul>
		</div>
	</footer>

	</div>
</body>
</html>

결과)


저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

박스모델의 위치계산  (0) 2014.01.22
테이블샘플  (0) 2014.01.16
Table  (0) 2013.11.20
HTML Escape Characters: Complete List  (0) 2013.11.15
canvas의 속성제어와 context 선언 - 동시에 처리하기  (0) 2013.11.04
댓글