태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

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

분류: Digitial News/Blogging Guide 작성일: 2007.10.07 06:44 Editor: 마루[maru]
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의 '블로그 가치평가' 스크립트를 수정배열 하면서 위의 배너와 하단의 글 상자가 붙어버리는 결과를 보여 원인을 찾고, 적용한 예를 바탕으로 하고 있다.
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://gsplus.jeep2u.com BlogIcon 공상플러스 2007.10.07 11:08 신고  댓글주소  수정/삭제  댓글 남기기

    아니 그런 방법이!!

  2. Favicon of http://ismvisualstudio.net/blog/freeism BlogIcon freeism 2007.10.07 11:42 신고  댓글주소  수정/삭제  댓글 남기기

    콘텐츠의 구조화 XHTML 도 중요하지만, 디자인의 구조화도 무척이나 중요하죠. 요소와 요소 간의 여백은 말씀하신 것 처럼 심미적인 부분과 함께 가독성에도 영향을 미치니깐요.
    하지만, margin 과 padding 은 분명 잘 구분해서 체계적으로 사용해야 할 것 같습니다. 그렇지 않으면 추후 유지보수 단계에서 매우 번거로워 질 수 있기 때문입니다.
    역시 아직 익숙하지 않으지 않으신 분들에게는 어려운 내용이겠네요. ^^;;

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.10.07 18:20 신고  댓글주소  수정/삭제

      체계적인 활용이란 말씀이 귀에 와닿습니다.
      앞을 내다보고 유지보수 단계까지 고려 한다면 제어하기 수월한 방향으로 전환을 해야 한다는 말씀인것 같습니다.
      그런 방법의 하나로 style.css로 정의해서 활용하면 체계적인 활용이 되지 않을까 싶습니다.^^

  3. Favicon of http://archvista.net BlogIcon 아크몬드 2007.10.07 14:53 신고  댓글주소  수정/삭제  댓글 남기기

    오호~ margin 을 그렇게 주면 되는거군요

  4. Favicon of http://schwarz.co.kr/tt BlogIcon 드래곤군 2007.10.07 15:20 신고  댓글주소  수정/삭제  댓글 남기기

    margin 과 padding 을 줄 때 주의해야 할 점은 IE6 와 불여우와 width 를 계산하는 법이 다르다는 것도 있지요. IE6는 padding 과 margin 을 늘려주면 전체 width 가 늘어나지만 불여우는 그렇지 않아서, width 를 줄여줘야 합니다.

    웹 표준 등에 관련한 블로그를 찾아보시면 자세한 내용을 보실 수 있을 겁니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2007.10.07 18:16 신고  댓글주소  수정/삭제

      ^^ 얕은 지식의 포스팅이 이렇게 큰 지식의 바다와 공감할 수 있다는것이 블로그의 가장 큰 매력인것 같습니다.
      좋은 서포터에 감사 드립니다.
      좀 더 깊이 관심을 가지고 살펴봐야 하겠습니다.

  5. Favicon of http://techroad.net BlogIcon 학주니 2007.10.08 13:47 신고  댓글주소  수정/삭제  댓글 남기기

    여백의 미학이군요.. ^^;
    그나저나 정말로 웹브라우저마다 방식을 다르게 해야하는 문제때문에.. -.-;

  6. Favicon of http://foxlife.co.kr BlogIcon foxlife 2007.10.12 17:45 신고  댓글주소  수정/삭제  댓글 남기기

    블로그 손안댄지 한참됐는데, 이참에 ㅋㅋ

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.12.13 20:03 신고  댓글주소  수정/삭제

      왜 이 댓글을 못봤을까요?
      잘 지내시고 계시는가요?
      찾아본지도 오랫만이라 어떻게 지내시는지 무척이나 궁금하네요.
      오늘 밤에는 잠시 들려서 그간의 안부라도 엿 봐야 할 것 같습니다.^^

  7. Favicon of http://goigoi.tistory.com BlogIcon 고이고이 2007.10.18 16:55 신고  댓글주소  수정/삭제  댓글 남기기

    제가 항상 플러그인 설치할때마 부딪히는 문제인데 여기서 공부좀 해야겠네요 ^^감사합니다

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.12.13 20:01 신고  댓글주소  수정/삭제

      제가 아는 범위안에서 도움이 될 수 있는 부분은 설명을 해드리도록 노력하겠습니다.
      고이고이님 건강하고 행복한 연말 보내시길 바랍니다

  8. Favicon of http://kousa.tistory.com BlogIcon 미국얄개 2008.12.13 15:45 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 글 감사합니다.
    많은 자료 얻어 갑니다.

    • Favicon of http://www.designlog.org BlogIcon 마루[maru] 2008.12.13 20:00 신고  댓글주소  수정/삭제

      도움이 되셨으면 좋겠습니다.
      시간이 허락되면 더 좋은 정보들을 공유하도록 노력하겠습니다. 자주 찾아주시고 아낌없는 조언도 부탁드립니다.^^


우드스