#13 div 태그 알아보기

div 태그는 그 자체로서 특별한 효과를 갖는 태그는 아니며 구역을 지정하는 의미로 쓰입니다.

레이아웃별로 특정구획과 구획을 구분할때 <div> 내용 </div>처럼 한 구획을 지정할때 쓰이며, 주로 css와 연동하여 사용됩니다.

 

 

 

 

예)) 

 

<div style="background-color:yellow">1섹터</div>
<div style="width:80px; height:100px; background-color:blue">2섹터</div>
<div style="width:100%; height:50px; background-color:green">3섹터</div>
<div style="width:auto; height:50px; text-align:center; background:rgb(0,100,230)">4섹터</div>
<div style="display: table-cell; vertical-align: middle; width:100%; height:50px; background:rgb(25,140,210)">5섹터</div>
<div style="border:1px dashed red; border-top-right-radius:2em; border-bottom-left-radius:1em; width:100%; height:50px; background-color:yellow;">6섹터</div>
<div style="border: 1px dashed black; background-color: yellow; width: 400px; height: 300px;
 margin-left: auto; margin-right: auto; padding: 5px; text-align: center; line-height: 300px; vertical-align: middle;">7섹터</div>

 

 

출력물))

 

1섹터

2섹터

3섹터

4섹터

5섹터

6섹터

7섹터

 

 

위의 예제의 경우에서처럼 과거에 테이블을 작성해서 하던것을 현재는 주로 div태그에 의존해서 작업이 이루어지고 있습니다.

실제 작업에서는 개별적으로 div태그를 지정하기보단 css에서 각자의 스타일을 정의한뒤 div 태그로 해당 아이디 스타일을 가져다 쓰는 방식을 취합니다.

 

예제의 4섹터와 5섹터는 좌우 중앙정렬과 수직 중앙정렬을 보여주는데 수직 중앙정렬의 경우에는 display:table-cell을 이용하여 테이블처럼 만든뒤 vertical-align: middle;  을 이용하여 수직중앙정렬을 하였습니다.

6섹터에서의 border 속성은 div영역의 테두리 선을 결정하는 속성 이며 4가지의 속성값을 가집니다.
solid(실선), dotted(점선), dashed(짧은 실선) 의 세가지의 선형태를 가지며, 더불어 border-radius(라운드) 값은 모서리를 둥글게 만드는 옵션입니다.