웹표준가이드(6)/css 레이아웃기초

출처 : http://blog.naver.com/maglitt/60053037339

CSS 레이아웃이란?

 

1.그리드가 아닌 구성요소의 집합                                  

웹페이지를 그리드로 바라보고 접근한 것

 

 

(좌측)과 구성요소로 구분하여 접근한 측면(우측)

 

 

 

 

 

2.레이아웃에 사용되는 두가지 속성 position 과 float

 

div 속성의 비교 

레이아웃속성	positon	float
기본속성	static, absoulte, relative	left, right, none
속성내용	static : 기본값 absolute : 화면값에 영향을  주지 않고 위치지정 가능 (layer라고 부른다.) relative : static과 비슷,  offset 지정가능,  하위엘리먼트의 기준	left : 엘리먼트 왼쪽배치 right : 오른족 배치 none : float하지 않음

 

보통 position, float를 어디에 사용할지는 꼭 구분된것은 아니지만

• position: 자유로운 위치선정, 블럭의  크기가 크게 유동적이지 않을 때 사용
• float: postion에 비해 위치선정이 자유롭지는 않지만 블럭의 높이조절이 유동적이다.

라는 점을 고려하여 선택사용한다.

[출처] 웹표준가이드(6)/css 레이아웃기초|작성자 마그리뜨