| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
border속성은 해당요소의 테두리의 스타일을 지정하는 기능을 합니다.
margin보다는 좁은 영역을 가지는 데요.
border-width 속성은 테두리의 굵기를 지정해주고, border-color 속성은 색상을 , border-style 속성은 스타일을 지정해주는 기능을 합니다.
<style type="text/css">
<!--
body { margin-left:10%; color:red; font-size:13px; font-weight:bold; font-family:arial; }
h1 { font-size:30px; }
.love { border-width:10px; border-style: inset; border-color:yellow; }
.story { border-width:20px; border-style: double; border-color:skyblue; }
.kiss { border-width:30px; border-style: outset; border-color:black; }
-->
</style>
<body>
<h1>태그매니아</h1>
<p class=love> i love you</p>
<p class=story> i love you</p>
<p class=kiss> i love you</p>
</body>
border-width 의 값이 커질 수록 테두리의 두께가 두꺼워지고 border-style의 경우 예제에서 보여진 inset , double , outset 뿐만 아니라 solid , dotted , dashed , ridge 등이 있습니다. 또한 border-color의 경우 그 border-style에 따라 그 색상이 잘 나타날 때도 있고 그렇지 않는 때도 있다는 것을 유의하시길 바랍니다.
margin보다는 좁은 영역을 가지는 데요.
border-width 속성은 테두리의 굵기를 지정해주고, border-color 속성은 색상을 , border-style 속성은 스타일을 지정해주는 기능을 합니다.
<style type="text/css">
<!--
body { margin-left:10%; color:red; font-size:13px; font-weight:bold; font-family:arial; }
h1 { font-size:30px; }
.love { border-width:10px; border-style: inset; border-color:yellow; }
.story { border-width:20px; border-style: double; border-color:skyblue; }
.kiss { border-width:30px; border-style: outset; border-color:black; }
-->
</style>
<body>
<h1>태그매니아</h1>
<p class=love> i love you</p>
<p class=story> i love you</p>
<p class=kiss> i love you</p>
</body>
border-width 의 값이 커질 수록 테두리의 두께가 두꺼워지고 border-style의 경우 예제에서 보여진 inset , double , outset 뿐만 아니라 solid , dotted , dashed , ridge 등이 있습니다. 또한 border-color의 경우 그 border-style에 따라 그 색상이 잘 나타날 때도 있고 그렇지 않는 때도 있다는 것을 유의하시길 바랍니다.
