웹마스터 팁
클리어픽스(clearfix)의 개념과 방법
2014.07.04 18:50
일명 버그라고 알려져 있고, CSS를 사용할 때 수없이 사용되는 필수 학습해야 하는 코드입니다.
왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요?
HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다.
이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다.
다양한 방법이 있는데, 저는 항상 이 코드를 사용합니다.
마이크로 클리어픽스(Micro Clearfix)라고 불리구요. 코드가 가장 간결합니다.
/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }
출처: http://nicolasgallagher.com/micro-clearfix-hack/
IE6, 7은 거의 사용되지 않으니 젤 하단의 코드는 사실 필요 없습니다.
제가 강조시킨 부분만 해당 div 등의 요소에 .cf를 추가시키거나 상위 코드에 .cf를 해당 요소의 클래스 값으로 수정하셔도 상관 없습니다.
사실 float은 클리어픽스 등 사용방법의 민감함 등으로 인해 저같은 경우는 잘 사용하지 않고, 사실 부모 요소에 position: relative;를 주고 자식 요소에 position: absolute;를 줘서 top: 10px; left: 20px; 이런 식으로 CSS를 짜는 경우가 많습니다.
꽤 중요한 코드인데 팁 게시판에 없길래 올려봅니다. 이 글 보관 해두셨다가 필요하실 때마다 사용하시길!!
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
사랑비Bgm 플레이기 설치하고 제어하기 [5] | 팔공산 | 2008.11.22 |
이미지 정보표시(EXIF) 영문을 한글로 [6] | Diver | 2008.11.23 |
1.1.0으로 패치하신분들 이미 모듈이 있습니다 오류 수정 [1] | 김도훈449 | 2008.11.23 |
약관 동의 후 가입하기 [2] | findwind | 2008.11.24 |
에디터 본문 및 댓글 입력 글자크기 줄이기 [5] | HIKARU | 2008.11.24 |
1.1.0 업데이트 로그인문제관련 [6] | 그냥뛰어 | 2008.11.24 |
1.1.1 패치후에 관리자 모드 접속시 에러 해결입니다. [7] | kim donggyu | 2008.11.25 |
[설문조사] 메인페이지에 넣기와 효율적으로 관리하기 [6] | 빨간발 | 2008.11.27 |
본문내용을 강재로 중앙정렬시키는 꽁수 [4] | 크르르 | 2008.11.28 |
홈페이지의 아이콘(favicon)이 어느날 갑자기 사라졌을때... [1] | 크르르 | 2008.11.28 |
글작성시 초기 기본 카테고리 선택 하기 [7] | 똑디 | 2008.11.29 |
[초간단]회원팝업메뉴에 메뉴넣기 [1] | Pw-NET | 2008.11.30 |
1.1.1 패치후 게시판에서 파일첨부 레이어 겹침현상 문제 [1] | 늘미소 | 2008.12.01 |
1.1.1로 업데이트시 참고하세요(1.0.3에서 업뎉했습니다) [4] | 아이스마일 | 2008.12.04 |
플래닛XE - Me2day 연동시 참고사항입니다. | 파산팩토리 | 2008.12.07 |
서브홈페이지 만들기 [5] | 가리사니 | 2008.12.09 |
XE 로그인이 안될때 확인해 보세요. [7] | 똑디 | 2008.12.11 |
XE와 별도 프로그램 연동시 세션공유 [15] | 똑디 | 2008.12.12 |
회원아이디 클릭시 메일보내기 기능 숨기기 [9] | 똑디 | 2008.12.18 |
주민등록 번호 받기(수정) [23] | 개돌 | 2008.12.18 |