배경이 나오지 않는 레이어 과연 그 이유는??

발췌  : KIPA 작성 웹표준 지침

 

 

 

 

 

 

<div id="articles">

    <ul id="notice">

    ...

    </ul>

    <ul id="news">

    ...

    </ul>

    <ul id="stats">

    ...

    </ul>

</div>

 

article 은 세개의 하위 리스트를 포함하는 블록이고 하위의 ul은 모두 float를 사용하여 가로로 배치되어 있다. 이때에 상위 블록인 #articles에 background속성으로 색을 지정해 주면 색이 나타나지 않는 것을 알 수 있다. float된 ul들은 화면상에서 공간을 차지 하지 않기 때문에 #articles가 float된 ul만을 하위에 가지고 있으면 #articles의 높이가 0이 되어서 마치 배경색이 적용이 안되는 것같이 보이게 된다. 이를 해결하기 위해 과거에는 새로운 엘리먼트를 추가하거나 content속성을 이용하는 등 여러가지 방법이 있었지만 지금은 overflow 속성을 이용해는 방법이 가장 좋은 방법으로 여겨지고 있다.

#articles {

    width: 700px;

    margin: 20px auto;

    background: #ddd;

    overflow: auto;

}

위와 같이 상위 엘리먼트에 overflow에 auto값을 주게 되면 원하는 배경색이 나오는 것을 볼 수 있다.