이 사이트는 CSS3를 포함하고 있으며, 반응형(Responsive)으로 구성되어져 있습니다.

최적화된 화면은 IE10(익스플로러10) 이상 , 표준 브라우저(Chrome, Firfox, Safari 등)를 이용해 주시기 바랍니다.

X

HTML/CSS

XHTML

레이아웃 가운데 정렬하기

WEBSP2012.02.20 14:27

조회 : 4,210

레이아웃 가운데 정렬하기

화면상에 보여지는 레이아웃 전체를 화면의 가운데에 오도록 해봅니다.
사용자의 화면 해상도는 다양하게 존재할 것입니다.
1024 * 768 / 1280 * 1024 등의 다양한 화면이 있을텐데,
단순히 Margin-left 속성 만을 사용하여 적용한다면 똑같은 레이아웃이 아닌
조금씩 다른 형태의 레이아웃을 보게 될 것입니다.

레이아웃이 가운데 올 수 있도록 하기 위한 조건
레이아웃의 사이즈가 고정 되어야 합니다.

CSS 속성에서 Body 에 Text-align: center; 를 적용해서 레이아웃이 가운데 오는지 확인해 보세요!

확인 하신 브라우저는 무엇인가요?

Body 에 Text-align: center 를 적용하였을때 가운데 오게 되는 브라우저도 있지만,
그렇지 않은 브라우저도 있습니다.

만약, ID가 Wrap인 DIV의 넓이가 width: 800px; 일때


이렇게 적용을 하게된다면...

모든 브라우저에서 가운데에 정렬된 레이아웃을 확인 하실 수 있을 것입니다.
Margin: 0 auto 상단 값은 초기화된 값 0 을 적용하며 auto 좌우 배치 값의 위치를
넓이의 사이즈를 기준으로 좌우의 값을 자동 설정하게 되어 가운데로 오게 됩니다.
Body 에 Text-align: center; 를 주었기 때문에 모든 화면에 보여지는 엘리먼트의 정렬은 가운데로 오게 됩니다.
변형된 엘리먼트의 기본 값을 다시 좌측으로 바꾸기 위해서는 가운데로 정렬된 레이아웃(#wrap) 속성에
text-align: left를 넣어 주시면 원하는 결과물을 얻어 낼 수 있습니다.

1개의 댓글이 있습니다.

  • 쭈뱀2014.07.25

    정말 오랜만에 들어옵니다.
    2010년도 당시였나.. 군대가기전에 많은거 배웠었는데...
    어느덧 4년이라는시간이 ㅜㅜ

select count(*) as cnt from g4_login where lo_ip = '3.227.254.12'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php