웹표준과 접근성 6일차.

position_example.zip

*** DIV 레이아웃 ***

* div 가운데 정렬
1. margin : 박스의 바깥쪽 여백
2. margin:auto - 위/아래쪽은 여백이 없고 좌/우 여백을 동일하게



* float
1. 층을 나누다. (1.5층)
2. 전체 행에서 오브젝트의 길이를 제외한 부분에 다른 오브젝트가 오는 것을 허용
3. float을 적용한 div 이후에 작성된 div들에 영향 있음
4. left, right

* clear
1. float 속성 해제
2. left, right, both(left, right 상관없이)



** position **
1. div 요소를 원하는 위치에 구성
2. 움직이는 방법에 대한 정의 - 어떻게 움직여라 방법의 제시
3. z-index, left, top 등의 위치 속성과 같이 사용
4. 위치 속성값에는 음수(-) 사용 가능


* 속성값 종류
1. static
   - position 속성의 기본값
   - 모든 div를 같은 층(레이어)에 위치시키고
      태그 작성 순서대로 document 에 배치
   - 이동 및 레이어 변경 불가

2. absolute
   - 모든 div의 기준점을 동일하게
   - 종속되지 않은 경우 : document의 좌측상단
      종속된 경우
        - 부모요소에 position 속성이 있는 경우 : 부모의 좌측상단
        - 부모요소에 position 속성이 없는 경우 : document의 좌측상단

   - 다른 요소에 영향 없음
   - z-index 사용 가능

3. relative ( static + absolute )
   - static 처럼 태그 작성 순서대로 화면에 배치
   - 처음 위치된 곳을 기준으로 이동
      (div 마다 기준점이 다름)

   - 다른 요소에 영향 있음

4. fixed ( static + absolute + relative )
   - 화면상에 처음 위치된 곳에 스크롤에 상관없이 고정