타쿠꺼
★★★★★display & position , float & clear 본문
- html의 기본 넓이값은 화면의 100%이다.
- 모든 요소는 자신보다 앞에 있는 형제 공간요소의 흐름에 영향을 받는다(형제의 자식에겐 안 받음). static이건, relative건, absolute건, fixed건, float이건 위치값인 top과 left가 특정지어지지 않는다면 자신의 앞에 있는 공간요소의 흐름에 영향을 받아 배치된다.
- 위치의 기준점인 top: 0, left: 0은 static이 아닌 가장 가까운 부모요소의 왼쪽 상단이 기준점이다.
- 요소의 크기값이 정해지지 않으면 자신이 담고있는 내용물(텍스트, 자식요소 등)의 공간값에 의해 크기값이 결정된다. 즉 내용물이 position: absolute, fixed; float이면 크기값에 반영되지 않는다.
- 텍스트는 inline 요소이다.
- 화면에 표시될 수 있는 공간의 넓이가 부모크기를 넘치면 개행된다. (inline, float, clear로 float과 상호작용하는 relative-block 요소들)
position: static
- 기본값이다.
- 공간을 부여해주며 이 공간값을 기준으로 형제 요소들이 흐른다.
- 위치를 지정할 수 없다.
- z-index를 지정할 수 없다.
position: relative;
- 위치를 지정할 수 있다.
- z-index를 지정할 수 있다.
- 공간을 부여해준다.
position: absolute;
- 위치값을 지정할 수 있다.
- z-index를 지정할 수 있다.
- 공간이 없다.(본인 공간이 없기 때문에 이후의 형제요소들에 대한 공간영향력을 행사하지 않는다.)
position: fixed;
- 위치값을 지정할 수 있다.
- 위치의 기준점이 window이기 때문에 항상 화면에 보여지며 화면에 고정되어있다.
- z-index를 지정할 수 있다.
- 본인 공간이 없다.
display: inline;
- 요소의 흐름에 따라 배치된다.
- 크기를 지정할 수 없다.
display: block;
- 요소의 크기를 지정할 수 있다.
- 요소의 크기만큼 공간을 갖는다.
- position: static, relative이면 횡 공간값의 기본값은 부모의 100%이다.
- position: absolute, fixed이면 공간이 없어진다.
display: inline-block;
- inline요소와 block요소의 결합으로, 요소의 흐름에 따라 배치되지만 크기값이 특정지어질 수 있다.
- 크기값이 곧 공간값이다.
float
- float은 float된 형제 요소들과 inline 요소에게 공간력을 행사한다.
- inline 요소가 float 요소 사이에 껴있으면, float된 마지막 요소 다음에야 배치된다.
- float요소 앞에 relative 블록요소가 있으면 역시 공간의 영향을 받는다.
clear
- float 요소의 뒤에 있는 position: relative; display: block; 요소들은 앞의 float의 공간력을 행사받지 않으므로 앞의 float에 상관없이 배치된다.
- 그런데 clear 속성이 적용되어 있으면, 앞의 float의 공간력에 영향을 받게 된다.
- 그러면 공간의 크기가 100%여야 하는 이 relative-block 요소들은 float의 공간력에 영향을 받게 되어 개행을 하게 된다.
'CSS > Study' 카테고리의 다른 글
스크롤바의 크기 (0) | 2016.07.04 |
---|---|
border로 삼각형 만들기 (0) | 2016.07.02 |
text-shadow로 blur효과 내기 (0) | 2016.06.19 |
block엘리먼트의 position에 따른 디폴트 크기값 (0) | 2016.06.07 |
인라인 블록들 간의 빈 공간 해결법 (0) | 2016.05.31 |