Div 등의 레이어 겹침 - div가 겹치지 않게 하려면 float를 쓴다.

본문 바로가기

CSS Div 등의 레이어 겹침 - div가 겹치지 않게 하려면 float를 쓴다.

페이지 정보

작성자 키스세븐 댓글 0건 조회 19회 작성일 18-09-25 16:58

본문

[Div 등의 레이어 겹침 - div가 겹치지 않게 하려면 float를 쓴다.]



div가 겹치지 않게 하려면


사이트를 제작하다 보면 레이어가 겹치는 경우가 있습니다. 여기서 레이어란 Div나 Ul, Span 등을 말합니다.

원래 div는 겹치지 않는 것이 원칙입니다. 기본적으로 두 개 이상의 div를 사용한다면 자동으로 다음 줄로 내려와서 생성되어야 맞는 것입니다.


그런데 가끔은 원하지 않게 겹쳐서 나타날 때가 있습니다. 이것은 float의 문제로 생각할 수 있습니다. 

이렇게 div등의 레이어 겹침이 일어났을 때 div가 겹치지 않게 하려면 float를 동일하게 사용해야 합니다.


예를 들어, 왼쪽처럼 아래 위치로 표시되길 원하는데 오른쪽처럼 두 개의 div가 겹쳐서 나타나는 것입니다. (노란색 부분)


 



Div 등의 레이어 겹침 문제 해결하기


div 겹침 문제가 생기면 추가하려는 div의 앞 쪽에서 만든 div의 CSS 코드를 살펴봐야 합니다. 

예를 들어, 앞에 생성된 div의 float가 left인데 새로 생성한 div에 float 정보가 하나도 없다면 위와 같은 겹침 현상이 일어나곤 합니다. div가 겹치지 않게 하려면 새 div의 float도 left로 똑 같게 해 줘야 합니다. 


#before_div {float:left;} 면

#new_div {float:left;} 로 조정

그러나 반드시 left로만 설정할 필요는 없고 "float를 동등하게 적용해줘야 해결된다"고 생각하는 것이 맞습니다.


그리고 한 가지 더....

CSS에서 position 설정을 absolute, relative 등으로 하는 바람에 div 레이어 겹침 현상이 발생하는 경우도 있습니다. 이럴 때 div가 겹치지 않게 하려면 absolute, relative 등을 바꿔가면서 실험해야 합니다.


div 겹침 현상은 한 가지 원인이 아니라 여러 가지 복합된 원인이 있을 수도 있습니다. 그러므로 이것저것 해 봐서 진짜 원인을 찾는 것이 가장 중요하겠습니다.

추천0
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Copyright © 1997-. 키스세븐 www.kiss7.kr All rights reserved.