CSS로 박스 만들기 vs. Table 제어하기 > 기술자료

• 목록

1. CSS로 박스 제어하기
<style type="text/css">
.paging{clear:both;width:640px;margin:0 auto 24px;padding:35px 0;_padding-right:200px;text-align:center;overflow:hidden;_width:755px}
.paging a,.paging strong{display:inline-block;position:relative;_width:20px;margin-right:1px;padding:3px 3px 5px;border:1px solid #fff;font:bold 13px Verdana;line-height:normal;color:#000;text-decoration:none;min-width:18px;_min-width:26px}
.paging strong{border:1px solid #e9e9e9;color:#f23219 !important}
.paging a:hover{border:1px solid #e9e9e9;background:#fff;text-decoration:underline}
}
</style>

<a href="https://www.happyjung.com" class="paging">해피정닷컴</a>


2. Table , TD 의 테두리 제어하기
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-bottom:1px solid #838383; border-right:1px dashed #838383;">박스1-1</td>
    <td style="border-bottom:1px solid #838383;">박스1-2</td>
  </tr>
</table>


style="border-bottom:1px solid #838383;"
style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#838383;"

style="border-width:1px; border-style:solid; border-color:#838383;"
style="border: 1px solid #838383;"