css style 적용시 id에 배경색이 지정이 안될때 주의점

어떨때 id 에 배경을 주면 배경색이 지정이 안될때가 있습니다.

스타일을 지정할때는 앞뒤 안보고 막 지정을 하다보니 그냥 넘어가곤 했는데요. 이유를 찾아봤더니 다 이유가 있더군요.ㅎㅎㅎ

무슨말이냐???

예를들어 아래와 같이 마크업을 했을경우.


<div id="test1">
	<ul id="n1">
	...
	</ul>
	<ul id="n2">
	...
	</ul>
	<ul id="n3">
	...
	</ul>
</div>

이럴경우 일반적으로 ul 은 float 로 가로 정렬을 합니다.
test 에 배경색을 지정할때 float 된 ul 만을 가지고 있을경우 높이가 0 이기 때문에 배경색이 적용이 안된것처럼 보입니다.

이럴경우 overflow로 해결을 해야합니다. 즉 예를들면 아래와 같습니다.

#test1{
  background:#ddd;
  overflow:auto;
}

위와같이 하면 배경색이 지정이 되는것을 볼수 있습니다.

물론 다른 방법으로 해결을 할수도 있지만 overflow:auto 로 해결을 하는것이 가장 좋은 방법으로 나와 있습니다.

실전 웹표준 가이드 2005

저도 어쩔때 이걸 모르고 왜 배경색이 지정이 안되지하고 의문이 들때가 있었습니다.

참고링크

demun(대문블로그)