<style> h3 { border: solid 1px green;
} p { border: solid 1px green;
} </style> <body> <h3>박스 모델</h3> <p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다.
CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며
여백을 조정하여 요소를 화면에 배치할 수 있게 한다.</p> </body>
ex2-4.html의 실행 결과
HTML 요소들은 대부분 기본적으로 가지고 있는 초기 마진이 존재합니다.
웹 페이지에 요소를 배치하다 보면 이 기본 마진이 레이아웃에 불편을 초래하는 경우가 있습니다. 따라서 경우에 따라서는 다음에서와 같이 마진을 초기화합니다.
기본 마진 초기화
ex2-5.html
<style> * { margin: 0; } h3 { border: solid 1px green;
} p { border: solid 1px green;
} </style> <body> <h3>박스 모델</h3> <p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다.
CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며
여백을 조정하여 요소를 화면에 배치할 수 있게 한다.</p> </body>
ex2-5.html의 실행 결과
다음 예제에서는 마진 설정에 사용되는 margin, margin-top, margin-bottom, margin-left, margin-right 속성에 대해 알아봅니다.
마진 사용 예
ex2-6.html
<style> * { margin: 0; } h3 { margin: 30px;
border: solid 1px green;
} p { margin-top: 60px;
margin-bottom: 60px;
margin-left: 50px;
margin-right: 50px;
border: solid 1px green;
} </style> <body> <h3>박스 모델</h3> <p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다.
CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며
여백을 조정하여 요소를 화면에 배치할 수 있게 한다.</p> </body>
ex2-6.html의 실행 결과
margin 속성에서는 상하 마진과 상하좌우 마진의 값을 각각 다르게 설정할 수 있습니다.
마진 사용 예 2
ex2-7.html
<style> * { margin: 0; } h3 { margin: 60px 50px 40px 30px;
border: solid 1px green;
} p { margin: 80px 60px;
border: solid 1px green;
} </style> <body> <h3>박스 모델</h3> <p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다.
CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며
여백을 조정하여 요소를 화면에 배치할 수 있게 한다.</p> </body>
