div 태그

<div id="layer1" style="width:72px; height:21px; position:absolute; left:125px; top:145px"> <img src="melos.jpg" border="0"> </div> ##### html 태그의 기본 ##### 하나의 html태그는 < 로 시작해서 >로 끝납니다. 하나의 html태그는 <태그명>으로 시작해서 </태그명>으로 끝납니다. 단, </태그명>을 생략할 수 있는 태그들이 있습니다. <뒤에 붙는 첫단어를 일반적으로 태그(tag)명이라고 하며 태그명 뒤부터 >까지 나오는 내용을 속성(attribute)라고 합니다. 속성은 해당 태그의 세부사항을 지정하는데 사용합니다. ##### 세부설명 ##### < - 태그의 시작을 알리는 표시입니다. div - 구역(division)태그를 사용하기 위한 태그명입니다. div태그의 경우 주로 웹문서에 특정 구역을 설정하는 것입니다. 쉽게 생각하면 웹문의 특정 위치에 글이나 이미지를 적을 수 있는 네모칸을 만들어 놓는다고 생각하시면 됩니다. id="layer1" - 해당 div태그의 id를 layer1이라고 지정해 준다는 뜻입니다. 쉽게 div로 지정한 특정 네모칸을 부를 수 있는 이름을 정해주는 것이라고 생각하시면 됩니다. 지정한 이름은 자바스크립트에서 호출을 하는데 사용됩니다. style="" - 해당 div태그의 스타일을 지정해 준다는 뜻입니다. 스타일은 대체로 UI(user interface)요소, 디자인요소를 정해주는데 사용됩니다. 쉽게 생각하시면 네모칸의 위치나 크기, 배경색 등을 지정해 준다고 생각하시면 됩니다. style의 세부항목과 값의 경계는 :로 표시하면 세부항목끼리의 구분은 ;로 표시합니다. width:72px - div태그로 지정된 네모칸의 가로 크기를 72픽셀로 지정한 것입니다. height:21px - div태그로 지정된 네모칸의 높이를 21픽셀로 지정한 것입니다. position:absolute - div태그로 지정된 네모칸의 위치를 절대위치로 지정한 것입니다. 절대위치는 위치의 기준을 웹문서 자체로 하는 것이고, 상대위치는 div태그가 속한 테이블 태그나 다른 div태그의 위치를 기준으로 한다는 뜻입니다. 쉽게 생각하자면, A4용지에 포스트잇을 붙일때 A4용지 왼쪽 위를 기준으로 가로 2센치 세로 2센치 위치에 포스트 잇을 붙이라고 지정한다면 절대위치를 지정한 것이며, A4위에 붙이 포스트 잇위에 다른 포스트잇을 붙이면서 미리 붙인 포스트 잇 왼쪽 위를 기준으로 가로세로 1센치 위치에 포스트 잇을 붙이도록 지정한 것이 상대위치입니다. 상대위치로 지정하게 되면 새로 붙이 포스트잇의 위치는 기존 포스트잇의 위치를 변경하게 되면 함께 변경이 되겠죠. left:125px - div태그의 위치를 왼쪽에서 125픽셀 떨어진곳에 위치시킨다는 의미입니다. top:145px - div태그의 위치를 위쪽에서 145픽셀 떨어진곳에 위치시킨다는 의미입니다. ~ - 문단태그입니다. 이것으로 둘러싸인 안의 내용은 다른 내용과 빈줄 하나의 공백이 생기게 됩니다. <img - 이미지(image)태그입니다. src="melos.jpg" - img태그에 사용한 src(source)속성은 해당위치의 해당 파일명을 가진 이미지를 불러오라는 의미입니다. 여기선 웹문서와 같은 폴더(디렉토리)에 있는 melos.jpg파일을 불러오라는 의미입니다. 당연히 img태그의 src속성으로 지정해 주는 파일형식은 웹에서 보여질 수 있는 그림파일입니다. border=0 - img태그로 표현된 이미지에 테두리를 넣을 때 두께를 0으로 하라는 의미입니다. 다시말해 테두리를 표시하지 말라는 뜻이죠. </div> - div 태그의 종결을 의미합니다. <div>~</div>안에 있는 내용이 해당 구역에서 보여지는 내용입니다. ##### 요약 ##### 해당 html문서는 웹문서의 왼쪽에서 125픽셀 위에서 145픽셀 떨어진 위치에 layer1이라는 가로 72픽셀 세로 21픽셀짜리 구역을 만들고 거기에 melos.jpg라는 이미지를 테두리 없이 보여주게 되어 있는 문서라는 얘기입니다.