|
background가 사라지는 것이 아니라 height가 0이 되어버려서 그렇습니다.
어떤 엘리먼트의 height는 특별히 지정해주지 않는다면 그 안에 들어있는 다른 엘리먼트들의 height값에 좌우됩니다.
정확히 말하자면,
<div id="a">
<div id="b">
</div>
</div>
이런 구조가 있다고 할 때, a의 높이는 따로 지정해주지 않는다면,
"a의 하부구조(여기서는 b)들이 차지하고 있는 영역의 높이" + "a의 padding값"에 의해 결정됩니다.
이에 따르면 a의 padding값이 없고 b의 높이도 0일 경우, a도 0 이 되어버리죠.
일반적인 경우라면 이렇게 자동으로 height를 계산해서 렌더링하는 것이 편리합니다만,
문제는 float을 쓸 경우.
float은 해당 엘리먼트를 "띄웁니다.(floating)"
다른 엘리먼트의 영역과 충돌하지 않도록이요.
그래서 해당 엘리먼트가 차지하는 영역의 높이가 0이 되어버리죠.
말씀하신 경우에서는 p가 차지하고 있는 영역의 높이가 0이 되어버려서 바깥을 싸고 있는 aa의 높이도 0이 되어버린 경우입니다. 확인해보기 위해서는 aa에 border:1px solid #F00; 처럼 경계선을 주어보시면 금방 이해하실 수 있을 겁니다.
해결책은 세가지 정도입니다.
하 나는, float:left;대신 display:inline을 쓰는 것입니다. 이 속성은 block레벨의 엘리먼트를 inline레벨의 엘리먼트(쉽게 말하자면 글자 한개 표시하는 것처럼 display되는 레벨)로 표현해줍니다. 단지 보여주는게 문자그대로 "p1 p2 p3" 정도라면 이정도면 충분.
또 한가지 방법은 aa에 적절한 height값을 주는 것입니다. 안에 표현될 내용이 정해져 있어서 높이를 미리 알 수 있다면 이 방법이 가장 간단하겠죠.
마 지막 방법은 안에 들어갈 내용이 어느 정도가 될지 알 수 없을 때에 쓰입니다. 바로 마지막에 빈 엘리먼트를 하나 추가하는 방법입니다. 핵심은 앞에서 float지시된 것을 clear해버리면 원래 정상적인 위치에 빈 엘리먼트가 출력되게 되고, 상위의 엘리먼트는 그것을 참조로 높이를 계산해낼 수 있습니다.
| [HTML]
<style> </style> <body>
[/HTML] |
마지막 방법은 양날의 검입니다. 문서 구조와는 상관없이 디자인만을 위해 쓰인 div가 되버릴 수 있기 때문입니다.
여담이지만, 개인적으로는 이 때 발생하는 양심의 가책(아~ 나는 구조화에 역행하고 있어~~~ T_T)을 피하기 위해, 대개의 Region단위의 블록들에는 header와 footer를 사용하지 않아도 붙여주고 있습니다.
[HTML]<div class="article">
<div class="header">
</div>
<div class="body">
어쩌구 저쩌구 내용나오는 곳...
</div>
<div class="footer">
</div>
</div>[/HTML]
이 런 식으로 코딩해놓으면 나중에 디자인 변경할 때에도 CSS만 바꿔주면 되니까 훨씬 편하고, 또 이미지 보더라든가, 이미지 박스등을 사용하기에도 용이하고, 또 진짜로 나중에 header에 들어갈 내용("최근 기사"라는 타이틀이 붙거나...)과 footer에 들어갈 내용("전체기사보기" 버튼이 들어간다거나...)이 생겨도 문서구조를 바꾸지 않아도 되므로 애용중입니다. (에에... 실은 그저 빈 div쓴다고 말하기 민망해서 가져다 대는 핑계입니다.)
마지막으로,
<p>는 "문단"을 표현하기 위해 사용하는 태그입니다. 일부러 "문단"을 줄구분없이 횡으로 붙여 쓸 이유가 있나요? ("다단 보기"를 위해서라면 가능) p1, p2라는 것만으로는 어떤 목적으로 <p>를 쓰셨는지 모르겠지만, 이런 용도라면 <div>쪽이 더 적절하지 않은가... 그리고 만약 "문단"이 아닌 "단어"수준의 내용이라면 아예 <span>을 쓰고 float같은 것에 신경쓰지 않는 것이 바람직하지 않은가 생각해봅니다.
'Programming > Web' 카테고리의 다른 글
| [HTML5] 옵션 patten (0) | 2012.08.01 |
|---|---|
| [html5] Visual Cheat Sheet (1) | 2012.07.31 |
| <label> 태그 용도 (0) | 2012.07.25 |
| HTML Color Codes (0) | 2012.07.11 |
| HTML escape 이스케이프 문자 (0) | 2012.02.15 |
댓글