p와 div의 차이는 다음과 같다.
p 태그는 paragraph의 머릿글자 p를 본떠서 만든 태그이다. Paragraph란 '절', '단락(段落)' 이라는 뜻이다. 따라서, p 태그는 HTML 문서 안에서 문장의 단락을 표시하는데 사용하라는 태그이다. 주요 특징은 </p>태그 다음은 다음의 단락과 구분하기 위해 한 줄을 강제로 비운다는 것이다.
div 태그는 DIVISION의 약자로 '경계를 분활 하다' 또는 '영역을 나누다' 라는 뜻이다. 이것은 시각적 표현결과로 문장 또는 단락 형태로 보면 <P>태그와 구분이 잘 안된다. 하지만 용도는 다르다. P태그를 사용한 단락 이전과 단락 이후를 감싸거나 또는 P태그 대신 단락을 감싸서 '이 영역은 그룹핑 된 블록 영역입니다'라고 외치는 것이다. 즉 어떤 영역을 DIV태그로 묶어 블록단위로 정의하는 것이다.
예를 들면 문장1, 문장2, 문장3, 문장4가 있는데 문장 (1과 2를 묶어서) 제1권, (문장3과 문장4를 묶어서) 제2권으로 구분하고 배경색을 칠해야 한다면 문장을 2개로 그룹핑해야한다. 그래야 2개의 영역에 배경색을 지정해서 칠할 수 있게 때문이다, 이럴 때 div태그를 사용한다.
<div style="background:yellow; width:200; height:200; padding:10px">
<p> 문장의 1,2 를 그룹핑하여 하나의 영역인 <b>[제1권]</b>이라는 이름으로 묶었습니다.</p>
<p>여기는 문장1이 삽입되는 자리입니다. 책을 디자인 합니다. 글자도 삽입하고 그림도 삽입하고 영상도 삽입하고 소리도 삽입합니다.</p>
<p>여기는 문장2가 삽입되는 자리입니다. 책을 디자인 합니다. 글자도 삽입하고 그림도 삽입하고 영상도 삽입하고 소리도 삽입합니다.</p>
</div>
<div style="background:orange; width:200; height:200; padding:10px">
<p> 문장의 3,4 를 그룹핑하여 하나의 영역인 <b>[제2권]</b>이라는 이름으로 묶었습니다.</p>
<p>여기는 문장3이 삽입되는 자리입니다. 책을 디자인 합니다. 글자도 삽입하고 그림도 삽입하고 영상도 삽입하고 소리도 삽입합니다.</p>
<p>여기는 문장4가 삽입되는 자리입니다. 책을 디자인 합니다. 글자도 삽입하고 그림도 삽입하고 영상도 삽입하고 소리도 삽입합니다.</p>
</div>웹사이트 홈 레이아웃
이번에는 좀더 다른 예로 웹사이트를 레이아웃에 대해 예를 들어 본다. 일반적인 사이트 디자인 레이아웃은 상단에 '헤더' 왼쪽에 '사이드바' 오른쪽에 '본문'
아래쪽에 'fOOT'로 구분하여 디자인을 하게 되는데 이때 각각의 구분에 div 태그를
사용해야 웹 브라우저가 그것을 영역으로 해석하여 올바로 레이아웃이 되게 표현을 해준다.
<HTML>
<head>
<meta content="DIV SAMPLE" name="test" id="test"/>
<title></title>
<STYLE>
#div_header {
margin:auto;
width:100%;
height:50px;
border:1px solid gray;
text-align:center; padding:10px;
background:lightgray;}
#div_sidebar {
float:left;
margin-right:5px; width:22%; height:150px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center;
padding-top:65px;
background:rgb(0,230,0);
position:absolute;}
#div_body {
float:left;
margin:0px; width:80%; height:150px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center;
padding-top:65px;
background:rgb(0,128,255);
position:absolute; left:21%;}
#div_foot {
margin-top:5px;
width:100%; height:50px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center;
padding:12px;
background:rgb(230,0,230);
position:relative;top:155px; clear:both;}
</STYLE>
<STYLE>
body {
margin: 0;
padding: 0;
background-color: ffffff;
}
</STYLE>
</head>
<body>
<DIV ID=div_header>홈페이지</DIV>
<DIV ID=div_sidebar>사이드바</DIV>
<DIV ID=div_body>바디</DIV>
<DIV ID=div_foot>FOOT</DIV>
</body>
</HTML>