HTML5 공간 분할 태그
- CSS로 원하는 레이아웃을 구성하기 위하여 사용한다.
div 태그 : 블록 형식으로 공간 분할 (대표적 분할 태그)
span 태그 : 인라인 형식으로 공간 분할
|
<style type="text/css">
div{border: 1px solid #aaa;}
</style>
</head>
<!-- 블록 형식 공간 분할 -->
<body>
<div style="background-color:gray">태그 - block 형식</div>
<div> 태그 - block 형식</div>
<div style="background-color:gray"> 태그 - block 형식</div>
<div> 태그 - block 형식</div>
<div style="background-color:gray"> 태그 - block 형식</div>
<br/>
<br/>
<!-- 인라인 형식 공간 분할 -->
<span style="background-color:red">span 태그 - 인라인 형식</span>
<span>span 태그 - inline 형식</span>
<span style="background-color:red">span 태그 - 인라인 형식</span>
<span>span 태그 - inline 형식</span>
<span style="background-color:red">span 태그 - 인라인 형식</span>
</body>
</html> |
(태두리와 색상의 영역구분은 이해를 돕기 위하여 설정.)
- 간단한 시맨틱 웹 페이지
|
<body>
<div>
<h1 id="header">HTML5 기본</h1>
</div>
<div>
<ul>
<li><a href="#">메뉴 - 1</a></li>
<li><a href="#">메뉴 - 2</a></li>
<li><a href="#">메뉴 - 3</a></li>
</ul>
</div>
<div>
<h1>Welcome 131ZIPDAN</h1>
<p>Have a nice day!</p>
</div>
<div>
<h1>Welcome 131ZIPDAN</h1>
<p>Have a nice day!</p>
</div>
<div>
<span>131zipdan.tistory.com</span>
</div>
</body> |
댓글