요사이는 와이드형 모니터를 많이들 사용합니다. 그래서인지, 왼쪽 정렬된 홈페이지나 블로그를 보면 왠지 반대쪽에 남는 공간이 넘 횡해서 쓸쓸(?)한 느낌이 들죠.
반면 본 블로그를 포함하여 많은 웹페이지에서 내용을 가운데에 잘 맞춰서 보여줍니다. 이를 하기 위한, 알고나면 너무나 아무것도 아니지만, 모르면 답답할 수 있는 아주아주 기본적인 팁 하나 올려봅니다.
먼저 웹페이지의 여백이 어떤식으로 적용되는지 간단한 그림을 하나 보도록 하겠습니다.
위 그림은 W3C에서 가져온 것입니다.
CSS Style을 작성할때, margin이라는 속성을 주게 되는데, 이는 대상의 바깥쪽 여백의 너비를 나타냅니다. 적용하는 방법은 아래와 같습니다. 참고로 안쪽여백은 padding으로 표현하고 값을 설정하는 형식은 margin과 동일합니다.
- margin: <all>
- margin: <top-bottom> <left-right>
- margin: <top> <left-right> <bottom>
- margin: <top> <right> <bottom> <left>
이 외에도 margin-top, margin-bottom, margin-right, margin-left 등을 이용하여 각각의 여백을 따로 따로 지정할 수도 있습니다. 위에서 <all> 을 포함한 각 값은 px, pt, em, % 등을 이용하여 해당되는 쪽의 바깥여백의 너비를 나타내는 표현이 들어가게 되죠.
이중, margin-left/right 에 실제 숫자값이 아닌 auto라는 값을 주면 왼쪽과 오른쪽의 너비를 동일하게 하겠다는 뜻이 되는데, 이를 이용하면 아주 손쉽게 애초의 목적을 달성할 수 있는 것이죠.
다음은 W3C의 스펙문서에 나온 원문내용입니다.
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
만약 원래 표현하고자 하는 내용이 <!-- 원래내용 --> 였다면, 기존 내용을 건드리지 않기 위해 wrapper를 하나 두어서 다음과 같이 표현할 수 있겠죠.
<div style="margin:0 auto; padding:0;">
<!-- 원래 내용 -->
</div>
여기서, margin:0 auto; 는 위아래 여백은 0으로 하고 좌우여백은 동일하게 한다는 뜻이고, padding:0; 은 안쪽여백을 모든 방향에서 0으로 하겠다는 뜻이 됩니다.
전체 레이아웃 뿐만 아니라 내부에 포함된 각 요소에도 잘 적용이 되는 사항이니, 머릿속에 넣어주면 편안하게 이용할 수 있으리라 생각됩니다. 예를 들어, 흔히, DIV 같은 요소 자체를 중앙정렬 하려고 할때 부모요소에 text-align 같은걸 써봐도 잘 안되는데, 그럴때에 요 기능을 이용하면 해결이 되는 거죠. 아래 예를 참고하세요..
<div style="margin:0 auto; padding:0; width:400px; border:1px solid #bbbbbb;"> ~ </div>
로 되어있습니다.
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 태터데스크 사용하면서 "주소/?page=XX" 링크 사용하기 (3) | 2008/11/07 |
|---|---|
| RSS 부분공개에서 전체공개로... FeedBurner 사용중지... (6) | 2008/11/05 |
| CSS - 내용을 가운데로 정렬하기 - margin-left/right: auto (4) | 2008/10/31 |
| 태터데스크 주무르기 : 썸네일 배치 ( 내용추가 ) (35) | 2008/10/29 |
| 태터데스크에 새글 아이콘 달기 (20) | 2008/10/29 |
| 블로그 가치평가 by 블로그얌(Blogyam) (6) | 2008/10/28 |
트랙백 주소 :: http://www.crazybar.net/trackback/731
-
Subject: div(영역) 가운데 정렬
Tracked from 본격 삽질하는 2010/01/31 16:35 삭제그 동안 DIV 영역은 left 값으로 밀고, margin-left로 당겨서 가운데 정렬하는 방법을 사용해왔다. 별 탈 없이 사용해왔기 때문에 무슨 문제가 있거나 한줄은 몰랐고, 덕분에 꽤 오랫동안 문제를 방치했다. 정상적으로 작동하는 모습 창이 위와 같이 박스의 크기보다 큰 경우엔 정상적으로보여지지만.. 창의 가로
댓글을 달아 주세요
좋은 글 잘 보고 갑니다 ^____^
질문 하나. Firefox에서는 잘 보이는데, IE에서는 좌측으로 정렬되는 현상이 발생하는데요. 이럴 땐 어떻게 해결하죠?
이게 눈으로 보고 직접 만져보기 전에는 뭐라 말씀드리기가 어렵네요. 저도 문제가 생기면 메뉴얼보고 해결하는 터라.. -_-;;
답을 드리지 못해 죄송합니다.
좋은 정보 감사합니다. ^^ 블로그에서 관련글을 쓰고 트랙백했습니다.
Guju// HTML 문서 속성을 지정하지 않으셨다면, 지정 후 확인해보시면 정상적으로 나타나리라 생각합니다.
아주 간단한 팁인걸요... ^^
방문 감사드립니다.