XHTML+CSS 시작하기 6 (collapsing margin (마진통합) 현상)
1.collapsing margin 마진통합
인접한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.
큰 값 쪽으로 접혀들어간다.
값이 동일한 경우 : bottom쪽의 값에 접혀들어가서 통합된다.
p 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.
부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다.
마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.
자식이 인라인엘리먼트인 경우 : collapsing margin 은 일어나지 않는다. 이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에
margin-bottom과 margin-top 사이에서 일어나는 현상.
더 큰 마진값쪽으로 접혀들어가서 결국 큰쪽의 마진값이 적용된다.
같은 값을 가지고 collapsing되면 위의 마크업된 엘리먼트의 margin-bottom쪽으로 접혀들어간다.
컨텐츠가 들어있지 않은 엘리먼트의 margin-top과 margin-bottom 은 margin-top쪽으로 ollapsing된다.
블록레벨 엘리먼트의 부모자식 관계에서도 더 큰 마진값쪽으로 접혀 들어간다.
(부모자식의 margin-top 끼리의 collapsing)
마진통합현상에서 벗어나려면:부모엘리먼트에 border, padding 값을 적용하거나, 컨텐츠를 넣으면 된다.
2-1. float property - 엘리먼트가 가질 수 있는 속성
float property 의 값은 left, right, none
floating 된 엘리먼트의 영역에는 주변을 둘러싸는 컨텐츠가 침범하지 못하고, 주변을 감싸게 된다.
floating 되었다는 것은 normal flow한 흐름에서 벗어나고, static한 위치에서 벗어난 것을 의미한다. 그래서 다른 엘리먼트들은 floating된 엘리먼트가 없다고 생각하고, 샘플처럼 div2가 div1의 자리를 차지하게 된다.
|
|
img{float:left} .d3{ width:200px; ------------------------------------------- <div class="d3"><img src="http://sstatic.naver.com/search/images11/logo_naver.gif" alt="naver"/>브라우저는 언제나 일정한 법칙을 가지고 엘리먼트를 배치한다. 이것을 흐름(flow)이라고 한다.브라우저가 XHTML 엘리먼트들을 페이지에 배치하기 위해 사용 하는 것, 즉 흐름을 제어 하는 것 블럭 단위 : 위에서 아래로 차례로 나타내 주면서, 블럭 엘리먼트를 만나면 라인 브레이크를 고려해서 라인을 넣어 주며 밑으로 내려 간다</div> |
2-2. clear property – float된 엘리먼트의 영향에서 벗어나게 하는 속성 Left,right,both값이 있다.
float:left; 속성을 없애줌
float: right; 속성을 없애줌
both :모든 float 속성을 없애줌
ex) clear: both;
댓글