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

CSS 레이아웃이란?

 

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

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

 

 

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

 

 

 

 

 

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

 

div 속성의 비교 

 레이아웃속성positon float 
 기본속성

static, absoulte, relative

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

 

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

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

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


+ Recent posts