align=”center”의 올바른 표현
2005.04.17 ,
오후 09:43 
웹 디자인 
4 comments »
테이블을 기반으로 웹페이지의 레이아웃을 할때, 글이나 이미지 등의 내용을 가로방향으로 가운데 정렬을 하기 위해서는 align=”center” 태그를 사용한다. 하지만, 지난 글에서 밝힌 것과 같이 테이블 태그은 자료의 정리와 표현을 위한 태그이지 결코 레이아웃을 위한 태그가 아니다.
XHTML + CSS 에는 align=center 가 없다. 대신 스타일쉿에서 margin : 0 auto; 를 이용한다. 이는 margin : 0 auto 0 auto; 의 단축코드로써 마진값(바깥여백)을 위에서부터 시계방향으로 위=0, 오른쪽=자동, 아래=0, 왼쪽=자동을 준다는 의미이다.
인터넷 익스플러 6과 파이어폭스 1에서는 위와 같은 방법으로 가운데 정렬을 할 수 있지만, 인터넷 익스플러 5.5 이하 버전에서는 text-align : center 핵(hack)을 사용해야 한다.
내 컴퓨터에는 IE 6, FF 1, NN 7이 깔려 있기 때문에 CSS 기반 디자인을 할 때 test-align : center 핵을 깜빡 잊고 코딩에서 빼먹기도 한다. ^_^
Hooney라는 ID로 온라인에서 활동하는 조훈입니다. 
4개의 의견이 있습니다. | 당신의 의견을 바랍니다.
1.
일모리 ｜
2005.04.18 ,
오후 10:55 ·
permallink
그렇죠 margin-left: auto; 식의 태그를 씁니다.
이하버전의 핵이라면 text-align:center 를 써서 그 안에 들어오는 div 가 center가 되게 한다는 거겠군요
2.
hooney ｜
2005.04.18 ,
오후 11:06 ·
permallink
CSS 포지셔닝의 기본일 수 있겠지만, 테이블 레이아웃에 익숙하다 보면 나도 모르게 올바르지 못한 표현인 text-align:center 만 쓰고 만답니다.
다른 분들도 저처럼 헤깔리지 않을까 싶어서 포스팅 한겁니다.
3.
일모리 ｜
2005.04.18 ,
오후 11:11 ·
permallink
그렇죠 저도 CSS 처음에 할때에 text-align 과 margin 이 다른용도인것을 알면서도 자꾸 왔다갔다 했었으니까요
4.
tux ｜
2005.04.21 ,
오전 12:12 ·
permallink
text-align 이 너무 익어서 아무생각없이 쓰고 있다죠.. -_-;;
당신의 의견을 바랍니다..
사용할 수 있는 HTML 태그 :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>