티스토리 뷰

IT 이야기/프로그래밍

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

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

HTML 가운데 정렬을 가장 쉽고 한번에 하는 방법 - 두번째


보통 HTML 페이지는 가운데 정렬되어 표시되는 방법이 가장 보기 좋다고 생각합니다.
그래서 저는 가운데 정렬을 애용하는 편이죠.

그런데 막상 페이지 레이아웃을 하려다 보면 인터넷 익스플로러와 파이어폭스, 크롬 등에서
모두 다르게 나타나는 경우가 있어서 한번 정리해 보려 합니다.



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

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

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

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

지난 시간에 첫번째 방법을 설명해 드렸고 이제는 두 번째 방법을 알아보도록 하겠습니다.



 포지셔닝과 마진에 음수값을 지정하자  

먼저 wrapper 엘리먼트에 너비 폭을 지정합니다.
그 다음 position 속성값을 relative로 지정하고 left 속성을 50%로 지정합니다.
이렇게 하면 wrapper의 왼쪽 끝이 페이지의 중간에 오게 됩니다.

그러나 이것이 가운데 정렬은 아니죠.
wrapper의 정 가운데 부분이 페이지 가운데 와야 하니까
래퍼의 왼쪽 면에 너비 폭을 반으로 나눈 길이를 음수값 마진으로 적용하면 됩니다.

이렇게 하면 wrapper의 정가운데 지점이 화면의 중간에 오게 되는 것이지요.

<html>
<head>
<style type="text/css" >
#wrapper {
    width:720px;
    position : relative;
    left: 50%;
    margin-left: -360px;
    border:1px solid #000;
}
</style>
</head>

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

test2.html


위 소스를 실행하면
아래와 같이 가운데 정렬된 페이지를 보실 수 있게 됩니다.




이상으로 HTML 페이지를 가운데 정렬하는 두 가지 방법에 대해서 소개를 했습니다.
이 중에서 자신에게 잘 맞는 방법을 선택해서 사용하면 되겠네요^^


아래의 내용을 보기 전에 이전의 내용을 안보셨다면 아래를 클릭해 주세요.

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

[C#] 무료 기술 서적 - Inside C# (한글 번역본) 다운로드  (1) 2011.05.31
[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 가운데 정렬 가장 쉽고 한번에 하는 방법1  (6) 2011.04.14
[C언어] 가장 간단한 C언어 예제를 통해 함수라는 녀석을 알아보자.  (0) 2011.04.06
[C#] 전체 파일 경로에서 디렉토리 경로만 분리해 내는 가장 쉬운 방법  (0) 2011.03.23
C언어를 배우기 위해 프로그램을 설치해보자  (0) 2011.02.17
쿠키(Cookie)란?  (0) 2011.02.16
공유하기 링크
댓글