DIV태그 와 SPAN 태그의 차이 BLOCK과 INLINE-BLOCK의 차이
지난 시간에 잠깐 공부 한 내용 인데요 좀 부족 한것 같아 오늘은 좀더 세부적으로 공부 해보는 시간을 갖도록 하겠습니다.
보통 사용 하는 영역태그로 DIV태그와 TABLE태그를 주로 사용 하는데요 오늘 공부할 내용에는 TABLE태그는 단독 태그가 아니므로 사용이 불가 합니다.
이번 시간에 사용할 영역 태그는 DIV태그와 SPAN 태그를 사용 해 공부해보도록 하겠습니다.
DIV태그는 전형적인 블록레벨 엘리먼트 지만 SPAN태그는 블록 레벨의 하위 인라인 레벨 엘리먼트이며 인라인 레벨 요소들 중 영역을 지정 하는 대표적인 태그라고 할수 있습니다.
보통 DIV태그를 이용해 영역을 구성 할때 가로로 정렬 하고자 하는 경우가 많습니다.
그러나 DIV태그의 기본성질은 다른 스타일 정의를 하지 않을경우 아래 예제 처럼 기본 스타일 만으로 코딩 했을때 한칸한칸 모두 세로로 정렬되는 성질을 가지고 있죠
예제 style)
<STYLE>
.bord{margin-bottom:1px; width:100px; height:50px; border:1px solid blue;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
.bordb{float:left;margin-right:1px; margin-bottom:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
.bordc{clear:both; margin-right:1px; margin-bottom:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
.bloi{display:inline-block; margin-right:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
.blob{display:block;margin-bottom:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
</STYLE>
예제1)
<DIV CLASS=bord>1</div>
<DIV CLASS=bord>2</div>
<DIV CLASS=bord>3</div>
<DIV CLASS=bord>4</div>
그럼 이 4개의 박스들을 가로로 정렬 해주고 싶다고 한다면 어떤 속성을 사용 해야 할까요?
그렇습니다.
위의 4개의 박스를 가로 정렬 하는 방식에는 여러가지 방법이 있습니다.
위의 기본 스타일에 float속성으로 제어 하는 방법과 inline-block방법그리고 position을 이용하는 방법 그리고 span태그를 이용하는 방법 등으로 할수가 있습니다.
그럼 FLOAT속성으로 한번 제어 해 보도록 합니다.
.bordb{float:left;margin-right:1px; margin-bottom:1px; width:100px; height:50px; border:3px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
예제2)
<DIV CLASS=bordb>1</div>
<DIV CLASS=bordb>2</div>
<DIV CLASS=bordb>3</div>
<DIV CLASS=bordb>4</div>
예제2 결과)
위 스타일 에서 float:left;라는속성과 값으로 가로 정렬을 해보았습니다.
모바일 에서 세로 모드로 볼 경우 블록 하나가 아래로 내려와 보이게 됩니다.
이것이 DIV 태그의 블록 성질 인데요 이렇게 가로 정렬시 바디 보다 넘치는 블록은 한칸 아래로 내려와 붙습니다.
다만 position 속성의 absolute 를 주었을 경우엔 절대값의 위치로 고정 되므로 아래로 내려 오는 대신 잘려서 보이게 됩니다.
.bloi{display:inline-block; margin-right:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px;/* background:rgb(230,100,0);*/}
예제3)
<DIV CLASS=bloi>1</div>
<DIV CLASS=bloi>2</div>
<DIV CLASS=bloi>3</div>
<DIV CLASS=bloi>4</div>
예제3 결과)
위에서 DIV태그는 요소가 한칸씩 블록을 형성 하는 기본성질을 가지고 있는 반면
SPAN태그의 기본 성질은 태그내의 콘텐츠나 텍스트가 끝나는 지점이 영역의 끝이 되며 닫는 테그로 조정이 가능 합니다.
아래 예제를 통해 확인 할수가 있습니다.
.bord{margin-bottom:1px; width:100px; height:50px; border:1px solid blue;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,0,200); color:white; overflow:hidden;}
예제 4 SPAN태그 사용예)
<SPAN CLASS=bord>1</SPAN>
<SPAN CLASS=bord>2</SPAN>
<SPAN CLASS=bord>3</SPAN>
<SPAN CLASS=bord>4</SPAN>
예제 4 결과)
1 2 3 4
결과에서 확인 한것과 같이 위 스타일시트에서 선언한 WIDTH값은 적용이 되지 않으며 폰트 크기와 페딩 만큼의 공간만을 가지게 된다는 것을 알수 있습니다.
그래서 만약 넓이의 크기를 지정 해주고자 할때는내용을 길게 넣든지 PADDING 값으로 조정 해 주도록 해야 하는 것입니다.
그럼 위의 값에 PADDING 값을 더해 주어서 넓이를 조정 해 보도록 합니다.
.bord{margin-bottom:1px; width:100px; height:50px; border:1px solid blue;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,0,200); color:white; overflower:hidden;}
<SPAN CLASS=bord style="padding-left:45px">1</SPAN>
<SPAN CLASS=bord style="padding-left:45px">2</SPAN>
<SPAN CLASS=bord style="padding-left:45px">3</SPAN>
<SPAN CLASS=bord style="padding-left:45px">4</SPAN>
예제5 span태그 padding 적용 예)
1 2 3 4
위의예제들에 적용된 속성과 값들은 모두 동일 하며 가로 정렬 속성 으로 제어 해준 반면
1번 예제와 4번 5번 예제의 경우 역시 동일한 속성 과 값들을 주었습니다.
그러나 WIDTH속성 과 HEIGHT 속성 과 값을 동일하게 주었지만
완전히 다른 형태로 레이 아웃 된것을 확인 할수가 있었습니다.
그럼 이번엔 좀 다른 방법으로 가로 정렬을 해보도록 하겠습니다.
이번에 사용 할 POSITION 속성은 모든 영역 태그들중 DIV 태그 와 TABLE태그 에서 가장 많이 사용되는 속성 입니다.
1번 예제에 사용 된 기본 값을 주고 POSITION 속성 으로 가로 정렬을 해 보도록 합니다.
여기서 한가지 유의 해야 할것은 DIV 태그 하나를 덧 씌워 주어야 한다는것입니다.
.bord{margin-bottom:1px; width:100px; height:50px; border:1px solid blue;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,0,200); color:white; overflower:hidden;}
예제6 )
<DIV style="width:410px; height:100px; position:relative">
<DIV CLASS=bord style="position:absoluet; left:0px; top:0px">1</div>
<DIV CLASS=bord style="position:absoluet; left:101px; top:0px">2</div>
<DIV CLASS=bord style="position:absoluet; left:202px; top:0px">3</div>
<DIV CLASS=bord style="position:absoluet; left:303px; top:0px">4</div>
</DIV>
예제6 결과)
DIV태그가 가진 기본성질인 세로 정렬은 위의 예제 3번에서 INLINE-BLOCK으로 기본성질을 깨부수고 가로 정렬을 할수가 있었습니다.
그럼 이번엔 가로 속성을 가진 SPAN태그의 기본속성을 깨고 세로 로 정렬 하는 스타일 속성 정의는 무었인지 한번 보겠습니다.
예제 7)
.blob{display:block;margin-bottom:1px; width:100px; height:50px; border:1px solid red;/* border-radius:0.3em;*/ text-align:center; padding:7px; background:rgb(230,100,0);color:white; overflow:hidden;}
<SPAN CLASS=blob>1</SPAN>
<SPAN CLASS=blob>2</SPAN>
<SPAN CLASS=blob>3</SPAN>
<SPAN CLASS=blob>4</SPAN>
예제 7 결과)
1
2
3
4