반응형
Table대체->div태그
div를 이용한 레이아웃
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<div>
<h1>MY HOMEPAGE</h1>
<hr />
</div>
<div>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</div>
<hr />
<div>
<h1>What is HTML5?</h1>
<p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<hr />
<div>
<p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
</div>
</div>
</body>
</html>
시멘틱(semantic)을 이용한 레이아웃
개발, 편집을 빠르게 하기 위해 각 위치별 태그를 써주는 것을 시멘틱이라고 함
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
</head>
<body>
<header><!--제목-->
<h1>MY HOMEPAGE</h1>
<hr />
</header>
<nav><!--메뉴-->
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</nav>
<hr />
<section><!--본문-->
<h1>What is HTML5?</h1>
<p>HTML5 is aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<hr />
</section>
<footer><!--사이트 바닥-->
<p>xxx주식회사 어쩌구 저쩌구 00구 00동</p>
</footer>
</body>
</html>
<header></header>: 제목을 뜻하는 태그
<nav></nav>: 메뉴
<footer></footer>: 사이트 바닥
반응형