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 등을 일부러 설정해야함