div태그, table태그, p태그, span태그, li태그 등 영역 태그들의 차이
영역 태그란 넓이와 높이를 속성으로 가지고 있는 태그들을 가리켜 영역 태그 라고 하며 block 이라고 도 합니다.
대표적인 영역 태그로는 table태그와 div태그를 들수가 있으며 block레벨의 하위 inline-block엘리먼트의 대표적 영역 태그 로 는 span태그 를 들수가 있겠 습니다.
그 외에도 문서의 바디부를 결정해주는 body태그가 있습니다.
div태그 의 그룹핑 태그 들 로 문단의 단락을 제어 하는 p태그
순서없는 목록 태그 인 ul 태그
순서 있는 목록태그 인 ol 태그
리스트 아이템을 제어 하는 li 태그
입력 폼을 제어 해주는 form태그
머리글을 설정 해 주는 h1~h6 태그
블록 레벨 인용문을 제어 해주는 blockquote태그
가로줄을 제어 하는 hr태그 등을 들수가 있겠 습니다.
이번 시간에 이들 영역 태그들의 속성들을 예제를 들어 파헤쳐 보면서 태그들을 비교해 보는 시간을 갖도록 하겠습니다.
table태그는 문서 내에 게재 하기 위한 각종 표를 만드는데 자주 사용 하는 영역 태그 로 써 이전에는 홈페이지나 싸이트 스킨의 영역을 레이아웃 하는데 많이 사용 했었습니다만 요즘은 div태그를 주로 사용 하는 추세로 나가고 있는것 같습니다.
이렇게 아무런 속성과 값이나 스타일 정의가 없을 경우 결과는 아래 처럼 나타 나게 될 것입니다.
결과)
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
table 태그는 이렇게 여러 가지의 하위 태그들을 가지고 있는 복합구조의 태그라고 할수 있습니다.
여기에 스타일을 주어 하나씩 꾸며 보도록 합니다.
예제2)
<style>
#tga{
margin-top:10px; margin-bottom:10px;
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,230,0);
}
</style>
<table id="tga">
<thead>
<tr>
<th>1</th><th>2</th><th>3</th><th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</tfoot>
</table>
결과)
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
예제3)
<style>
#tga{
margin-top:10px; margin-bottom:10px;
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,230,0);
}
#tga>thead{
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,0,0);
}
</style>
결과)
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
예제4)
<style>
#tga{
margin-top:10px;
margin-bottom:10px;
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,230,0);
}
#tga>thead{
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,0,0);
}
#tga>tbody{
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,230,0);
}
</style>
결과)
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
#tga{
margin-top:10px;
margin-bottom:10px;
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,230,0);
}
#tga>thead{
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,0,0);
}
#tga>tbody{
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,230,0);
}
#tga>tfoot{
width:100%;
height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,0,230);
}
</style>
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
#tga{
margin-top:10px; margin-bottom:10px;
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,230,0);
}
#tga>thead{
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(230,0,0);
}
#tga>tbody{
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,230,0);
}
#tga>tfoot{
width:100%; height:auto;
border:1px solid gray;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,0,230);
}
#tga td{
width:25%; height:auto;
border:1px solid blue;
text-align:center;
cellspacing:0px;
cellpadding:10px;
background:rgb(0,0,230);
}
</style>
| 1 | 2 | 3 | 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
<style>
#dga{
display:block;
margin-top:10px; margin-bottom:10px;
width:408px; 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:2px;
background:rgb(230,230,0);
position:relative;
overflow:hidden;
}
.dgaa{
display:inline-block;
float:left;
margin-right:1px; margin-bottom:1px;
width:25%; height:30px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center;
padding:2px;
background:rgb(230,0,0);
position:absolute; top:0; left:0;
overflow:hidden;
}
.dgab{
display:inline-block;
float:left; margin-right:1px; margin-bottom:1px;
width:25%; height:30px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center;
padding:2px; background:rgb(230,0,0);
position:absolute; top:0; left:101px;
overflow:hidden;
}
.dgac{
display:inline-block;
float:left; margin-right:1px; margin-bottom:1px;
width:25%; height:30px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center; padding:2px;
background:rgb(230,0,0);
position:absolute; top:0; left:202px;
overflow:hidden;
}
.dgad{
display:inline-block;
float:left; margin-right:1px; margin-bottom:1px;
width:25%; height:30px;
border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray;
text-align:center; padding:2px;
background:rgb(230,0,0);
position:absolute; top:0; left:303px;
overflow:hidden;
}
.dgba{
.dgbb{
.dgbc{
.dgbd{
.dgca{
.dgcb{
.dgcc{
.dgcd{
.dgda{
.dgdb{
.dgdc{
.dgdd{
.wra{
position:relative; left:0;
}
</style>
<div class="wra">
<div class="wra">
<div class="wra">
<div class="wra">
<div class="dgda">1</div>
<div class="dgdb">2</div>
<div class="dgdc">3</div>
<div class="dgdd">4</div>
결과)
DIV태그 역시 TABLE태그 처럼 테이블 표 만들기를 할수가 있습니다.
TABLE태그안에 DIV태그를 적용해 DIV를 셀 처럼 활용할수도 있고요 DIV 안에 TABLE태그를 이용해 표나 레이 아웃을 구성 할수도 있습니다.
DIV태그와 P태그의 차이
DIV나 TABLE태그의 경우는 거의 모든 태그들을 가두어 사용 할수가 있는반면 DIV와 유사한 기능을 가지고 있는 P태그의 경우 블록 레벨 엘리먼트를 가두어 사용 할수가 없습니다.
위의 두줄의 소제목 바는 겉으로 보기에 비슷 하게 보입니다.
그러나 상위줄은 DIV태그에 스타일을 입힌 것이고 아래 줄은 P태그에 스타일을 입힌 것입니다.
예제8}
<DIV id=stalf>DIV태그와 P태그의 차이</div>
<P id=stalf>DIV태그와 P태그의 차이</P>
DIV태그와 P태그의 차이
DIV안에는P태그를 사용해 문단의 단락을 지정 해줄수 있어도 P태그안에는DIV태그 나 TABLE태그 UL OL LI태그 같은 블록 태그들을 가두어 사용 할수가 없습니다.
예제9)
<DIV id=stalf>DIV태그와 P태그의 차이<P>비슷 하지만 다르다.</P></div>
결과)
비슷 하지만 다르다.
DIV태그와 P태그의 차이
위의 결과에서 처럼 P태그안의 DIV공간에 주어진 문자들이 밖으로 튕겨져 나와 버렸습니다.
P태그에서 줄바꿈을 하기 위해서는 P태그나 BR태그를 사용할수밖에 없겠죠
우리가 사용 하는 태그들이 블록 태그인지 인라인엘리먼트 인지 알고 싶은 경우 아래 처럼
테스트를 해보면 알수 있습니다,
그럼 우리가 많이 사용 하는 문단의 개행을 담당 하는 태그 BR태그는 영역 태그인지 아닌지 한번 테스트를 해 봅니다.
예제10)
<BR id=stalf>BR태그와 P태그의 차이<BR>비슷 하지만 다르다.</BR></BR>
결과)
BR태그와 P태그의 차이
비슷 하지만 다르다.
BR태그와 P태그의 차이
비슷 하지만 다르다.
위 결과에서 P태그 안의 문자들은 영역 안에 가두어 지므로 영역 태그인것이 확실 하지만
BR태그는 문자들을 가두어 두지 못한 결과를 보였으므로 영역 태그는 아니죠
<P class=stalf>SPAN태그는 영역 태그 일까?<br/>비슷 하지만 다르다.<br/></P>
<SPAN class=stalf>SPAN태그와 P태그의 차이<BR>비슷 하지만 다르다.</BR></SPAN>
SPAN태그는 영역 태그 일까?
비슷 하지만 다르다.
비슷 하지만 다르다.
<p class=stalf>SPAN태그는 무슨 태그일까?</p>
<SPAN class=stalf>SPAN태그는 무슨 태그일까?</SPAN>
SPAN태그는 무슨 태그일까?
SPAN태그는 무슨 태그일까?
아래는 위 stalf CLASS에 정의된 스타일 입니다
.stalf{width:500px; height:100px; font-family:'Malgun Gothic ','맑은고딕','sans-serif ';font-size:14pt; line-height:24px; color:rgb(230,230,230); border-top:1px solid blue; border-left:1px solid blue; border-right:1px solid blue; border-bottom:1px solid blue; background:rgb(200,50,200); border-radius:0.3em; text-align:center; padding:7px;}
p태그와 span태그에 동일한 스타일이 주어 졌지만 모양이 다르게 출력 되었 습니다.
WIDTH와 HEIGHT를 정의 해주었지만 그것을 무시하고 닫힘 태그만큼에서 PADDING만큼 의 공간을 가지며 영역이 끝나 버리고 말았네요
그렇다고 br태그 처럼 테두리 영역이 없는 것도 아니죠 상당히 특이한 경우 입니다.
이것은 블록레벨과 인라인 엘리먼트가 조합되어 있는 특수한 경우 인 것이죠
블록레벨과 인라인 레벨의 중간 요소 엘리먼트라고 할수 있습니다,
그래서 SPAN태그를 가리켜 INLINE-BLOCK(인라인 블록) 엘리먼트라고 부르는 것이죠
오늘은 여러가지 영역 태그들의 차이점들을 알아 보았습니다.
감사 합니다.