[CSS 강좌] CSS Margin 속성
margin-top / margin-right / margin-bottom / margin-left
오늘은 margin 속성에 대해서 포스팅 해보도록 하겠습니다. 부족하더라도 이해해주세요.
Margin 속성
내용물과 내용물을 담고 있는 Box와의 거리를 padding, padding 바깥 쪽의 경계선을 border라고 한다면,
margin은 내용물을 담고 있는 Box와 Box 자신을 담고 있는 상위 Box와의 거리를 말합니다.
이 margin이나 padding 같은 속성들은 보통 무시하고 안 쓰는 경우가 태반인데 이 두가지 요소는
문서를 보기 좋게 꾸미기 위한 아주 중요한 요소라고 할 수 있습니다. 문단들이 여백(margin)없이 문서 양 끝에
딱 붙어 있다면 눈으로 보기 아주 답답해 보입니다. 적당한 여백이나 padding이 있어야 보기도 좋을 뿐더러
전달하고자 하는 문서의 내용이 보다 쉽게 전달 될 수 있습니다.
[Source code]
<HTML>
<HEAD>
<TITLE>CSS Box Model</TITLE>
</HEAD>
<BODY>
<DIV style="border:1px solid tomato;">
<SPAN></SPAN>
</DIV>
</BODY>
</HTML>
span과 div사이의 간격이 padding이고 div의 border는 1px solid tomato가 되며,
body와 div와의 간격이 margin이 된다. 그렇지만 만약에 body속에 div, table등과 같은 Box Element가 없다면
body 와 body속의 내용물과의 거리는 margin일 수도, padding일 수도 있습니다.
[CSS Box Model]
문서에 margin과 padding을 적용했을때
아래의 예제는 P Element를 사용하여 문단을 정리하면서 좌우 여백을 브라우저 창의 5%로 하고,
Table을 만들어 Cell의 좌측에 5px의 여백을 주는 예제가 되겠습니다.
[Source code]
<HTML>
<HEAD>
<TITLE>문서에 margin과 padding을 적용한 사례</TITLE>
<STYLE type="text/css">
<!--
.horMargin{margin:0% 5%;}
.cellPadding{padding-left:5px;border:1px solid #333333}
.Para{text-align:justify;}
-->
</STYLE>
</HEAD>
<BODY class="horMargin">
<P class="Para">아래의 예제는 P Element를 사용하여 문단을 정리하면서 좌우 여백을
브라우저 창의 5%로 하고, Table을 만들어 Cell의 좌측에 5px의 여백을 주는 예제가
되겠습니다.</P>
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="cellPadding">R1 C1</td>
<td class="cellPadding">R1 C2</td>
</tr>
<tr>
<td class="cellPadding">R2 C1</td>
<td class="cellPadding">R2 C2</td>
</tr>
</table>
</BODY>
</HTML>
[출력결과]
margin-top, margin-right, margin-bottom, margin-left
margin-top, margin-right, margin-bottom, margin-left 들은 Box 4면에 단독적으로도 지정이 가능합니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 기초] 클래스 선택자 (0) | 2018.03.06 |
|---|---|
| [CSS 강좌] 아이디 선택자 (0) | 2018.03.06 |
| [ CSS 기초] css padding 속성 (0) | 2018.03.05 |
| [CSS 강좌] 테이블 꾸미기 (0) | 2018.02.14 |
| [CSS 강좌] 박스 모델(Box Model) (0) | 2018.02.07 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.