[CSS] 멀고도 험한 overflow

보통 어떤 레이아웃 디자인을 보고

HTML 마크업을 작성할때, 하드코딩을 하다보면

레이아웃이 깨지는 현상이 있고, 이유를 정확히 모르겠을때에 overflow:auto 혹은 overflow:hidden 으로 해결이 되는 경우가 종종 있다.

오늘 알게 된 것도 이것으로 발생하는 현상인데

필자로선 매우 신기하다.

HTML과 CSS는 여전히 명확하지 못하다. NO CLEAR

div(height지정) > div(no height,overflow:auto) > 안에 height를 초과하는 요소가 들어가면 absolue처럼 독립적으로 작동하는 것이다.

대충 예제코드를 만들어서 적용시켜보겠다.

<div style="height:20px;width:300px;background:#f00;">

<div style="overflow:auto;border:#000 1px solid;">

<div style="width:200px;background:#0f0;">

블라블라블라

레이아웃 안깨뜨리고, 높이를 무시하고 커질수 있다

<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하<br/>하하하

</div>

</div>

</div>

<br/>

<p style="background:#00d;">

안녕하세요 이곳은 재삐신생의 블로그 이빈다.

</p>

적용하면

블라블라블라 레이아웃 안깨뜨리고, 높이를 무시하고 커질수 있다
하하하
하하하
하하하
하하하
하하하
하하하
하하하
하하하
하하하
하하하

안녕하세요 이곳은 재삐신생의 블로그 이빈다.

이것의 포인트는

아래쪽 첫 div요소와 p요소간의 레이아웃을 헤치지 않고

첫 div의 자식요소들이 보여지고 있는 현상이다. 이것은 마치 position:absolute를 시킨 것과도 비슷하다.

overflow:hidden도 마찬가지

메이저 브라우져에서 동일하게 보이는것으로 보아, 정상적인 것으로 보여지나, 뭔가 이상하다.

hover효과시 rolldown되는 메뉴를 만들때, position:absolute를 시켰던 예전 코드를 수정하다가

요소를 바꿨는데 이런현상이 발생하여, 신기한 마음에 한번 적어본다.