레이어, 그룹 태그 : <div> </div>
<div></div> 태그는 블럭을 지정해서 스타일을 적용하거나 레이어를 만들 때 사용한다.
여러개의 문단에 동일한 스타일을 지정할 필요가 있을 때 각각의 문단에 스타일을 적용할 수도 있지만 여러개의 문단을 <div>태그로 묶어 한번에 스타일을 적용할 수 있다. 또한 테두리 여백과 색 등의 스타일을 지정하여 레이어를 만들 수도 있다. 아래 예제 박스가 <div>태그의 사용 예라고 할 수 있다.
일부 편집자들은 <div>태그를 문단 태그인 <p>태그를 대신해서 사용하기도 한다. 이는 아주 잘못된 습관이다. <div> 태그는 <p>태그나 <hx> 태그 등 텍스트에 사용되는 태그 없이 텍스트를 <div>태그를 묶어도 뷰어에서 택스트가 문제 없이 나타날 수 있다. 그리고 동일한 CSS스타일을 지정하면 <div>와 <p> 태그가 똑같이 표현될 수도 있다. 하지만 아무런 태그를 사용하지 않고 <br/>로 줄바꿈만 해도 아무 문제 없이 뷰어에 내용이 나타난다.
<div>태그는 <p>태그보다 쓰임이 더 다양하다. <div>에는 위치를 지정하는 스타일이을 적용할 수 있다. 흔히 '레이어'라고 부르는, 화면의 어느 위치에든 배치할 수 있는 사각형 박스를 만들수 있는 것이다. 이런 특징 때문에 <div>태그를 이용하면 보다 다양한 편집을 할 수 있게 된다. 이미지 위에 텍스트를 올린다던가, 텍스트가 서로 겹치는 편집. EPUB3.0에서는 텍스트나 이미지를 터치해서 다른 위치로 이동시키는 등의 작업을 <div>태그로 처리할 수 있다. 아무런 스타일을 적용하지 않은 <div>와 <p>태그는 다른 점이 없어 보이지만, 뷰어는 <div>를 처리하기 위해 <p>보다 더 다양한 정보를 분석하기 때문에 목적에 맞게 사용해야 편집자가 원하는 표현을 보다 정확히 끌어낼 수 있다.
◈ <div> </div> 태그 문법 ◈
<div style="속성1:값; 속성2:값;...속성n:값>
<p>문단 내용 </p>
<p>문단 내용 </p>
...
<p>문단 내용 </p>
</div>
여러 문단에 동일한 스타일을 적용할 경우 스타일을 적용해야 하는 문단이나 내용을 <div>와 </div>로 묶어줍니다.
<div style="border: 1px dashed rgb(121, 165, 228); background-color: rgb(219, 232, 251); padding: 10px;">
<p>문단 내용</p>
</div>
<div>는 스타일만 적용할 수 있는게 아니고 테두리, 테두리 선, 테두리 채우기 등 레이어를 만들어 레이어 안에 다양한 효과를 줄 수 있습니다. 글자와 이미지를 겹치는 편집 등을 <div>로 처리할 수 있습니다.
<p style="text-align:center">div 태그는</p>
<p style="text-align:center">여러 문단에 같은 스타일을 적용할때 사용한다.</p>
<div style="text-align:center">
<p>스타일을 한번만 지정하면 되기 때문에</p>
<p>스타일을 수정할 때도 편하고</p>
<p>코드도 깔끔하게 정리할 수 있다.</p>
</div>
<div style="border: 1px dashed rgb(121, 165, 228); background-color: rgb(219, 232, 251); padding: 10px;">
<p>레이어를 만들어 스타일을 지정할 수도 있다. 테두리, 배경색 등을 지정해 메모나 글상자 등 본문과 구분하기 위한 내용을 정리할 때 유용하다.</p>
</div>
div_tag_sample.html
◈ 편집에 적용한 예 ◈
<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:300px;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>
div_tag_style_sample.html
* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.
* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다.
