<html>
<head>
<title>스타일로 테두리 다루기 1</title>
<style type="text/css">
<!--
/*테두리 스타일 solid*/
/*넓이는 시계방향으로 top, right, bottom, left*/
/*단위 cm, mm, in, pt, pc, px, em 등*/
/*부분적으로 테두리 사용시에는 border-top...border-left...*/
p.one {border-style: solid; border-width: 5px}
/*넓이를 한번만 쓰면 전체적으로 5px*/
p.two {border-style: solid; border-width: 5px 10px}
/*넓이를 두번 쓰면 대칭적으로 사용 앞은 top,bottom 뒤는 right,left*/
p.three {border-style: solid; border-width: 5px 20px 1px}
/*넓이를 세번 쓰면 앞뒤는 top,bottom 중간은 대칭으로 사용 right,left*/
p.four {border-style: solid; border-width: 5px 20px 1px medium}
/*넓이를 네번 쓰면 시계방향 medium은 기본 테두리 스타일 넓이*/
P.five {border: 5px solid}
/*테두리 전체적으로 넓이 5px*/
P.six {border: #FF0000 5px solid}
/*테두리에 색상 적용 영어 색상명 사용도 가능*/
-->
</style>
</head>
<body>
<p>테두리 없음</p>
<p class="one">
테두리 스타일 solid 넓이 5px
</p>
<p class="two">
테두리 스타일 solid 넓이 5px 10px
</p>
<p class="three">
테두리 스타일 solid 넓이 5px 20px 1px
</p>
<p class="four">
테두리 스타일 solid 넓이 5px 20px 1px medium
</p>
<p class="five">
테두리 스타일 solid 넓이 5px(넓이와 테두리 동시에 사용)
</p>
<p class="six">
테두리 스타일 solid 넓이 5px(테두리 색상 사용)
</p>
</body>
</html>
오렌지
