페이지 레이아웃을 만들때 많이 사용하는 css속성은 float 입니다.

이것은 요소를 외쪽으로 붙일지 오른쪽으로 붙일지 결정하는 역할을 하는 속성입니다. 예를들어 아래 그림과 같이 글 본문에서 사진을 왼쪽이나 오른쪽으로 붙일 때 사용하는 것입니다.


좀 더 응용을 한다면 가로로 나열되는 레이아웃도 만들 수 있습니다. 메뉴가 가로로 나열된 네비게이션 같은 예를 들 수 있겠습니다.

기본적인 사용법은 아래 소스와 같습니다.

- html

<div class="example">

<div>box</div>

<p>

우리 어디가고 싶어요? 저는....... 천국에 가고 싶어요.

남자는 여자의 물음에 잠시 생각하곤 말했다. 오후 세시, 카페 구석에서 남자는 여자를 바라본다. 대학 첫 학기가 마무리 되어 갈 무렵, 남자는 여자가 손짓하던 기독교 동아리에 나가기 시작했다.

</p>

</div>

- css

.example > div {

float: left;

width: 100px;

height: 100px;

background: #4fa732;

margin-right: 15px;

}

물론 float: right로 고치면 박스가 오른쪽에서 표시될것입니다.
이런것들을 활용하면 다양한 형태로 사용되니 참고하세요~