CSS3 레이아웃 사용법 익히기

1. float 사용법

float : 속성값; left, right, none

특징

float이 선언된 엘레먼트는 왼쪽 또는 오른쪽으로만 위치 할 수 있고, 위아래 불가능

float 이후에 오는 엘리먼트는 그 주변을 채워나간다.

이미지와 텍스트 활용한 레이아웃에서 많이 사용한다.

화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용된다.

2.clear 사용법

float 영향을 받는 엘리먼트를 강제로 취소시킬지 아닐지 해당 방향으로 지정

float를 쓰지 않겠다라고 강제로 float 진영을 무장 해제 시키는 것

clear : 속성값;

left | right | both | none

float와 clear는 사이가 아주 긴말하게 한 쌍으로 적용되며, float가 left로 지정되어 엘리먼트들이 왼쪽으로 정렬되면서 채워나가면 clear 적용 시 left(왼쪽)을 사용해야 한다.

만약 left(왼쪽), right(오른쪽)을 따로 관리하기 싫다면 both(양쪽)을 사용하여 방향에 상관없이 적용해서 편리하게 사용한다.

3.여러개의 열 레이아웃 만들기

화면 설계 단계에서 그룹을 나누어 봅니다.

그룹 중에서 한 행에 여러 개의 열이 있는 경우는 각각을 Box(상자)로 간주하여 float를 지정합니다.

float 다음 줄에 출력할 행은 clear를 지정하여 정상 위치에 표시 합니다.