블로그 보관함

2014년 2월 25일 화요일

CSS를 이용한 elements 배치

1. 공중부양

  - 웹 브라우저는 HTML에 작성된 순서대로 왼쪽에서 오른쪽으로 배치한다. 끝을 만날 때까지.
  - 위에서 아래로 배치한다.
  - float : left/right => 출력순서에 상관없이 왼쪽 혹은 오른쪽에서 시작한다.
  - 출력될 위치에서 공중 부양 후 좌우로만 이동 가능 (c007-1.html 참고)
  - clear 속성
      => 공중 부양으로 점유된 공간을 피하라는 명령어
 

2. 절대 좌표 지정

  - 절대 좌표로 위치를 관리하는 부모 엘리먼트를 기준으로 자식 엘리먼트의 위치를 설정
  - 부모가 절대 좌표로 위치를 관리하지 않는다면, body 엘리먼트를 기준으로 자식 엘리먼트의 위치 설정
  ; position : absolute;
  - 위치 설정 : left, right, top, bottom 속성으로 설정한다.
  - absolute 일 경우 너비 높이를 지정해야 한다.

3. 상대 좌표 지정

  - 원래 출력해야 할 위치에서 자리이동
  ; position : relative;
  - 현재 위치에서 좌/우, 상/하로 이동

4. 웹 브라우저에 고정 

  - 웹 브라우저의 내용 창을 기준으로 엘리먼트의 위치 설정
  - 내용을 스크롤 하더라도 엘리먼트는 계속 그 위치를 고수한다.
  ; position : fixed;

댓글 없음:

댓글 쓰기