CSS 레이아웃 기법은 1.포지션 ,2.플로팅, 3.마진 다루기 이렇게 크게 세 가지 개념으로 구성됩니다.

핵심 개념을 이해한다면 여러 가지 다양한 기법들은 그렇게 큰 차이가 없다는 걸 알게 되고 여러분 자신만의 방법으로 그리 어렵지 않게 직접 레이아웃을 만들 수 있습니다.

디자인 가로 중간에 배치하기

큰 모니터가 널리 보급되면서 화면 가독성을 위해 근래 계발된 사이트 대부분은 화면 중간 배치를 하고 있습니다.

중간 배치하는 디자인 크게 두가지가 있습니다.

하나는 auto마진을 이용하 방법이고 하나는 포지션과 마진에 음수값을 지정하는 방법입니다.

auto마진 이용 방법

전체를 감싸는 div가 수평 중앙에 오도록 하는 전형적인 레이아웃을 만들어 보겠습니다.

포지셔닝과 음수 마진값 이용 방법

auto마진 방법을 가장 많이 사용하지만, 이 방법은 인터넷 익스플로러 문제를 해결하기 위한 핵을 불가피하게 써야하는

경우가 발생하기도 합니다. 또한 두 개의 엘리먼트에 스타일을 적용해야 하기도 합니다. 이런 이유로 이 방법 대신

포지션과 음수 마진갑을 이용해 중간 배치를 하기도 합니다.

너비 폭을 지정하고, position 속성값을 relative로 지정합니다. 그리고 left 속성에 50%를 지정하면 왼쪽 끝에서 중간으로 오게 됩니다.

하지만 레페의 왼쪽 끝을 페이지 중간에 놓으려는 게 아니라 래퍼의 중간 점이 페이지 가운데로 오게 해야겠죠. 이를 위해서 래퍼의 왼쪽 면에 래퍼 너비 반으로 나눈 길이를 음수값 마진으로 적용하면 됩니다. 이렇게 정가운데 지점이 화면의 중간에 오게 됩니다.