레이아웃 가운데 정렬하기
화면상에 보여지는 레이아웃 전체를 화면의 가운데에 오도록 해봅니다.
사용자의 화면 해상도는 다양하게 존재할 것입니다.
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를 넣어 주시면 원하는 결과물을 얻어 낼 수 있습니다.
쭈뱀2014.07.25