[div 겹침 문제 해결 방법 - DIV의 float 사용 문제라면 clear로 해결]
90년대와 2천년대에는 사이트 디자인을 거의 테이블로 했지만, 최근의 홈페이지는 반응형도 염두에 두어야 하고 속도 문제도 있기 때문에 테이블 구조로 짜는 경우가 거의 없습니다.
그래서 최근의 사이트는 대부분 DIV로 디자인 배치가 작성됩니다. 그러다보면 div 겹침 문제가 일어나서 골치가 아픈 경우가 있습니다.
Div 겹침 문제 예제 Float 속성
div는 기본적으로 좌우 100%의 너비를 가지고 있고 div를 추가하면 자동으로 아래쪽으로 길이가 길어지게 됩니다.
그 중의 한 가지 문제는, 이것을 옆으로 배치하거나 할 때 float를 사용해서 배치를 하게 되는데, 이 경우에 div 겹침 문제가 종종 발생합니다.
이럴때 div 겹침 해결은 clear를 이용해 보는 것이 좋습니다. div의 속성이 자동으로 상속되는 문제 때문에 일어나는 것이기 때문입니다.
clear에 대한 설명을 하자면, 그 이전의 속성들을 해제시켜 버리는 명령이라고 보면 되겠습니다.
아래의 div 코드를 가지고 예를들어 보겠습니다.
한 줄은 가로 100%의 길이를 가지고 배치되고 그 아래에 50%의 가로 길이를 가진 div들을 옆으로 배치하는 코드 소스입니다.
<HTML 문서 div 겹침 문제 해결 예제 01>
<div class="selltitle">www.kiss7.kr</div>
<div class="sell">내용1</div>
<div class="sell">내용2</div>
<div class="selltitle">지식정보 포털 키스세븐</div>
<div class="sell">내용3</div>
<div class="sell">내용4</div>
<CSS 문서 div 겹침 문제 해결 예제 02>
.selltitle {width:100%; height:20px; margin:10px 0 10px 0;}
.sell {float:left; width:50%; height:100px; border:1px solid #ff9900; margin:0 0 20px 0;}
이렇게 했을 때 다음과 같은 문제가 일어나곤 합니다.
두 번째의 파란 줄은 노란 박스 사이에 있어야 했는데 위로 올라가서 div 겹침 문제가 생긴 것입니다.
Div 겹침 해결 예제 Clear 속성
또 다른 문제 때문에 생길 수도 있겠지만, 만약 float 때문에 생기는 것이라면 div 겹침 해결은 clear로 해결할 수 있습니다.
CSS 문서의 속성에서 selltitle에 clear:both를 추가해 봅시다. 문제를 일으키는 div가 selltitle이니 말입니다.
<CSS 문서 div 겹침 문제 해결 예제 03>
.selltitle {clear:both; width:100%; height:20px; margin:10px 0 10px 0;}
.sell {float:left; width:50%; height:100px; border:1px solid #ff9900; margin:0 0 20px 0;}
이렇게 하고 나면 아래와 같이 제대로 된 모습이 됩니다.
clear:both를 적용한 후에 div가 제 위치를 찾은 것을 볼 수 있습니다.
원인은 다른 클래스에 있던(이 예제에서는 sell)에 있는 float:left가 문제였습니다.
div가 자동으로 행을 바꾸는 것을 막기 위해서 왼쪽으로 붙이도록하는 속성인데, 덕분에 노란 박스들이 옆으로 붙는 것에 성공했습니다. 그러나 그 다음에 오는 div가(이 예제에서는 selltitle)가 그 속성을 그대로 받아오는 바람에 위로 올라가 붙은 것입니다.
이때 div 겹침 해결을 위해 clear:both를 추가하면서 float:left가 해제되어 제대로 된 모습을 하게 된 것입니다.
추가로... 다른 원인 때문에 이렇게 되는 경우가 있는데, <div>로 시작한 후 </div>로 끝내지 않았을 경우도 있습니다. 이때는 <div>와 </div>가 짝이 맞는지 세어보는 것이 최선입니다.
