테두리, 배경, 여백 [border, background, margin, padding] 적용 style 태그

사용예

border

style

<div style="border-style:none">콩나물대제국</div>

<div style="border-style:dashed">콩나물대제국</div>

<div style="border-style:dotted">콩나물대제국</div>

<div style="border-style:double">콩나물대제국</div>

<div style="border-style:groove">콩나물대제국</div>

<div style="border-style:inset">콩나물대제국</div>

<div style="border-style:outset">콩나물대제국</div>

<div style="border-style:ridge">콩나물대제국</div>

<div style="border-style:solid">콩나물대제국</div>

<div style="border-style:window-inset">콩나물대제국</div>

colror

<div style="border-style:solid; boder-color:red">콩나물대제국</div>
<div style="border-style:solid; boder-color:blue">콩나물대제국</div>

width

<div style="border-style:solid; boder-width:5">콩나물대제국</div>
<div style="border-style:solid; boder-width:10">콩나물대제국</div>

collapse

<table border="10" style="border-collapse:collapse;">
<tr> <td>1-1</td><td>1-2</td> </tr>
<tr> <td>2-1</td><td>2-2</td> </tr>
</table>

<table border="10" style="border-collapse:separate;">
<tr> <td>1-1</td><td>1-2</td> </tr>
<tr> <td>2-1</td><td>2-2</td> </tr>
</table>

style
colror
width

<div style="border:solid;
border-top-color:red;
border-top-width:5;">콩나물대제국</div>

border-bottom

style
colror
width

<span style="border:0px solid;
border-bottom-color:red;
border-bottom-width:5;">콩나물대제국</span>

border-left

style
colror
width

<div style="border:0px solid;
border-left-color:red;
border-left-width:5;">콩나물대제국</div>

border-right

style
colror
width

<span style="border:0px solid;
border-right-color:red;
border-right-width:5;">콩나물대제국</span>

사용예

background

background

<div style="background: yellow url(http://duduji.iptime.org/duduji/html_tag/d.gif) repeat-x fixed center left;">배경</div>

color

<div style="background-color:red">콩나물대제국</div>
<div style="background-color:blue">콩나물대제국</div>

image

<div style="background-image: url(http://duduji.iptime.org/duduji/html_tag/d.gif)">콩나물대제국</div>
<div style="background-image: url(c.jpg)">콩나물대제국</div>

repeat

<div style="background-image: url(http://duduji.iptime.org/duduji/html_tag/d.gif);
background-repeat: repeat / no-repeat / repeat-x / repeat-y;
">콩나물대제국</div>

position

<div style="background-image: url(http://duduji.iptime.org/duduji/html_tag/d.gif);
background-repeat: no-repeat ;
background-position: top right">콩나물대제국</div>

attachment

<div style="background: yellow url(http://duduji.iptime.org/duduji/html_tag/d.gif); background-attachment: scroll; width:100% ; height:100; color:red;">
콩나물
대제국
콩나물
대제국
콩나물
대제국
</div>

<div style="background: yellow url(http://duduji.iptime.org/duduji/html_tag/d.gif); background-attachment: fixed; width:100% ; height:100; color:blue;">
콩나물
대제국
콩나물
대제국
콩나물
대제국
</div>

사용예

margin

top

<table border="1"><tr>
<td valign="top"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td valign="top"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif" style="margin-top:1cm;"></td>
</tr></table>

right

<table border="1"><tr>
<td align="right" width="90"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td align="right" width="90"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif" style="margin-right:1cm;"></td>
</tr></table>

bottom

<table border="1"><tr>
<td valign="bottom"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td valign="bottom"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif" style="margin-bottom:1cm;"></td>
</tr></table>

left

<table border="1"><tr>
<td width="90"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td width="90"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif" style="margin-left:1cm;"></td>
</tr></table>

margin

<table border="1"><tr>
<td width="90"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif" style="margint:1cm 10px 2mm 1em;"></td>
</tr></table>
※ margin: top right bottom left (top부터 시계방향으로 4번)
※ margin: top right=left bottom(3번) ☞ margin: 5 10 5;
※ margin: top=bottom right=left(2번) ☞ margin 10 20;

사용예

padding

top

<table border="1"><tr>
<td><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td style="padding-top:1cm;"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
</tr></table>

right

<table border="1"><tr>
<td><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td style="padding-right:1cm;"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
</tr></table>

bottom

<table border="1"><tr>

left

<table border="1"><tr>
<td><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td style="padding-top:1cm;"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
</tr></table>

margin

<table border="1"><tr>
<td><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
<td style="padding-top:1cm;"><img src="http://duduji.iptime.org/duduji/html_tag/d.gif"></td>
</tr></table>
※ padding: top right bottom left (top부터 시계방향으로 4번)
※ padding: top right=left bottom(3번) ☞ padding: 5 10 5;
※ padding: top=bottom right=left(2번) ☞ padding 10 20;