2011/09/18 23:15
각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다.
위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다.
content : 순수한 콘텐츠
padding : 콘텐츠와 경계선 사이의 여백
border : 경계선
margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백
<table width="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#EEEEEE">
<div style="padding:10px; margin:10px; border:1px gray solid;">Box Model을 설명하기 위한 예제</div>
</td>
</tr>
</table>
이 예제에서 padding값과 margin값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.
'Computer > Web' 카테고리의 다른 글
| CSS Box Model (0) | 2011/09/18 |
|---|---|
| CSS 선택자 (0) | 2011/09/18 |
| Web 2.0 기반의 Presentation On The Web (0) | 2009/08/06 |
| syntaxhighlighter를 tistory에서 사용 하는 방법 (0) | 2008/10/08 |
| IE6,IE7 ,FireFox 에 대해 CSS 맞추기 (0) | 2008/07/09 |
| CSS에서 브라우저 구별 (IE6, IE7, FIREFOX) (0) | 2008/07/09 |
댓글을 달아 주세요