기존에 일명 ‘테이블 코딩’, ‘막코딩’ 을 할때는 그다지 문제가 되지 않던게 웹표준 코딩을 하려고 할때는 난감한 경우가 있습니다.
그 중 하나가 바로 가운데정렬이지요.
이미지와 함께 설명을 하면 이해가 빠르겠지만 편의상 이 포스트에서는 온리 텍스트로 갑니다.
(죄송합니다 귀찮아서.. 아마 여러분이라면 이런 내용이라도 충분히 이해하시겠죠)
우선 테이블로 레이아웃을 잡던 시절의 방법을 보겠습니다.
<tr>
<td height=”100″ valign=”middle”>test</td>
</tr>
</table>
위와 같이 하면 test 라는 글자를 감싸는 테이블은 가운데정렬이 됩니다.
그리고 테이블의 셀높이를 100px 로 줬는데 valign=”middle” 이므로 test 글자는 세로로 가운데로 정렬됩니다. (valign=”middle”은 기입하지 않아도 기본값입니다)
아주 간단하지요.
하지만 테이블을 레이아웃 구성에 사용하는 것은 좋지 않습니다.
데이터를 표현하라는 원래 목적에 맞지 않으며, 복잡해지면 유지보수도 어려워져요.
(그런데 저를 포함해서 우리나라 대다수의 디자이너&개발자 분들은 이게 편하죠?)
그럼 이제 아래의 소스를 보시겠습니다.
<li>제목1</li>
<li>제목2</li>
</ul>
리스트 하나를 마크업했습니다. 이것을 가운데로 정렬하고자 합니다.
글자를 가운데정렬이 아니라 ul 자체를 그것을 감싸고 있는 무언가에 대해서 가운데에 위치시켜야만 합니다.
블록엘리먼트를 가로로 가운데정렬을 하는데 조건이 있습니다.
width 가 반드시 지정되어 있어야 합니다.
ul { width:400px; margin:0 auto; }
</style>
<ul>
<li>사과</li>
<li>오렌지</li>
</ul>
이렇게 스타일에서 width 를 400px 로 고정하면 margin:0 auto; 로 양쪽 마진을 자동으로 잡게 해서 가운데정렬이 가능합니다.
그런데 만약 위의 리스트의 내용이 가로길이가 유동적이라 ul 의 width를 고정할 수 없다면?
이게 문제입니다. 현재 웹 현실로는 css만으로는 무리입니다.
javascript 로 그때그때 가로길이를 불러와서 width를 유동적으로 지정한다면 가능할 수도 있을 것이라 생각합니다만 그렇게 까지 해야하나요?
이 경우에는 꼭 width 가 유동적이어야만 하는지 다시 생각해보고
혹시 마크업을 다르게 하면 고정 width 로도 가능한 표현이 아닌지 생각해봐야 합니다.
물론 여기서 그 모양을 구현하기 위해 불필요한 마크업을 하는 것도 자제해야 합니다.
이렇게 가로로 가운데정렬하는 것은 제약이 따릅니다.
그러면 세로 가운데정렬은 어떨까요?
<div class=”content”>가운데 정렬 되고 싶어요</div>
</div>
위와 같은 마크업이 존재하고 wrap 은 세로길이가 400px 이라고 가정합니다.
만약 content 의 height 가 100px 이라고 가정을 한다면
.content { height:100px; margin:150px 0; }
이렇게 위아래에 150px 씩 마진을 주어 가운데 위치시킬 수 있겟죠.
content 의 세로가 100px 이니 그 안의 텍스트는 상단 정렬 될 수 밖에 없습니다.
이 역시 적절히 padding 을 조절하는 방법 말고는 없습니다.
조금 문제가 있는 방법이지만 또 다른 방법도 소개합니다.
홈페이지를 미니홈피형식의 조그만 사각형으로 구성했다고 가정합니다.
이것을 브라우저의 크기에 상관없이 가로, 세로 가운데에 위치시켜야 보기에 이쁘겠죠.
다행히 가로세로 길이를 모두 알고 있습니다.
body { height:100%; }
.main { width:400px; height:300px; position:absolute; top:50%; left:50%; margin-top:-150px; margin-left:-200px; }
</style>
<body>
<div class=”main”>test</div>
</body>
이해가 되시나요? 설명을 하겠습니다.
우선 main div 를 감싸고 있는 body 의 세로길이를 100% 로 지정을 해놨습니다. 브라우저 크기 상관없이 100% 를 유지하도록 말이죠.
그리고 main 을 position:absolute; 로 띄웠구요.
top:50%; left:50%; 을 적용함으로써 body 의 중간부분에 위치합니다.
여기서 main 에 위쪽과 왼쪽 마진을 main 자체의 가로,세로길이의 절반을 음수로 넣어줌으로써 정말 가운데에 위치하게 됩니다.
응용하면 여러가지 상황에 사용할 수도 있겠으나 위와 같은 예제에서는 문제점도 있습니다.
브라우저를 작게 조절하셔서 보시면 아시겠지만 스크롤바를 움직여도 모든 내용을 볼수 없게 가려집니다 (…)
이렇게 제약사항이 있습니다만 생각을 조금만 바꾸면 해결되는 부분도 많습니다.
기존의 레이아웃을 생각하던 버릇 때문에 더욱 난감해질 수 있습니다.
실제로 이 문제가 치명적으로 다가오는 경우는 드물거든요.
정 안된다면 아주아주 가끔 정도는 테이블을 이용하여 가운데 정렬을 하셔도 크게 문제는 없습니다만 “의미에 맞는 마크업! 데이터와 표현의 분리!” 를 위해선 좋지 않겠지요.
저의 블로그에서 이렇게 지루한 장문의 글을 읽으시는 분이 과연 몇분일지 모르겠습니다 ㅋㅋ;
중간중간 그림이라도 넣었으면 덜 지루했을텐데 -_-….
안녕하세요.
.center {
margin-left: auto;
margin-right: auto;
}
이렇게 해도 문제가 되던가요?
글 내용에 있다시피
width 가 지정되어있어야 한다는 조건이 있습니다~
그것이 충족되면 됩니다.
윗분이 말하려고 했던걸 미리 말씀하셨군요..
테이블을 사용하지 말라가 아니라..테이블사용할때를 정확히 알라고 하는게 웹표준 입니다. 무조건 적인 테이블 사용 회피는 마크업에도 전혀 들어 맞질 않는다고 보는게 옳습니다. 가운데 정렬을 위해서 테이블을 사용하는것 자체가 더 복잡한건 사실입니다. 주제넘는 댓글 같네요^^ 글 잘읽고 갑니다.행복한 하루 보내세요~~
맞습니다.
테이블은 필요할때만 사용해야지요.
레이아웃을 위한 필요가 아니라 의미적으로 필요할때 말입니다.
.center {
margin-left: auto;
margin-right: auto;
}
는 적어도 파폭에서는 적용되지 않는군요. 전 이렇게 표현합니다.
.center {
margin-left: 30%;
margin-right: 30%;
}
“30%”는 적당하게 넓이에 맞게 조정하면 되겠죠.
블록엘리먼트에 width 가 없으면 100% 로 잡히니까요.
margin-left: auto;
margin-right: auto;
로 하셔도 width 를 지정하면 정상적으로 됩니다~
편리한
아..center 태그가 있었지요..
이제는 정말 가까이해선 안되는 친구입니다.
간단 명료가 표준이 가져야할 조건중 하나이거늘
가운데 정렬 문제만 만나면 골아픔…ㅡ.ㅡ
어쩔 수 없이 코딩하는 측면에서 열심히 머리를 굴려봐야지요 ㅎ
[ul style=”text-align: center;”]
[li]ABC[/li]
[/ul]
해보셨나요? 블록 엘리먼트에서 하위 엘리먼트들의 텍스트를 정렬하는 것은 text-align 속성입니다.
블록 엘리먼트는 당연히 width 속성이 없으면 100%가 디폴트니까 가운데 정렬이고 자시고 할 게 없지요. 폭을 적당히 좁혀놔야 margin: 0px auto; 옵션이 먹히는게 아니겠습니까?
또한, 위에 드신 테이블의 예와 UL의 예는 경우가 다르다고 봅니다. 예로 드신 테이블의 가운데 정렬은 테이블 내의 텍스트가 대상이니 text-align: center; 옵션을 주시면 되겠구요, 마찬가지로 UL 태그 안의 텍스트만 정렬하실 거라면 text-align: center; 옵션만 추가하시면 됩니다. 만약 테이블 또는 UL 엘리먼트 자체를 가운데 정렬하시려면 당연히 width 옵션을 주셔야겠지요.
테이블의 예에서
가로 가운데 정렬은 테이블 자체의 가운데정렬입니다.
table 에 align=”center” 를 주면 width 를 지정하지 않아도 가운데로 정렬이 되지요.
말씀하신대로 text-align: center; 를 적용하면
테이블 안의 인라인 엘리먼트가 테이블에 대해서 가운데로 정렬될 것입니다.
또한 기존에 테이블로 레이아웃을 잡을때 편했던 것을 설명하고자
테이블안의 텍스트를 세로로 가운데 위치하게 하는 것도 같이 예로 들었습니당~
텍스트만 빡빡한 글을 다 읽어주셨네요. 댓글 감사합니다 ( __)
페이지 전체를 가운데로 정렬하는 것을 위해 TD, TR이 각각 1개씩 들어가는 테이블을 쓰면.. 웹표준에 부합되지 않는 건가요?
사실.. 패딩이나 마진에 대한 브라우저의 정책이 달라서인지 .. CSS로만 레이아웃을 짜기도 만만치 않은거 같더라구요..
유효성검사를 통과할 수는 있습니다.
하지만 의미에 맞게 마크업했다고 볼 수 없겠지요.
그리고 표현을 위해 마크업이 추가되었기 때문에
디자인 관리를 css 에서 총괄하지 못할 것입니다.
좋은글 잘 읽었습니다. 어짜피 웹개발자들만 이해할 수 있는 내용이기에 그림이 없어도 충분히 좋습니다.^^
방문 감사합니다 ^^
위에 강조된 “의미에 맞는 마크업! 데이터와 표현의 분리!”
이게 정말 중요한거죠. ^^)b
그 한마디를 강조하면서 쾌감을 느낍니다.
위의 여러분들이 말씀하셧지만, 가장 쉬운건
style=”text-align:center;margin:auto”
말씀하신 테이블의 경우에는
이렇게 하면 크기를 정하지 않아도 가운데로 쏘옥 들어오게 됩니다. XHTML기준으로…
text-align:center; 는 인라인 엘리먼트만 적용된다는 것에 주의해야합니당~
이 부분은 테이블 자체 정렬이 되는데요….
일단 style=”margin:auto” 는 불필요해서 뺐습니다.
align=”center” 만 사용하면 테이블 자체가 가운데 정렬이 되지요.
하지만 말슴하신것중 text-align:center; 는 table align=”center” 와는 다른 개념이니까요.
td align=”center” 일 때는 비슷하게 적용되지만
text-align:center; 의 경우엔 내부의 인라인 엘리먼트에만 center 정렬이 적용된다는 차이가 있죠.
하지만 align=”center” 도 결국엔 표현을 위한 마크업이니 사용하기가 조금 거시기하네요 ㅎ;
무슨말씀 하시는 줄 알겠는데요, margin auto를 적용 안하면, 가운데 정렬 안됩니다. XHTML에서는요.
물론 HTML에서는 됩니다.
마크업 버젼에 따라서 다 될려면 XHTML을 따라야 할거 같습니다.
제가 계속 토를 달아서 죄송합니다만 ㅠㅡ;
XHTML 에서도 테이블은 align=”center” 만으로도 가운데 정렬이 됩니다.
여러가지 브라우저에서 테스트를 했던 것이구요.
테이블이 아닐경우에는 좌우 마진을 auto 로 해야 가운데 정렬이 되지요.
이때는 물론 width 가 반드시 지정되있어야만 합니다.
하나 덧붙여서 “의미에 맞는 마크업! 데이터와 표현의 분리!”적으로 본다면,
FF에서는 아직 문제가 없지만,IE계열에서는 테이블 스트럭쳐의 상속관계가 불분명하면 DOM 접근시 에러 뜹니다……Permission Error였던거 같아요.
^^ 소스~ 잘 썼어용~
이런 경우에 보통 부득이 하게 테이블을 사용했었는데 이런 유용한 방법이 있었군요!
감사합니다~
감사합니다 익스8에서 가운데 정렬이 안되서 검색하다가 알게됐네요..너무 감사^^
도움이 됐다니 다행이네요~
우연히 이 블로그 들어온게 레이아웃 연습하고 있다가
….마침 가운데 정렬 때문에 막혀서 머리 식히던 참이었어요!;
wrap양옆 auto로 줘서 가운데 정렬하는건 알았는데
왜인지는 몰라도 크롬에서는 되는데 IE7에서는 안되는거에요 ㅠㅁㅠ
막 저 혼자 남의 소스훔쳐다 야메로 따라해보며 공부하던 차라 내가 모르는 정식 방법이 있는건가 싶어서 절망하고 있었는데…그렇지는 않은가봐요
그래도 마진 주는건 문제없다고 제외할수있어서 다행^^;…계속 닥타입이라던가 관련있을거같은 프로퍼티를 하나씩 바꿔가며 삽질하던차였거든요 에궁 IE로 보시는 분이 많으니 확인안할수도 없고…
오래전에 쓴글인데 블록엘리먼트의 가운데정렬에 대해서는
거의 정리된 내용입니다.
브라우저마다 잘 안된다면 제대로 독타입이 적용되고 있는지
확인할 필요가 있어요..
맞게 넣었다고 알고있지만 틀리게 넣는 경우가 많거든요.
웹표준으로 만들고 있다가 가운데정렬이 안되서 애먹었는데 님이 가르쳐주신데로 하니 되네요!!! 정말 감사합니다!!!
도움이 되셨다니 저도 좋네요