<div>태그
<div>태그는 태그가 가질 수 있는 속성인 id와 class속성을 이용해 문서를 논리적은 분활할 때 사용된다. <div>태그는 블럭 레벨 요소로서 태그 앞 뒤로 줄바꿈을 한다. 또한, <div>태그를 사용해 브라우저의 절대적인 좌표를 이용해 위치를 지정할 수도 있고, 브라우저에 상관없이 고정된 위치에 문자열이나 이미지를 출력되게 할 수 있다.
<div>태그는 문장 단위의 좌표가 아니므로 겹쳐쓰기가 가능하며, CSS를 사용하여 레이어 영역을 만들어 줄 수 있다. 특히 <table>태그와 비교해 <div>태그를 말하는데 문서의 레이아웃을 작성할 때 <table>보다 <div>태그가 좀 더 유연하고 코드양을 줄일 수 있다.
<div>태그의 블럭레벨(Block level elements) 특성
<div>태그는 태그 앞 뒤로 줄 바꿈을 하는 블럭 레벨 엘레멘트이다. <div>태그 앞 뒤에 있는 엘레멘트들은 가로줄로 흐르지 않고 엔터를 입력한 것 처럼 줄바꿈을 한다. 레벨의 특성는 레이어를 다둘 때 중요한데 대표적인 레벨은 블럭레벨과 인라인(inline)레벨이다.
<div>두 번째 블럭레벨 문단</div>
위 HTML의 결과는 아래와 같다.
<span>태그
<span>태그는 글자의 서식을 정의한 후 적용할 때 사용하는 태그로 한 줄 서식을 정의한다. <div>와 <p>태그가 비슷한 작용을 하지만 <div>와 <p>태그는 <span>태그와 달리 문단 단위로 서식을 정의한다. <span>태그는 인라인레벨 속성을 가지고 있으므로, 태그 앞 뒤에 엘레멘트가 줄 바꿈을 하지 않고 옆으로 쌓인다.
<span>두 번째 span 콘텐츠</span>
위 HTML의 결과는 아래와 같다.
예제)
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>menu</b><br />
HTML<br />
CSS<br />
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 2011 W3Schools.com
</div>
</div>
</body>
</html>
'HTML& CSS > HTML' 카테고리의 다른 글
| 고급 - <input> 태그의 type="image" 를 사용할 때 주의할 점 (0) | 2009.08.03 |
|---|---|
| 고급 - head 엘레멘트들 (0) | 2009.08.03 |
| 입력필드의 드랍다운 리스트를 출력하는 <select>태그 (0) | 2009.07.01 |
| 태그 - 텍스트에어리어(textarea) (0) | 2009.07.01 |
| 태그 - 프레임 (0) | 2009.07.01 |