2-2. 경계선
HTML 요소의 경계선을 그리는 데는 border 속성이 사용됩니다. 다양한 종류의 경계선
을 그리는 방법과 HTML 요소에 대해 상단, 하단, 우측, 좌측에 경계선을 그리는 방법에 대해 알아봅니다.
<style>
p {
margin : 60px;
border: solid 5px blue;
padding: 50px;
}
</style>
<body>
<p>박스 모델은 경계선, 마진, 패딩으로 구성된다.</p>
</body>
ex2-2.html의 실행 결과
경계선을 그리는 데 사용되는 CSS 속성에는 border, border-top, border-right, border-bottom, border-left 속성이 있습니다.
<style>
h3 { width: 120px; text-align: center; }
</style>
<body>
<h3 style="border: solid 3px black;">사방 경계선</h3>
<h3 style="border-top: solid 2px red;">상단 경계선</h3>
<h3 style="border-left: solid 8px green;">좌측 경계선</h3>
<h3 style="border-right: solid 8px orange;">우측 경계선</h3>
<h3 style="border-bottom: solid 2px grey;">하단 경계선</h3>
</body>
ex2-3.html의 실행 결과