블로그디자인, '박스.배너' 여백주기의 효과는?

CSS 속성 [margin, border, padding]의 활용방법

연속된 박스(box)를 세로 정렬 할 때 별도의 마진(margin)을 정의해 주지 않으면 위.아래로 붙어 보이는 것을 경험한다. 모든 디자인(design)이 그렇하듯 공간 여백의 미는 충분히 배려 되어야 하므로 상당히 중요하다. 아울러 웹디자인(web design)에서도 예외일 수 없다는 것이 개인적인 지론이다.

특히 티스토리(Tistory), 텍스트규브(Text Cube)등등 설치형 블로그 스킨에 외부의 스크립트를 적용시킬 때, 이런 문제들이 발생 되는것을  블로그 서핑을 통해 많이 접하게 되는것 같다.

어떤 블로그는 외부 스크립트(Script)나 배너(Banner)들이 잘 정리되어 있어 블로그 레이아웃(Layout)과 디자인(Design)을 저해하지 않아 시각적 편안함을 제공하지만, 어떤 블로그는 자신의 블로그에 조화를 이루도록 스크립트를 수정하지 않고 적용해 블로그 레이아웃을 흐트리고 디자인도 저해하는 결과를 보이므로 시각적인 스트레스를 방문자에게 제공하기도 한다.
(물론 스크립트나 코드를 수정할 때는 신중을 해야하며, 허용범위에서 수정되어야 한다는 점도 잊지 말아야 한다.)

아래의 예시는 작은 팁에 지나지 않지만, 방문자와 독자를 배려하는 블로그 운영자의 넉넉함이 필요한 까닭에 틈나는 시간이 있다면 흐트러진 배너나 글상자들 정리해 보는것도 좋을 듯 싶다.

비움의 철학 블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. 비움의 철학 블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다.

비움의 철학 블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. 비움의 철학 블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다.

좌측의 경우는 아래 스타일 정의에서 볼 수 있듯이 박스 내부 여백인 padding은 정의되어 있으나, 박스 외부의 여백을 지정하는 margin의 정의는 빠져있다. 그러므로 위.아래의 박스가 붙어 보여지는 형태를 보여주고 있다.

좌측 세로 배열 글 상자(Box)의 스크립트

<DIV align="center">
<DIV style="BORDER: #cccccc 1px dotted; PADDING: 5px 0px 5px 0px; WIDTH: 230px; BACKGROUND-COLOR: #99ff66; TEXT-ALIGN: center">
<P style="MARGIN: 0px"><SPAN style="FONT-SIZE: 11px">비움의 철학<br />블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. </SPAN></P></DIV>

<DIV style="BORDER: #cccccc 1px dotted; PADDING: 5px 0px 5px 0px; WIDTH: 230px; BACKGROUND-COLOR: #99ff66; TEXT-ALIGN: center">
<P style="MARGIN: 0px"><SPAN style="FONT-SIZE: 11px">비움의 철학<br />블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. </SPAN></P></DIV>
</DIV>

우측의 경우는 아래 스타일 정의에서 볼 수 있듯이 박스 내부 여백인 padding과 박스 외부의 여백을 지정하는 margin이 정의되어 있어 위.아래의 박스가 붙어 보여지지 않고 적당한 여백을 가져 별개의 내용을 구분지어 주고 레이아웃 디자인 요소도 충족시켜 주고 있다.

우측 세로 배열 글 상자(Box)의 스크립트

<DIV align=center>
<DIV style="BORDER: #cccccc 1px dotted; MARGIN: 5px 0px 5px 0px; PADDING: 5px 0px 5px 0px; WIDTH: 230px; BACKGROUND-COLOR: #ffcc66; TEXT-ALIGN: center">
<P style="MARGIN: 0px"><SPAN style="FONT-SIZE: 11px">비움의 철학<br />블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. </SPAN></P></DIV>

<DIV style="BORDER: #cccccc 1px dotted; MARGIN: 5px 0px 5px 0px; PADDING: 5px 0px 5px 0px; WIDTH: 230px; BACKGROUND-COLOR: #ffcc66; TEXT-ALIGN: center">
<P style="MARGIN: 0px"><SPAN style="FONT-SIZE: 11px">비움의 철학<br />블로그에 글을 채우는 것보다 중요한 것은 마음을 비우는 것이다. </SPAN></P></DIV>
</DIV>

참고로 margin과 paddign의 스타일 정의에서 값의 지정하는 방향은 상.우.하.좌 시계방향으로 지정되므로 예를들어 박스의 위쪽과 하단에 각각 5px의 여백을 주고자 할 때는,

MARGIN: 5px 0px 5px 0px;

위의 예시처럼 지정해 주면 지정받은 값 만큼 여백을 형성하게 되며, MARGIN의 여백은 모두 투명처리 된다는 사실이다.

이 포스트는 실제 저자의 블로그 사이드바에 위치한 Technorati의 '블로그 가치평가' 스크립트를 수정배열 하면서 위의 배너와 하단의 글 상자가 붙어버리는 결과를 보여 원인을 찾고, 적용한 예를 바탕으로 하고 있다.