오늘 방문자님이 이곳(http://martian36.tistory.com/789)의 글을 보고 연습하시면서 다른 속성을 적용했는데 안되는 것을 보고 질문을 주셔서 답변해드립니다.
Project_(4).zip
현재 문제가 되고 있는 부분이 메뉴바의 ul 태그 부분인데요. padding:10px 0;으로 되어있어서 상하 패딩만 적용했습니다. 방문자님의 경우 패딩을 적용하지 않고 마진을 적용하면 같은 결과가 나오지 않을까해서 마진을 입력해보았더니 적용이 안돼서 왜 그런 것인가 의문을 가진 것이었습니다.
웹표준에 의하면 CSS에서 상하 마진의 경우 함몰(Collapse)되는 경우가 있습니다. 위의 경우가 바로 여기의 예에 해당합니다.
실제로 상하 마진을 적용하면 부모요소와의 관계에서는 함몰되지만 마진이 없어지는 것은 아니라서 하단 마진의 경우 부모요소를 벗어나서 적용되고 상단 마진은 그대로 나타나서 "메뉴바 만들기"라는 글자가 있는 요소와 마진이 존재합니다. 마진의 함몰은 좌우로 배치돼있는 content1과 content2의 경우는 발생하지 않습니다. 이 둘의 박스가 상하로 있는 경우는 아래와 같이 어느 한쪽의 마진만 적용되므로 다른 한쪽은 함몰된 것입니다.
그런데 위처럼 두개의 요소가 상하로 있는 경우는 어느 한쪽의 요소의 마진이 함몰되지만 아래처럼 좌우로 반복하다가 아래로 내려가는 경우는 다릅니다.
각각의 요소의 마진이 적용돼서 나타납니다.
이러한 의도되지 않은 마진의 함몰을 방지하려면 여러가지 방법이 있습니다.
상황에 따라서 부모 요소에 overflow:auto;를 적용하거나, 보더나 패딩을 위와 같이 적용하면 됩니다. 하지만 가장 간단한 방법이 메뉴바인 ul에 대해서 패딩을 적용하면 편하겠죠.
이처럼 CSS는 여러가지 상황에 따라서 다르게 나타나는 의도되지 않은 결과에 따라서 유효적절하게 대처하는 많은 경험이 필요합니다. 자주 해보면 되는 것입니다. 어느 것을 적용해도 웹표준입니다.
