<html>

<head>
<style>
div.example
{
text-align:center;
width:98%;
background-color:#DCECB5;
margin:0px;
padding:5px;
border:1px solid #d4d4d4;
}


div.p1
{
text-align:center;
width:98%;
background-color:#DCECB5;
margin:0px;
padding:5px;
border:1px solid #d4d4d4;
position:absolute;
top:250px;left:100px;
}

div.p2
{
text-align:center;
width:98%;
background-color:#ffECB5;
margin:0px;
padding:5px;
border:1px solid #d4d4d4;
position:absolute;
top:230px;left:60px;
}


</style>


</head>

<body>

<p style="text-align:center">div 태그는</p>
<p style="text-align:center">여러 문단에 같은 스타일을 적용할때 사용한다.</p>

<div class="example">
   <p>div 태그로 묶지 않을 경우 모든 문단에 스타일을 적용해야 한다. </p>
   <p>하지만 문단의 스타일이 동일하면 div 태그로 묶어 스타일을 한번에 지정할 수 있다.</p>
   <p>뿐만 아니라 배경색, 테두리 등을 지정해 본문과 구분해야 하는 내용을 정리하는데도 좋다.</p>
</div>

<div class="p1">
   <p>div 태그는 화면의 임의의 위치를 지정할 수도 있다. 그리고 위치를 겹치게 만들 수도 있다. 이 기능을 스크립트와 함께 적용을 하면 인터렉티브한 콘텐츠 제작도 가능하다. 박스를 선택해서 이동하거나 움직이는 애니메이션 효과를 낼 수도 있게 된다.</p>
</div>

<div class="p2">
   <p>그리고 div로 만든 박스 영역은 서로 겹칠 수도 있다. 이런 기능을 이용하면 이미지 위에 택스트를 올리거나 텍스트가 겹치게 만드는 등 다양한 편집 효과를 낼 수 있다. </p>
</div>

</body>
</html>