DIV 태그 예제
<div id="layer1" style="width:72px; height:21px; position:absolute; left:125px; top:145px">
<p><img src="melos.jpg" border="0"></p>
</div>
DIV 태그는 왜 사용하는가?
- 웹문서에 특정한 구역을 설정하기 위해서 사용한다.
쉽게 말하면 웹문서의 특정 위치에 글이나 이미지를 적을 수 있는 네모칸을 만들어 놓는 것이다.
DIV 태그 속성 설명
- id : 자바스크립트에서 호출하기 위한 이름 지정
- style : 스타일 지정 / 항목과 값은 : 로 구분 / 항목간은 ; 로 구분
- width, height 속성 사용가능
- position:absolute => 웹문서 자체가 div 의 위치기준이 된다.
- position:relative => "DIV 태그가 속한 테이블"이나 "상위 DIV태그" 처럼 상위태그가 위치기준이 된다.
- top, bottom, left, right 로 구체적 위치 지정
# P 태그와의 비교
- 문단을 나눈다는 의미에서는 같지만, P 태그는 P 태그를 기준으로 앞뒤 한 줄 씩의 공백을 만든다.
# SPAN 태그와의 비교
- DIV는 style속성 안에 width, height 등을 지정해 주지 않으면 한 줄 전체가 영역이 되지만,
SPAN은 style속성 안에 width, height 등을 지정해 주지 않으면 태그 안의 내용까지만 영역이 된다.