[태그:] css

기존에 일명 ‘테이블 코딩’, ‘막코딩’ 을 할때는 그다지 문제가 되지 않던게 웹표준 코딩을 하려고 할때는 난감한 경우가 있습니다.

그 중 하나가 바로 가운데정렬이지요.

이미지와 함께 설명을 하면 이해가 빠르겠지만 편의상 이 포스트에서는 온리 텍스트로 갑니다.
(죄송합니다 귀찮아서.. 아마 여러분이라면 이런 내용이라도 충분히 이해하시겠죠)

우선 테이블로 레이아웃을 잡던 시절의 방법을 보겠습니다.

위와 같이 하면 test 라는 글자를 감싸는 테이블은 가운데정렬이 됩니다.
그리고 테이블의 셀높이를 100px 로 줬는데 valign=”middle” 이므로 test 글자는 세로로 가운데로 정렬됩니다. (valign=”middle”은 기입하지 않아도 기본값입니다)
아주 간단하지요.

하지만 테이블을 레이아웃 구성에 사용하는 것은 좋지 않습니다.
데이터를 표현하라는 원래 목적에 맞지 않으며, 복잡해지면 유지보수도 어려워져요.
(그런데 저를 포함해서 우리나라 대다수의 디자이너&개발자 분들은 이게 편하죠?)

그럼 이제 아래의 소스를 보시겠습니다.

리스트 하나를 마크업했습니다. 이것을 가운데로 정렬하고자 합니다.
글자를 가운데정렬이 아니라 ul 자체를 그것을 감싸고 있는 무언가에 대해서 가운데에 위치시켜야만 합니다.

블록엘리먼트를 가로로 가운데정렬을 하는데 조건이 있습니다.
width 가 반드시 지정되어 있어야 합니다.

이렇게 스타일에서 width 를 400px 로 고정하면 margin:0 auto; 로 양쪽 마진을 자동으로 잡게 해서 가운데정렬이 가능합니다.

그런데 만약 위의 리스트의 내용이 가로길이가 유동적이라 ul 의 width를 고정할 수 없다면?
이게 문제입니다. 현재 웹 현실로는 css만으로는 무리입니다.
javascript 로 그때그때 가로길이를 불러와서 width를 유동적으로 지정한다면 가능할 수도 있을 것이라 생각합니다만 그렇게 까지 해야하나요?

이 경우에는 꼭 width 가 유동적이어야만 하는지 다시 생각해보고
혹시 마크업을 다르게 하면 고정 width 로도 가능한 표현이 아닌지 생각해봐야 합니다.
물론 여기서 그 모양을 구현하기 위해 불필요한 마크업을 하는 것도 자제해야 합니다.

이렇게 가로로 가운데정렬하는 것은 제약이 따릅니다.
그러면 세로 가운데정렬은 어떨까요?

위와 같은 마크업이 존재하고 wrap 은 세로길이가 400px 이라고 가정합니다.

만약 content 의 height 가 100px 이라고 가정을 한다면
.content { height:100px; margin:150px 0; }
이렇게 위아래에 150px 씩 마진을 주어 가운데 위치시킬 수 있겟죠.
content 의 세로가 100px 이니 그 안의 텍스트는 상단 정렬 될 수 밖에 없습니다.
이 역시 적절히 padding 을 조절하는 방법 말고는 없습니다.

조금 문제가 있는 방법이지만 또 다른 방법도 소개합니다.
홈페이지를 미니홈피형식의 조그만 사각형으로 구성했다고 가정합니다.
이것을 브라우저의 크기에 상관없이 가로, 세로 가운데에 위치시켜야 보기에 이쁘겠죠.
다행히 가로세로 길이를 모두 알고 있습니다.

이해가 되시나요? 설명을 하겠습니다.

우선 main div 를 감싸고 있는 body 의 세로길이를 100% 로 지정을 해놨습니다. 브라우저 크기 상관없이 100% 를 유지하도록 말이죠.

그리고 main 을 position:absolute; 로 띄웠구요.
top:50%; left:50%; 을 적용함으로써 body 의 중간부분에 위치합니다.
여기서 main 에 위쪽과 왼쪽 마진을 main 자체의 가로,세로길이의 절반을 음수로 넣어줌으로써 정말 가운데에 위치하게 됩니다.
응용하면 여러가지 상황에 사용할 수도 있겠으나 위와 같은 예제에서는 문제점도 있습니다.
브라우저를 작게 조절하셔서 보시면 아시겠지만 스크롤바를 움직여도 모든 내용을 볼수 없게 가려집니다 (…)

이렇게 제약사항이 있습니다만 생각을 조금만 바꾸면 해결되는 부분도 많습니다.
기존의 레이아웃을 생각하던 버릇 때문에 더욱 난감해질 수 있습니다.
실제로 이 문제가 치명적으로 다가오는 경우는 드물거든요.
정 안된다면 아주아주 가끔 정도는 테이블을 이용하여 가운데 정렬을 하셔도 크게 문제는 없습니다만 “의미에 맞는 마크업! 데이터와 표현의 분리!” 를 위해선 좋지 않겠지요.

저의 블로그에서 이렇게 지루한 장문의 글을 읽으시는 분이 과연 몇분일지 모르겠습니다 ㅋㅋ;
중간중간 그림이라도 넣었으면 덜 지루했을텐데 -_-….