div 스타일 박스와 table 스타일 박스
오늘은 <div> 블록 레벨 엘리먼트 와 블록레벨 엘리먼트 이면서 <td> 와 같은 인라인 엘리먼트 를 함께 가지고 있는<table> 블록 레벨 엘리 먼트 로 박스를 한번 만들어 보도록 합니다.
<style>
div#a-box {width:310px; height:150px; border:1px solid purple; margin:0px 0px 5px 0px; background-color:red;}
div {clear:both; }
#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; }
#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>
사랑 |
희망 | 소망 |
우정 |
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>