[ CSS ] float, clear

하루입니다.

 

 

---

 

 

CSS의 float, clear, both.

 

float

• 원래 용도 : HTML요소를 주변의 다른 HTML 요소와 자연스럽개 어울리도록 만들어주는 속성이다. 엘리먼트가 floating되면 다른 엘리먼트는 floating된 엘리먼트 아래로 들어오게 된다. floating된 엘리먼트 아래로 들어온 엘리먼트의 켄텐츠는 floating된 엘리먼트를 피해서 화면에 표시된다.

그런데 만약. 여기서 float의 영향을 받지 않게하고픈 엘리먼트가 있다면?

 

그럴 때 clear를 사용한다.

 

 

 

 

여기서 밑 줄을 사진 밑으로 내리고 싶다.

<p style="clear:both;">이 내용은 이미지와 아무 상관없는 내용입니다.</p>

 

 

 

float를 피해 밑으로 내려갔다! 만세!

 

 

---

 

 

하지만 float는 이런 것보다는 다른 부분에 더 사용된다. 그게 머냐? 레이아웃.

 

  main 위에 좌측메뉴, 중앙컨텐츠, 우측배너를 띄웠다. 중앙컨텐츠 위에는 .box들을 띄웠다. 엥 그런데. 얘들은 수가 늘어나니까 넘치려고 하는데요? 그럴 때 overflow를 사용한다.

 

• float 속성이 적용된 HTML 요소가 자신을 포함하고 있는 부모 요소보다 크면, HTML 요소가 부모 요소 밖으로 흘러넘치게 된다. overflow:auto; 로 설정하면 부모요소의 크기가 자동으로 자식요소를 감쌀 수 있을 만큼 커진다.

 

배너는 이미지에 타 사이트 링크를 링크하는 방식으로 만들었다. 비록 꽃 사진을 누르면 구글로 가는 아주 귀여운 배너지만 ... 뿌듯하다.

 

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!