<html>
<head>
<style>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
.border3
{
border-style:double;
border-color:blue red green yellow;
}
.border4
{
border-style:double;
border-width:1px;
}
.border5
{
border:10px dashed blue;
}
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</style>
<body>
<h1>테두리를 꾸미는 스타일 </h1>
<xmp>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
</xmp>
<p class="border1">
border-style: 테두리 형태지정<br>
none(테두리 미지정)<br>
dotted(원)<br>
dashed(점선)<br>
solid(한줄)<br>
double(두줄)<br>
groove(입체감있게표현)<br>
ridge(테두리가 볼록하게)<br>
inset(테두리 전체가 들어간 모양)<br>
outset(테두리 전체가 튀어난 모양)
</p>
<br>
<xmp>
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
</xmp>
<p class="border2">
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
</p>
<xmp>
.border3
{
border-style:double;
border-color:blue red green yellow;
}
</xmp>
<p class="border3">
색상을 지정할수 있다.<br>
1개지정 : 상하좌우 같은색<br>
2개지정 : 상하,좌우 색<br>
3개지정 : 상,좌우,하 색<br>
4개지정 : 상,우,하,좌 색<br>
border-방향-color으로 사용가능.
</p>
<xmp>
.border4
{
border-style:double;
border-width:1px;
}
</xmp>
<p class="border4">
두께를 지정할수 있다.<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
border-방향-width 으로 사용가능.
</p>
<xmp>
.border5
{
border:10px dashed blue;
}
</xmp>
<p class="border5">
단축해서 지정가능<br>
border-width border-style border-color
</p>
<br><br>
<h1>여백 설정 스타일</h1>
<xmp>
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="margin1">
바깥여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
margin-방향 으로 사용가능.
</p>
</td></tr></table>
<xmp>
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="padding1">
안쪽여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
padding-방향 으로 사용가능.
</p>
</body>
</html>
<head>
<style>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
.border3
{
border-style:double;
border-color:blue red green yellow;
}
.border4
{
border-style:double;
border-width:1px;
}
.border5
{
border:10px dashed blue;
}
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</style>
<body>
<h1>테두리를 꾸미는 스타일 </h1>
<xmp>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
</xmp>
<p class="border1">
border-style: 테두리 형태지정<br>
none(테두리 미지정)<br>
dotted(원)<br>
dashed(점선)<br>
solid(한줄)<br>
double(두줄)<br>
groove(입체감있게표현)<br>
ridge(테두리가 볼록하게)<br>
inset(테두리 전체가 들어간 모양)<br>
outset(테두리 전체가 튀어난 모양)
</p>
<br>
<xmp>
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
</xmp>
<p class="border2">
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
</p>
<xmp>
.border3
{
border-style:double;
border-color:blue red green yellow;
}
</xmp>
<p class="border3">
색상을 지정할수 있다.<br>
1개지정 : 상하좌우 같은색<br>
2개지정 : 상하,좌우 색<br>
3개지정 : 상,좌우,하 색<br>
4개지정 : 상,우,하,좌 색<br>
border-방향-color으로 사용가능.
</p>
<xmp>
.border4
{
border-style:double;
border-width:1px;
}
</xmp>
<p class="border4">
두께를 지정할수 있다.<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
border-방향-width 으로 사용가능.
</p>
<xmp>
.border5
{
border:10px dashed blue;
}
</xmp>
<p class="border5">
단축해서 지정가능<br>
border-width border-style border-color
</p>
<br><br>
<h1>여백 설정 스타일</h1>
<xmp>
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="margin1">
바깥여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
margin-방향 으로 사용가능.
</p>
</td></tr></table>
<xmp>
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="padding1">
안쪽여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
padding-방향 으로 사용가능.
</p>
</body>
</html>