UL 태크 삽입 시 상단의 여백 생기는 문제

html 태그 및 css로 UI 작업을 하다보면 도저히 이해할 수 없는

 

버그들이 종종 발생한다.

 

이번의 UL 태그 관련 버그도 그런 부류 중 하나였는데,

 

갖은 삽질 끝에 해결할 수 있었다.

 

상황은 이러하다.

 

큰 div 개체 안에 다른 div 개체를 넣고 그 밑에 ul 개체를 삽입하였을 경우,

 

즉, div A 개체 안에 div B 개체와 ul 개체가 삽입되어 있는 상황인 것이다.

 

그때 예기치 않게 div B 개체와 ul 개체 사이에 공백이 생겨버렸다.

 

비슷한 경우로, li 개체 안에 ul 개체를 삽입하였을 경우도 이런 문제가 발생하였다.

 

의외로 이 문제는 간단하게 해결되었는데,

 

ul 개체의 css에 float: left 속성만 추가시켜주니 해결이 되었다.

 

내 생각에는 ul 개체는 원래 어떤 개체(이하 A개체) 밑에 속할 때

 

자동으로 여백이 생성이 되는데 float: left 속성을 줌으로써 A개체 좌측에

 

강제로 배치되게 되고, width가 지정되어 있으면서 A개체 좌측에 공간이 없는

 

경우에는 A개체 아래로 흐르게 되는 것이다.

( float 속성 사용 시 흐른다는 말이 어울리는 듯해서 사용해봅니다 ^^)

 

그러나 이건 어디까지나 내 생각일 뿐, 근거는 없다.

 

역시 개발은 삽질을 동반할 수 밖에 없는 것인가.. ㅠ_ㅠ