블로그 디자인을 하겠다고 마음을 먹고나면 일단, 디자인 시작하기에 앞서 여러가지 생각을 하게 됩니다.

깔끔하고 심플한 스타일로 할까? 아니면 그런지스타일? 무료이미지 싸이트에서 본 꽃그림을 이용해 보는 것은 어떨까? 얼마전 패션잡지에서 예쁜 색상조합을 봐 두었는데 그걸 써볼까?
자신의 블로그에 대한 갖가지 컨셉을 떠올리는 것도 재미있는 일이지만 블로그 디자인은 순수예술을 하는 것이 아니므로 구조적인 부분과 기술적인 부분을 함께 고려해야할 것입니다. 그 중에서 제일 먼저 생각해야 할 것이 바로 블로그의 몸통이라고 할 수 있는 부분을 어디에 정렬시느냐 하는 것입니다. (중앙정렬 or 왼쪽정렬)

블로그를 이용하는 사용자는 저마다 다른 모니터를 사용합니다. 만약 디자이너가 화면전체를 사용하는 레이아웃을 선택한다면 그 블로그는 사용자의 모니터의 가로 길이에 따라 유동적으로 변하게 될 것입니다. 변하는 가로 길이에 맞추어 포스팅을 작성하기란 쉬운일이 아니죠. 때문에 블로그의 디자인은 대부분 특정한 길이를 가진 틀을 기준으로 제작이됩니다. 블로그의 몸통이라고 할 수 있는 부분을 따로 만든다는 것이죠.

자 그러면 우리는 블로그를 만들기 전 한 가지 선택을 해야 합니다. 블로그의 몸통을 왼쪽에 정렬시킬것이냐? 아니면 중앙으로 정렬을 시킬 것이냐? (독특하게 오른쪽 정렬을 시키고 싶은 분들도 계시겠지만 왼쪽에서 글을 읽어 나가는 게 습관화되어 있는 현대인에게 불편함을 주는 방법이므로 제외시키는 것이 좋을 것 같습니다.)

과거에는 주로 왼쪽정렬을 선호하는 편이었습니다. 예전에는 div가 아닌 주로 table을 이용해 레이아웃을 구성했었는데, table을 이용해 중앙정렬 방식을 구현했을 때 div를 사용한 코딩 기술을 적용시키기가 힘들었기 때문에 주로 왼쪽정렬을 선호했었던 것이죠. 현재는 html 코딩과 관련된 갖가지 기술과 div를 사용한 코딩 방식이 널리 보급되었기 때문에 왼쪽정렬이나 중앙정렬 어느 쪽을 선택하더라도 특별한 기술적 제약은 없을 것으로 생각됩니다.

왼쪽정렬

타이틀이 포함된 왼쪽 사이드바를 사용하거나 전체적인 넓이를 크게 사용하고자 할 때 왼쪽정렬 방식을을 사용하면 좀 더 효과적인 전달이 가능할 것입니다. 오른쪽 배경 부분을 반복되는 요소로 처리하고 싶을 때도 왼쪽정렬을 선택할 수 있습니다. 왼쪽정렬을 사용할 경우 특별한 배경처리를 해주지 않거나 가로길이를 지나치게 작게 잡았을 경우 고해상도의 모니터에서 블로그가 왼쪽에 붙어 있는 느낌을 줄 수도 있으니 이 부분은 주의해야 할 것입니다.

왼쪽정렬 레이아웃 구현

skin.html
<body>
  <div id="container">
    블로그내용
  </div>
<body>
style.css
body{
  font:12px dotum;
  color:#000;
}
#cotainer{
  width:1000px;
}

왼쪽정렬의 경우 코딩은 간단하니 그냥 넘어가도록 하겠습니다. :)


중앙정렬

중앙정렬은 좌우로 동일한 간격의 여백이 남기 때문에 구조적으로 안정적인 느낌을 주며 모니터 해상도 변화에서도 왼쪽정렬에 비해 좀 더 강력하게 대응할 수 있습니다. 때문에 요 근래에 만들어 지고 있는 대부분의 블로그와 홈페이지들은 왼쪽정렬보다는 중앙정렬 방식을 더 많이 사용하고 있습니다.

중앙정렬 레이아웃 구현

skin.html
<body>
  <div id="container">
    블로그내용
  </div>
</body>
style.css
body{
  font:12px dotum;
  color:#000;
}
#container{
  width:1000px;
  margin:0 auto;
}

중앙정렬을 구현하는 방식은 위와 같습니다. 블로그의 몸통이 되는 레이어(div id= container)의 오른쪽과 왼쪽 margin(외부여백)값을 auto(자동)으로 잡아주는 것입니다. 양쪽 margin(외부여백)이 auto(자동)으로 처리가 되면서 container레이어가 중앙으로 위치하게 되는 것이죠. 하지만 이 방법은 중앙정렬 레이아웃을 구현하는 '정석' 방식이라고 할 수 있으나 멍충이 같은 인터넷익스플로러에서는 먹히질 않습니다. 그래서 사용하는 것이 text-align입니다. text-align속성은 원래 텍스트를 정렬하기 위한 속성이지만 익스플로러에서 중앙정렬이 먹히게 하기 위해 레이아웃 기법에 사용하는 것이죠. style.css를 다음과 같이 설정해 줍니다.

style.css
body{
  font:12px dutum;
  color:#000;
  text-align:center;
}
#container{
  width:1000px;
  margin:0 auto;
  text-align:left;
}

body의 정렬방식을 중앙정렬(text-align:center)로 바꾸어 container레이어가 중앙에 정렬되게 해 줍니다. 그리고 container레이어의 내의 텍스트 정렬방식은 따로 설정하지 않을 경우 body의 속성을 그대로 계승하므로 왼쪽정렬(text-align:left)로 다시 바꾸어 줍니다. (#container{}안에 text-align:left를 써주지 않을 경우 본문 내의 글자들은 전부 중앙정렬이 됨)


출처 : http://yongja.tistory.com/43

+ Recent posts