요소 부유화

1. 요소의 부유화 유동 효과  (floating)

  ※ 원래, 유동화된 요소(사진 등) 주위로 텍스트들을 둘러 표현되도록 하기 위해 고안됨

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

     * 기본적으로,  
        . float되는 요소는, 자동으로 `display:block`으로 설정되고,
        . 블록 수준의 요소(block 요소)를 만날 때까지 위로 이동하고,
        . 그 뒤의 요소들(텍스트)은 float된 요소 옆으로 늘어서게 됨         

     * 자식 요소에 float 적용 시, 주의할 점
        . float를 갖는 자식 요소가 있을 경우, 
        . 부모 요소는 자식 요소를 인식하지 못함
        . 따라서, 부모 요소에게 overflow:auto 또는 overflow:hidden 을 주어야,
        . 부모 요소가 float를 갖는 자식 요소를 제대로 인식 가능 함

  ㅇ 부유화된 요소의 좌우 비우기    { clear : 값; }
     * 이때, 주위 텍스트들이 비워지고 빈 공간이 생김
     - clear : left, right, both, none
        . left   : float된 요소의 왼쪽을 비우기
        . right  : float된 요소의 오른쪽을 비우기
        . both   : float된 요소의 양쪽 모두를 비우기


2. 요소들을 수직으로 쌓기    { z-index : 값; }

  ㅇ z 축을 따라 요소들을 수직으로 쌓는 순서 지정
     - 값 범위 : auto(디폴트), 양수, 음수  (값이 클수록 위로 쌓임)
     - 만일, z-index 값이 미지정이면, 
        . 웹문서에 나나타는 순서대로(내림차순) 값이 자동 (auto) 결정됨
     - 단, position 속성이,
        . static(디폴트)가 아닌, relative,absolute 일 때 만 작동됨
        . 따라서, 그냥 z-index 값 만을 주면 안되고, position:relative 등을 일부러 설정해야함