한주동안 잘 계셨겠져? 후훗..
이번엔 그 Box 관련 속성중 margin 에 대해 알아 보겠습니다.
Box란 단어는 우리말로 상자를 뜻하는 것입니다.
보통 상자란 사각형이 6개 붙여서 이뤄진 6면체가 주류를 이룹니다.
여기서 따온 것같은데, 아무튼 Box란 보통 사각형의 형태를 이룬 오브젝트를 말합니다.
웹상에서의 오브젝트들은 죄다 사각형의 형태를 이루고 있습니다.
Image, Audio Controller, Movie, Shock Wave Flash.. 기타 등등.. 무지하게 많답니다.
태그로 만든 도표 같은걸로 생각 하시는 님이 계신데..
이와 비슷하긴 하지만,
Box는 셀(도표에서 글적구, 그림넣구 하는 빈 공간)이 하나로만 이뤄진 도표라 생각하시면 쉽게 이해가 가실 것입니다.
물론, 레이아웃을 맞추기 위해 임의로 셀수를 여러개로 해도 상관 없지만 말이죠.
그 대표적인 예가, 이 CSS사이트의 대문을 들 수 있습니다.
YOU CAN DO IT 이란 단어가 화면을 가로 지르는 것을 보셨을 것입니다.
바로 그런것이 예외에 들어 가는 것입니다. ^^
다시 말씀 드리지만, 셀이 여러개인 Box라고 해서 스타일 시트 오류가 발생하는 것은 결코 아니니 그점 알아 두십시오.
흠, 우선은 그보다..
왜 제가 절대 혼돈이란 용어를(?) 붙였는지 아시는지요?
그 이유는 저두 쓰다보면 헷갈리 때문이죠 ^^a
한마디로 절대 혼돈 입니다.. ㅡ.ㅡㆀ
이 사이트도 사실은 margin을 엄청나게 많이 썼습니다.
아시나요? 모르시나요? ^^a
그만큼 아주아주 무지무지하게 유용한것이 요 margin인 것입니다.
margin이 뭐냐구요?
음.. 우리말로 풀이 하자면요..
여백 입니다. 여백..
아시죠? 여백 ^^
굳이 이걸 또 사전 찾아가며(?) 설명하진 않겠습니다.
아무튼.. 여백의 길이를 조절 함으로서, 해당 오브젝트를 이리저리 정확한 위치로 이동 시킬 수 있어요.
어떻게 쓰는지를 보여 드리죠 *^^*
예제 입니다.
▶margin
▶margin
<html>
<head>
<title>background-color</title>
<style type="text/css">
td {background-color:#ffeeee}
.margin {margin:20% 0% 0% 40%}
</style>
</head>
<body>
<table border="0" class="margin">
<tr>
<td>
<font size="7" color="red">훗.. 어케 될까여? ^^</font>
</td>
</tr>
</table>
</body>
</html>
예제보기 1st ← Click !
보셨나요?
보통 만드는 오브젝트들 보단 위치가 이동이 되었음을 확인 할 수 있습니다.
그런데, 지금까지 제가 쓴 강좌들을 마스터하신 님이라면 틀림없이 위의 예제에 대해 의문점을 가지실 것입니다.
어떤 것이냐구요?
그것은 margin이란 속성을 대표 속성으로 대체했기 때문이죠. *^^*
사실상 margin은 부가 속성이 4개 있습니다.
각각 margin-top, margin-right, margin-bottom, margin-left 인데요..
제가 굳이 이 속성들을 쓰지 않은 이유는, 부가 속성을 쓰길 권장하지 않기 때문 이랄까요? ^^a
저두 요즘엔 margin을 대표속성으로 쓰고 있습니다.
처음엔 외운다고 좀(?) 애먹었지만.. (사실 그렇게 힘든건 아닙니다. 나중에 자세히 알려 드리겠음.)
그 후엔 아주 유용하게 쓰고 있습죠 *^^*
아무튼..
margin은 보시다시피 오브젝트의 여백을 조절하는 역할을 하구요..
그 값들은 길이 단위에 따라 달라진답니다 ^^
아시져? 전 px, pt를 가장 많이 쓴다구요.. 후훗..
물론, 저어기 위의 예제는 %를 썼지만 말이죠..
자세한 내용은 여기에 있으니 잊어먹으신 님들은 참고 하시구요 ^^*
그럼 계속 하져.. ㅡ.ㅡa
아무튼 저어기 margin의 4가지 부가 속성은 사용법이 서로 다를바가 없습니다.
중급자이시니 이런건 이제 다 아시져? 그래서 중복 설명은 생략하기로 하구요..
제가 권장하는 대표 속성법을 배워보도록 하져 *^^*
margin:top right bottom left
훗.. margin의 부가속성 값을 넣는 순서는 위와 같습니다.
그런데 외우기가 힘들다구요? ^^a
자알 보십시오~~
자세히 들여다 보시면 이것이 시계방향으로 설정되어 있다는 것을 알게 됩니다.
맨처음 top은 12시 방향,
두번째 right는 3시 방향,
세번째 bottom은 6시 방향,
마지막 left는 9시 방향.
시계를 보면서 떠올리시면 이해가 훨신 잘 되실거예요 *^^*
※ 알아두세여 ~ ♬
margin과 같이 오브젝트 사이의 여백을 조정하는 속성은 보통 +단위를 많이 취급하지만..
-단위를 쓸경우 자신이 생각지도 못한,
혹은 자신의 의도대로 레이아웃을 조정 할 수 있을 정도로 매우 정교하고 예민한 속성입니다.
이걸 잘 응용 하시면 님이 보고 계신 이 CSS사이트처럼 만들 수 있습니다.
훗.. 간단하게나마 이번 강좌도 끝이군요.. ㅡ.ㅡa
그다지 쓰는게 힘들지 않아 이렇게 쉽게 끝났지만..
다음 강좌들은 결코 그렇지 못할거란걸 예고한다는걸..
님들도 잘 아시죠? *^^*
아무리 봐도 모를경우엔.. 이해가 잘 안되시거든.. 게시판에 질문도 올리구 하세요.
단, 님의 노력과 인내심의 한계를 느끼셨을 경우만요 ^^
아니면 이 필자가 글을 잘못써서 그렇다던지... ㅡ.ㅡa (이건 인정토록 하겠습니다. 필자는 신이 아니니까요)
그럼 다음 강좌에서 더더욱 열심히 공부 하자구요~ ^.^
빠빠~
- End -