금방 떠오르는 생각은 text-align 속성을 사용하는 것인데요.
text-align:center 로 하면 하위 요소에 상속을 주기 때문에 하위 블럭 안의 내용이 모두 가운데 정렬이 되어 버려요.
블럭 안의 내용은 가운데 정렬이 아니면서 블럭이 상위 블럭의 가운데로 표시되게 하려면 text-align 은 답이 아닙니다.
검색해 보시면, 가운데 정렬할때 maring:0 auto 를 주라는 것이 많을 거에요.
margin 옵션의 값으로 "0 auto" 를 주라는 것인데,
"0 auto" 는 "0 auto 0 auto" 와 동일한 의미입니다.
이전에 "10px 20px 30px 40px" 처럼 썼던 것은 기억하시죠..?
맨 처음 값이 블럭의 상단, 다음이 우측, 세번째가 하단, 네번쨰가 좌측, 이런식이죠.
그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라 했던 거구요.
"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이지요.
동일한 값으로 4번 반복된다면 "10px" 하나만 썼던 것이구요.
그러니까, "0 auto" 는 상단과 하단은 여백을 주지 말고, 좌측과 우측의 여백을 자동으로(auto) 주라는 것이죠.
margin 의 친구 padding 있잖아요. padding:0 auto 로는 가운데 정렬이 작동하지 않습니다. ^^.
그런데, margin:0 auto 를 주었음에도 적용되지 않는 경우가 있어요.
DOCTYPE 을 정의하지 않으면 그렇다는 것이죠. DOCTYPE 은 꼭 표현을 해 주세요.
요즘은 DOCTYPE 으로 아래와 같이 XHTML 1.0 Transitional 을 많이 쓰는 것같구요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 라면 아래와 같이 간단하게 표현하면 됩니다.
<!DOCTYPE html>
<html>
샘플로 아래 코드를 시험해 보세요.
<!DOCTYPE html>
<html>
<div style="width:600px; height:600p; background:cyan; padding:0;">
<div style="width:500px; height:500px; margin:0 auto 0 auto; position:relative; background:yellow">
<div style="width:500px; height:200px; position:absolute; top:100px; background:red; z-index:2">red</div>
<div style="width:500px; height:200px; position:absolute; top:200px; background:green; z-index:1">green</div>
<div style="width:50px; height:50px; position:absolute; top:330px; left:300px; background:blue; z-index:2">blue</div>
</div>
</div>
</html>
그런데, DOCTYPE 을 사용하지 못하는 상황이라면 어떻게 해야 할까요..? 아래와 같이 해 보는 것은 어때요..?
<div style="margin:0 auto" align="center">
...
</div>
.Fine.
'Local Oriented > HTML CSS JS' 카테고리의 다른 글
| 모바일 기기를 고려한다면, onclick 에서도 javascript 반드시 기술 (1) | 2011.08.30 |
|---|---|
| CSS, 외부 포스트 모음 (0) | 2011.08.26 |
| CSS border-width 더이상 사용하면 안 되는 듯.. (0) | 2011.06.30 |
| 투명 플래시 z-index 가 적용되려면 object 사용시 param 에 name='wmode' value='transparent' 추가 (1) | 2011.06.27 |
| 자바스크립트 모바일 툴킷(프레임웍), DojoToolkt VS jQuery Mobile (0) | 2011.06.24 |