언제나 피어있는 꽃

보면, 제 블로그의 전체 컨테이너는 중앙으로 되어있습니다
(전체 컨테이너 = 블로그 스킨 이라고 생각하시면 됩니다)

가로 사이즈가 넓어도, 항상 가운데 정렬로 되어있는데, 어떤 방법으로 한건지 알아 봅시다


# <CENTER> ~ </CENTER>

일단 기본적으로 중앙 정렬을 하려면, <CENTER> ~ </CENTER> 태그를 사용하면 됩니다만, 쓸데없이(!) 길고 영역이 많은 스킨에서는 조금 불편합니다


# CSS의 TEXT-ALIGN

저번 글을 보면 아실듯, 블로그는 크게 전체 컨테이너, 해더, 컨텐츠, 사이드바, 푸터로 이루어져있습니다. 또한, 각 영역은 <DIV>로 이루어져있어서 아이디(ID)나 클래스(CLASS)를 적용할 수 있죠
CSS에서 전체 컨테이너의 설정값을 TEXT-ALIGN:CENTER; 로 하시면 중앙으로 정렬됩니다
하지만 <CENTER> ~ </CENTER> 와 마찬가지로 불편한 점이 있습니다


# 자동 마진(MARGIN)

마진을 이용하면 간편하게 중앙 정렬을 할 수 있습니다
티스토리에서 지원하는 스킨중 중앙으로 정렬되어 있는건 모두 이 방법을 사용했고, 웹표준적으로 마진을 이용해서 중앙 정렬을 해야한다고 알고 있습니다

먼저 마진에 대해 조금 더 알아봅시다


예전에 마진/패딩을 사용할때 따로 방향을 설정하지 않고 순서대로 나열하던게 있습니다
위쪽-오른쪽-아랫쪽-왼쪽순으로 4개였는데, 위처럼 2자리로 끊어서 사용하기도 합니다

위의 소스대로 설명하면, "위/아래에는 10픽셀의 마진을, 좌/우에는 20픽셀의 마진을 적용한다" 입니다
즉, 상/하 와 좌/우로 되어있습니다


다시 돌아와서, 마진을 이용하여 중앙으로 정렬하는 방법은 아주 간단합니다


상/하값은 0으로 되어있고, 좌우값은 자동(AUTO)으로 되어있군요
이렇게 하면, 위와 아래의 마진은 0이 되고, 좌우는 가운데로 정렬됩니다

왼쪽 정렬을 하고 싶다면, 마진 값을 아예 제거하거나 임의의 숫자를 넣어주면 자동적으로 왼쪽 정렬이 됩니다