티스토리 뷰

IT 이야기/프로그래밍

[HTML] HTML 가운데 정렬 가장 쉽고 한번에 하는 방법1

하늘과 나b 2011. 4. 14. 00:04

HTML 가운데 정렬 가장 쉽고 한번에 하는 방법?

보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다.
그래서 저는 가운데 정렬을 애용하는 편이죠.
그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서
모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다.


 가운데 정렬하는 2가지 방법  

HTML 페이지를 가운데 정렬하는 2가지 방법

HTML 페이지를 가운데 정렬하는 방법은 크게 두 가지 방법이 있습니다.
아래와 같은 방법이죠.

1. auto 마진을 이용한 방법
2. 포지셔닝과 마진에 음수값을 지정하는 방법

그냥 저렇게 봐서는 무슨 방법인지 모르시는 분들이 많으실 것 같아 지금부터 하나씩 설명해 드리도록 하겠습니다.



 1. auto 마진을 이용하는 방법  

auto 마진 이용 방법

HTML 페이지를 가운데 정렬하는 방법 중 첫번째 방법인데요. auto 마진을 이용하는 방법입니다.
먼저 아래와 같이 div 태그를 이용해서 코드를 작성해 보도록 하겠습니다.

<body>
    <div id="wrapper">
    </div>
</body>

위와 같이 코드를 작성하고 스타일시트를 이용하여 아래와 같이 적용해 주면 됩니다.

#wrapper
{
    width : 1000px ;
    margin : 0 auto ;        // 요것이 핵심이죠!
}

소스는 아래에 첨부파일로 작성해 놓았으니 필요하신 분들은 다운로드 하셔서 실행해 보시면 되겠습니다.

저는 위 소스를 이용하여 아래와 같이 만들었습니다.
소스 아래에 첨부파일이 있으니 직접 테스트해 보셔도 좋겠네요!

<html>
<head>
<style type="text/css" >
#wrapper {
    width:500px;
    margin : 0 auto ;
    border:1px solid #000;
}
</style>
</head>

<body>
    <div id="wrapper">
        가운데 정렬 되었습니까?
    </div>
</body>
</html>


test.html


이 소스가 서로 다른 브라우저에서 어떻게 보일지 궁금했습니다.
그래서 테스트를 해 보기로 했습니다.


 실제로 해 봅시다!  

테스트1 : 인터넷 익스플로러 9

아래 화면은 마이크로소프트의 익스플로러 9 버전에서 테스트한 결과입니다.
익스플로러는 아직도 말썽이군요...



테스트2 : 파이어폭스 4.0

아래의 화면은 파이어폭스 4.0 버전에서 테스트한 화면입니다.
가운데 정렬된 것이 보이네요.



테스트3 : 크롬 10

그럼 이제는 크롬 10버전에서 테스트해 보도록 하겠습니다.
크롬에서도 가운데 정렬이 되네요^^




 인터넷 익스플로러를 위한 대책  

그래서 인터넷 익스플로러를 위한 방법을 마련해 보도록 하겠습니다.
인터넷 익스플로러는 text-align:center를 잘못 해석해서 텍스트 뿐만 아니라 모든 것을 중간에 배치하는데요.
wrapper div를 포함한 body 태그에 이런 점을 이용하면 모든 요소를 중간에 배치할 수 있습니다.
그리고 wrapper 내용을 다시 원래대로 재배열하면 됩니다.

아래의 소스는 인터넷 익스플로러를 위해 수정된 소스입니다.
빨간 부분이 기존 소스에서 수정된 부분입니다.
이 소스도 친절하게 올려드릴게요^^

<html>
<head>
<style type="text/css" >
body{ text-align:center; }
#wrapper {
    width:500px;
    margin : 0 auto ;
    border:1px solid #000;
    text-align:left;
}
</style>
</head>

<body>
    <div id="wrapper">
        가운데 정렬 되었습니까?
    </div>
</body>
</html>


test - 복사본.html



그러면 위의 소스를 실행해 볼까요?
짜잔!



잘 보셨나요?
아래의 링크를 통해 두 번째 방법에 대해서 보실 수 있습니다.

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C#] DataGridView 쉽게 사용하기 - DataGridView컨트롤에 데이터를 삽입하는 예제 소스  (18) 2011.05.22
[C#] C#에서 MS Access DB접속 방법  (0) 2011.05.20
[JSP] Jakarta POI를 이용해서 엑셀(Excel)파일 다루는 방법  (2) 2011.05.16
[자바스크립트] 즐겨찾기 소스  (0) 2011.05.14
[HTML] HTML 가운데 정렬 가장 쉽고 한번에 하는 방법2  (1) 2011.04.14
[C언어] 가장 간단한 C언어 예제를 통해 함수라는 녀석을 알아보자.  (0) 2011.04.06
[C#] 전체 파일 경로에서 디렉토리 경로만 분리해 내는 가장 쉬운 방법  (0) 2011.03.23
C언어를 배우기 위해 프로그램을 설치해보자  (0) 2011.02.17
쿠키(Cookie)란?  (0) 2011.02.16
프로그래밍은 왜 배우나요? 속 시원히 알려드립니다  (4) 2011.02.13
공유하기 링크
댓글