wystan's tales

내용 바로가기

사이드바 바로가기

댓글 바로가기

페이지 하단 바로가기

home

about

archive

theme

from web 2008-09-11

예전에 float을 제거하는 방법 이라는 글에서 overflow 속성을 이용하는 float 해제 방법을 다뤘습니다. 그 내용을 아래에 일부 인용하겠습니다.

“만약 width 만 지정한 상태에서 overflow: hidden; 을 적용하면 박스가 내용물의 크기만큼 아래로 늘어나니까요. 이 때 박스 안에 있는 float 된 요소의 높이까지도 같이 계산됩니다. 결국 박스가 float 된 요소를 포함할 만큼 커지기 때문에 float을 제거하는 효과가 나타나게 됩니다.”

글을 쓰던 당시에 overflow 가 float 된 요소를 포함하도록 박스 크기를 늘리는 명확한 이유는 몰랐습니다. CSS 2.1을 열심히 찾아봤는데 overflow 속성 설명에는 관련 내용이 전혀 없었거든요. 그래서 경험적인 추측일 뿐이었습니다.

그런데 어제 마진 병합에 관한 글 을 쓰면서 그 원리가 CSS 2.1에 정확하게 명시되어 있다는 사실을 알게 되었습니다.

그 내용은 시각적인 서식 모델의 세부 사항(visual formatting model details)을 다루는 10장의 6.6, 6.7절 입니다.

마진 병합을 다루면서 블록 레벨 요소의 height 결정 방식 을 찾아봤는데 overflow 가 visible 일 때에만 적용되는 내용이었습니다. 그래서 visible 이 아닌 경우를 찾아봤는데 6.6절에 있더군요.

6.6절은 일반적이지 않은 상황에서의 height 결정 방식을 다룹니다. 핵심적인 내용은 아래와 같습니다.

“일반적인 문서 흐름(normal flow)에서 블록 레벨 요소의 overflow 값이 visible 이 아니고 height 가 auto 면 그 자손 요소에 따라서 6.7절에 명시된대로 높이가 결정된다.”

6.7절에서 실제 높이 결정 방식을 다루는데 float 된 자식 요소과 관련된 부분은 다음과 같습니다.

“만약 요소가 float 된 자손 요소를 갖고 이 자손 요소의 하단 마진 경계(bottom margin-edge)가 요소 박스 아래에 있으면 요소 박스의 높이는 자손 요소의 하단 마진 경계를 포함하도록 늘어난다.”

따라서 overflow 를 이용한 float 해제는 CSS 2.1에 정의된 정확한 동작 방식입니다. 그동안 참 많이 궁금했었는데 결국은 궁금증이 풀렸네요. ^^

댓글 15개가 달렸습니다. 태그: CSS , W3C , web standard , XHTML

이태임 | 2008-09-12 09:44 잘 읽었습니다.하지만…이해가 안되는건지 아님 제가 지금 피곤해서 글이 눈에 안들어오는건지…아무튼 이해가 안되네요

잘 읽었습니다.하지만…이해가 안되는건지 아님 제가 지금 피곤해서 글이 눈에 안들어오는건지…아무튼 이해가 안되네요

wystan | 2008-09-12 15:15 개인적으로 놀라운 발견이라서 급히 쓰느라 설명이 부족했네요~ overflow: hidden 이 float 해제 효과를 낸다는 것은 많이 알려져 있습니다. 그런데 CSS 2.1에서 그 효과가 정확히 어디에 설명되어 있는지는 제가 지금껏 모르고 있었거든요. 이 글은 기존에 경험적으로 알고 있던 동작 방식이 실제로 CSS 2.1에 명시되어 있다는 사실에만 초점을 맞췄는데 조만간 자세한 동작 방식에 대한 설명을 추가해서 업데이트 할 생각입니다.

개인적으로 놀라운 발견이라서 급히 쓰느라 설명이 부족했네요~

overflow: hidden 이 float 해제 효과를 낸다는 것은 많이 알려져 있습니다. 그런데 CSS 2.1에서 그 효과가 정확히 어디에 설명되어 있는지는 제가 지금껏 모르고 있었거든요.

이 글은 기존에 경험적으로 알고 있던 동작 방식이 실제로 CSS 2.1에 명시되어 있다는 사실에만 초점을 맞췄는데 조만간 자세한 동작 방식에 대한 설명을 추가해서 업데이트 할 생각입니다.

밥먹자 | 2008-09-20 14:25 덕분에 도움이 되었습니다. 적용하니까 잘 되네요. 감사합니다. 근데 저도 약간 이해가 안 갑니다.. 이해가 가는 것 같기도 하고 아닌 것 같기도 하고…켁.. ^^;; 다른 글들 읽어보니까 설명이 너무 잘 되있어서 머리속에 정리가 팍팍!! 되네요. 종종 들러야겠어요. 고맙습니다~ ^___^

덕분에 도움이 되었습니다. 적용하니까 잘 되네요. 감사합니다. 근데 저도 약간 이해가 안 갑니다.. 이해가 가는 것 같기도 하고 아닌 것 같기도 하고…켁.. ^^;;

다른 글들 읽어보니까 설명이 너무 잘 되있어서 머리속에 정리가 팍팍!! 되네요. 종종 들러야겠어요. 고맙습니다~ ^___^

wystan | 2008-09-20 22:00 도움이 되셨다니 기쁘네요. ^^ 자주 업데이트는 못하지만 꾸준히 운영하고 있으니 종종은 아니더라도 가끔씩 들러주세요~

도움이 되셨다니 기쁘네요. ^^ 자주 업데이트는 못하지만 꾸준히 운영하고 있으니 종종은 아니더라도 가끔씩 들러주세요~

나무 | 2008-09-23 10:27 종종들리는데 알찬 내용이 업데이트 되어있네요.. 설렁설렁 넘어갔던 부분에 대해 진지하게 생각하게 되었습니다. 위스터님 덕분에 공부 잘하고 갑니다. ^^

종종들리는데 알찬 내용이 업데이트 되어있네요.. 설렁설렁 넘어갔던 부분에 대해 진지하게 생각하게 되었습니다. 위스터님 덕분에 공부 잘하고 갑니다. ^^

wystan | 2008-09-24 23:50 빨리 테스트 소스 만들고 다음 글도 써야 하는데 요즘 정신이 없어서 계속 미루고 있네요. ^^; 제대로 업데이트도 못하고 있는데 그래도 이렇게 좋게 봐주셔서 고맙습니다. ^^

빨리 테스트 소스 만들고 다음 글도 써야 하는데 요즘 정신이 없어서 계속 미루고 있네요. ^^; 제대로 업데이트도 못하고 있는데 그래도 이렇게 좋게 봐주셔서 고맙습니다. ^^

강짱 | 2008-10-29 13:34 좋은 정보 보고 가요~~ float해제법과 overflow해제법에 차이점을 조금이나마 이해 할수 있겠됫어요 감사해요~

좋은 정보 보고 가요~~ float해제법과 overflow해제법에 차이점을 조금이나마 이해 할수 있겠됫어요 감사해요~

wystan | 2008-11-09 14:34 찾아주셔서 고맙습니다. ^^

찾아주셔서 고맙습니다. ^^

엽님 | 2008-11-17 15:35 오랜만에 들어왔습니다.ㅋ 좋은글 항상 감사하구요 ㅋㅋ 왜케 바쁘신거에요!ㅜ.ㅜ;

오랜만에 들어왔습니다.ㅋ 좋은글 항상 감사하구요 ㅋㅋ

왜케 바쁘신거에요!ㅜ.ㅜ;

어거 | 2008-11-27 09:24 좋은 정보 감사드립니다. 항상 쓰면서도 원리나 근거도 모르고 사용했었는데 좋은글 감사드려요~ 앞으로도 많이 부탁드려요

좋은 정보 감사드립니다. 항상 쓰면서도 원리나 근거도 모르고 사용했었는데 좋은글 감사드려요~ 앞으로도 많이 부탁드려요

wystan | 2009-01-13 00:59 고맙습니다. ^^ CSS 권고안을 쉽게 설명하는 그런 글을 쓰고 싶은데, 아직 정확하게 이해하지 못하는 부분도 많고 그렇습니다. 앞으로는 작은 부분부터 차근차근 정리해보려고요~

고맙습니다. ^^

CSS 권고안을 쉽게 설명하는 그런 글을 쓰고 싶은데, 아직 정확하게 이해하지 못하는 부분도 많고 그렇습니다. 앞으로는 작은 부분부터 차근차근 정리해보려고요~

wystan | 2009-01-13 01:01 그리고 엽님~ 이제야 댓글을 남기네요. 이제 조금 여유가 생기기는 했는데… 그래도 여전히 할 일이 많네요. ^^; 나중에 다들 모여서 술 한잔 해요~~

그리고 엽님~

이제야 댓글을 남기네요. 이제 조금 여유가 생기기는 했는데… 그래도 여전히 할 일이 많네요. ^^;

나중에 다들 모여서 술 한잔 해요~~

solmate | 2010-01-05 14:09 잘 보고 갑니다. 감사합니다.^^

잘 보고 갑니다. 감사합니다.^^

suny | 2010-02-04 16:56 아.. 천천히 잘 읽어보니까 이해가 좀 가네요 그동안 잘 몰라서 overflow:hidden;은 일종의 핵인줄 알고 쓰기를 좀 꺼려했었는데..^^; 제가 잘못 알고 있었군요 ㅎㅎ 아무튼, 자세한 설명 정말 감사합니다~ ^^

아.. 천천히 잘 읽어보니까 이해가 좀 가네요 그동안 잘 몰라서 overflow:hidden;은 일종의 핵인줄 알고 쓰기를 좀 꺼려했었는데..^^; 제가 잘못 알고 있었군요 ㅎㅎ 아무튼, 자세한 설명 정말 감사합니다~ ^^

아기여우 | 2010-10-14 17:22 전 아직 많이 부족한가바요.. 글이 하나도 이해가 안가요~..ㅠㅠ float는 몇번 써봐서 조금 알꺼 같긴 한데 float를 제거한다는게 무슨 의미인지..ㅠㅠ;; 으엉..ㅠㅠ 그래도 잘 보구가요..ㅠㅠ

전 아직 많이 부족한가바요.. 글이 하나도 이해가 안가요~..ㅠㅠ float는 몇번 써봐서 조금 알꺼 같긴 한데 float를 제거한다는게 무슨 의미인지..ㅠㅠ;; 으엉..ㅠㅠ 그래도 잘 보구가요..ㅠㅠ

댓글이 닫혔습니다.

◀ previous | next ▶

blogging

misc

ultima

web

javascript

[JavaScript] 굉장한 자바스크립트 강좌(영문) 소개

[CSS3] 미디어 쿼리(Media Query)의 only 키워드

CSS 이야기: position, float, display 속성간의 관계

CSS 이야기: overflow 속성의 float 해제 효과

CSS 이야기: 마진 병합(collapsing margins)

아들부자 (컨텐츠 관리 시스템(CMS) 소개)

성민장군 (CSS 이야기: “규격을 따른다”라는 표현의 의미(conformance))

웹디자인 강좌 ([CSS3] 미디어 쿼리(Media Query)의 only 키워드)

cartes (CSS 이야기: CSS 2.1과 2의 관계)

아슈 (CSS 이야기: “규격을 따른다”라는 표현의 의미(conformance))

Textpattern

TextBook

Txp Resources

TXP Forum

울티마 가이드

valid XHTML

valid CSS

under CCL

Powered by Textpattern Designed by seevaa

페이지 상단 바로가기