레이아웃에서 가장 중요한 요소 2) overflow

레이아웃에서 가장 중요한 요소 2번째 overflow에 대해 알아보자:)

1. 개념

overflow는 안의 내용물이 정해진 구역을 벗어날 때 어떻게 처리할지를 나타내는 태그지만,

해당 웹문서 안에 독립적인 새로운 문서가 생기게 하기도 한다.(block context model)

2. overflow의 활용

1) float된 자식을 온전히 감싸는 부모 만들기

부모에게 overflow:hidden을 주면 새로운 문서(context)를 만드는 것이기 때문에 이 부모요소 외의 요소들은 float의 영향권에서 벗어날 수 있다.

2) float된 형제와 온전히 떨어뜨리는 요소 만들기

사이드바를 만드는 개념이다.

float된 형제들간에 서로 간섭없이 영역을 나누고자 할 때 사용된다.

float의 영향에서 벗어나고 싶은 형제에게 overflow:hidden을 주면 새로은 컨텍스트가 형성되어 간섭이 사라진다.

3) 부모자식간 상하단 마짐겹침현상 해결하기

부모요소에 overflow:hidden을 주어 마진겹침현상의 적용원리인 아무요소 없는 상태를 제거해준다.

자세한 내용은 마진겹침현상 페이지에서...