div 스타일 박스와 table 스타일 박스

지난 시간에 이어 스타일 시트로 박스 꾸미기 방법에 대해 공부 하는 시간을 갖도록 합니다.
오늘은 <div> 블록 레벨 엘리먼트 와 블록레벨 엘리먼트 이면서  <td> 와 같은 인라인 엘리먼트 를 함께 가지고 있는<table> 블록 레벨 엘리 먼트 로 박스를 한번 만들어 보도록 합니다.

 예제1번) div태그 스타일

사랑

희망

소망

우정

위의 테이블은 스타일 시트를 이용해 div태그로 만든 박스 모양 이고요 소스는 이렇 습니다.

<style> 

div#a-box {width:310px; height:150px; border:1px solid purple; margin:0px 0px 5px 0px; background-color:red;}

div {clear:both;&nbsp;}

#b-box{width:70px; height:150px; border:1px solid purple; margin-left:80px; display:inline-block; background-color:yellow;}

#c-box{width:150px; height:150px; border:1px solid purple; margin-left:5px;display:inline-block;background-color:lime;}

div {clear:both;&nbsp;}

#d-box{width:310px; height:150px; border:1px solid purple; margin-top:5px; background-color:skyblue;}

#a-box,#d-box,font {text-align:center; padding-top:65px; color:blue; font-size:16px; font-familly:'Malgun Gothic', sans-serif; display:block;}

#b-box,#c-box,font {text-align:center; padding-top:65px; color:blue; font-size:16px; font-familly:'Malgun Gothic', sans-serif; display:inline-block;}

div {clear:both;}

</style>

바디 부 입니다.

<div id="a-box">사랑</div>

<div id="b-box">희망</div>

<div id="c-box">소망</div>

<div id="d-box">우정</div>

<br /><div></div>

아래 박스는 테이블 테그로 만든 박스 입니다.

예제2) table태그 코딩

사랑

  

희망

소망

우정

지난 시간에도 언급 한바 있지만 웹 브라우져에 따라 많은 차이가 나는걸 볼수가 있습니다. 

div 태그의 경우에는 각 블록마다 제대로 스타일 이 먹히는 반면 테이블 태그의 경우 테이블의 테두리 라인이 브라우져상에 뜨지를 않는것 같습니다. 

에디터에서 html로 작성 한후 복사 html을 에디터로 돌리고 붙혀넣기 해서 보면 테이블의 테두리가 제대로 보이는데 브라우져 창에서는 아예 안 먹히는 군요 

지난 시간에 이어 스타일을 태그에 직접 입력 하지 않고 원격 조정하는 방식으로 스타일을 적용 해서 두가지의 블록 요소로 박스를 만들어 봤습니다.

 

CSS소스 입니다.

<style> 

.a{margin:0px 0px; border:1px solid red; border-collapse:collapse;

}

.b{margin:0px 0px 0px 80px; border:1px solid red; border-collapse:collapse;

}

.c{margin:5px 0px; border:1px solid red; border-collapse:collapse;

}

.e{width:310px; height:150px; 

border:1px solid purple; cellspacing:5px; text-align:center;

 background-color:red;

}

.d{width:75px; height:150px; 

border:1px solid purple; cellspacing:5px; text-align:center;

background-color:yellow; 

}

.f{width:150px; height:150px; 

border:1px solid purple; cellspacing:5px; text-align:center;

 background-color:lime;

}

.g{width:310px; height:150px; 

border:1px solid purple; cellspacing:5px; text-align:center;

 background-color:skyblue;

}

.a,.b,font {text-align:center; color:blue; font-size:20px; font-familly:'Malgun Gothic', sans-serif; display:inline-block;

}

</style>

바디 부 소스 입니다.

<table class="a">

<tbody><tr>

<td class="e">사랑</td>

</tr>

</tbody>

</table>

<table class="b">

<tbody>

<tr>

<td class="d">희망</td>

<td class="f">소망</td>

</tr>

</tbody>

</table>

<table class="c">

<tbody><br/>

<tr>

<td class="g">우정</td>

</tr>

</tbody>

</table>