CSS 위치 레이아웃

(2019-01-24)

CSS position, CSS float, CSS clear

1. CSS에 의한, 태그 배치(positioning) 및 레이아웃(layout) 관련 속성

  ㅇ 박스 위치 제어 : position, left/right/top/bottom
  ㅇ 박스의 유형 제어 : display       ☞ CSS display 참조
  ㅇ 박스의 유동 배치 : float
  ㅇ 수직으로 쌓기 제어 : z-index
  ㅇ 보이기/숨김 제어 : visibility
  ㅇ 박스 밖 자를지 여부 : overflow   ☞ CSS 박스 모델 참조


2. CSS 속성 값  [ 위치 지정 ]

  ㅇ 기준 위치 지정                    : { position : 값; }
     - position : static, relative, absolute, fixed
        . static   : 기본 위치 (디폴트 무 설정과 같음)
        . relative : 기본 위치로부터 위치 지정 타입
        . absolute : 부모 요소 또는 문서 내 절대 위치
           .. 위치지정 타입(relative)이 설정된 부모 요소로부터 상대적 위치 지정
           .. 부모 박스(relative) 내 포함된 자식 박스의 위치 지정(absolute)에 유용함
           .. 다른 요소들의 위에 고정되어 보임
           .. 즉, 주변 요소의 사라짐/나타남 등의 효과를 주는 경우에도, 
                  그 위치 그대로 고정되어 존속시켜 보임
        . fixed    : 웹브라우저 창 기준으로 위치 지정 (스크롤 때도 위치 고정)

  ㅇ 실제 위치 지정                    : { top/bottom/right/left : 값; }
     - top    : 상단으로부터 위치
     - bottom : 하단으로부터 위치
     - right  : 우측단으로부터 위치
     - left   : 좌측단으로부터 위치


3. CSS 속성 값  [ 부유화 유동 효과 ]

  ㅇ 요소 부유화                       : { float : 값; }
     - float : left, right, none
        . left   : 해당 요소를 왼쪽으로 띄워 이동시키기
        . right  : 해당 요소를 오른쪽으로 띄워 이동시키기 
        . none   : float된 요소의 해당 속성 삭제

  ㅇ 부유화된 요소의 좌우 비우기       : { clear : 값; }
     - clear : left, right, both, none
        . left   : float된 요소의 왼쪽을 비우기
        . right  : float된 요소의 오른쪽을 비우기
        . both   : float된 요소의 양쪽 모두를 비우기

  ㅇ 요소 수직으로 쌓기                : { z-index : 값; }
     - z 축을 따라 요소들을 수직으로 쌓는 순서 지정 (값이 글수록 위로 쌓임)
        . 만일, z-index 값이 미지정이면, 웹문서에 나나타는 순서대로 값이 자동 결정됨
     - position 속성이 relative,absolute 일 때 만 작동됨


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 값 6. CSS 배경 7. CSS 색상 8. CSS 위치 레이아웃 9. CSS 정렬 10. CSS 텍스트

 
        최근수정     요약목록     참고문헌