◐테두리 스타일 종류

◐테두리 스타일 종류
solid  일반적인 테두리   
ridge  그림에 입체감을 주는 테두리
dotted  동그라미 점선 테두리
dashed  네모점선 테두리
double  이중 테두리
groove  내용이 튀어 나오고 배경이 들어간 느낌
inset   테두리 속으로 들어간 느낌
oulset  테두리에서 돌출된 느낌
<img src="http://solomoon.ktdom.com/img/solomoon.com-
photo50/1076138712_1.jpg"style="border:20 red solid;">  
style="border:20 red solid;"
이미지 주소끝에 위 소스처럼
'사이즈''색상''테두리 스타일'을 차례로 적어주면 되고
위에 테두리 스타일 종류를 각각 solid 부분에 바꿔넣어 본다.


또한 위에 테두리 스타일은 테이블에도 적용할수 있다.
<table border="2"width="350"height="200"style="border:10 green dotted;">
<tr><td>
</td></tr></table>

또는 위에 소스를 하나더 복사해서 아래 소스처럼 두줄을 만들고
스타일을 각각 다른 스타일로 적용해 보면
<table width="350"height="200"style="border:10 green dotted;">
<tr><td>
<table width="350"height="200"style="border:10 green dashed;">
<tr><td>
</td></tr></table>
</td></tr></table>
이렇게 나오고

실행해 보면서 사이즈를 각각 조절하여 
이쁜 테두리를 만들수도 있다.

또는 아래 소스처럼 일반 테이블 끝에
style=border-style:dotted; 처럼 스타일만 추가해 붙여줘도..
<table border="4"bordercolor="red"width="350"height="200"
style=border-style:dotted;">
<tr><td>
</td></tr></table>
이렇게 나오고..

이것을 아래처럼 두어개 더 복사해서 
사이즈와 색상과 테두리 스타일을 각각 바꿔줘 본다.
<table border="4"bordercolor="red"width="350"height="200"
style=border-style:dotted;">
<tr><td>
<table border="5"bordercolor="black"width="350"height="200"
style=border-style:dashed;">
<tr><td><table border="3"bordercolor="green"width="350"height="200"
style=border-style:dotted;">
<tr><td>
</td></tr></table>
</td></tr></table>
</td></tr></table>

또는 아래 소스처럼 소스끝에 
border="0"cellspacing="0"cellpadding="0" 을 넣어  
테두리와 테두리 사이의 간격을 없애서
<table border="4"bordercolor="red"width="350"height="200"
style=border-style:dotted;"border=0 cellspacing=0 cellpadding=0>
<tr><td>
<table border="5"bordercolor="black"width="350"height="200"
style=border-style:dashed;"border=0 cellspacing=0 cellpadding=0>
<tr><td><table border="3"bordercolor="green"width="350"height="200"
style=border-style:dotted;"border=0 cellspacing=0 cellpadding=0>
<tr><td>
</td></tr></table>
</td></tr></table>
</td></tr></table>
이렇게 쪼매 야한 테두리도 만들수 있다.

또는 아래 소스처럼 cellspacing=0 이나 cellpadding=0 부분의 0에
각각 수치도 넣어서..
<table border="4"bordercolor="red"width="350"height="200"
style=border-style:dotted;"border=0 cellspacing=0 cellpadding=0>
<tr><td>
<table border="5"bordercolor="black"width="350"height="200"
style=border-style:dashed;"border=0 cellspacing=0 cellpadding=3>
<tr><td><table border="3"bordercolor="green"width="350"height="200"
style=border-style:dotted;"border= cellspacing=0 cellpadding=7>
<tr><td>
<img src=http://solomoon.ktdom.com/img/solomoon.com-photo50/1076138712_1.jpg>
</td></tr></table>
</td></tr></table>
</td></tr></table>
이처럼 품위를 낼수도 있다..