웹마스터 팁
클리어픽스(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
제목 | 글쓴이 | 날짜 |
---|---|---|
아이프레임속 링크를 기존페이지에서 이동하기 [1] | 정다운804 | 2008.06.19 |
썸네일 생성이 되지 않을시 확인할 내용.. [4] | 또나아빠 | 2008.06.17 |
설치후 권한 재조정 [4] | 덱스터 | 2008.06.17 |
페이지 작성이나 수정후 적용이 안돼서 고생하는 많은 분들을 위하여 [1] | cyric | 2008.06.17 |
할수 있다!! 내 맘대로 DB주무르기 ★DB방식 변경★ | 토리세상 | 2008.06.16 |
페이지 숫자에 네이버처럼 사각테두리 씌우기 [8] | 탑심 | 2008.06.15 |
☆조회수.추천수 구간에 따른 이미지 나타내기(Hot 등..) - 갤러리게시판&최근이미지위젯☆ [5] | 오기오기 | 2008.06.12 |
설치시 초기화면으로 돌아가는 문제 해결방법 [4] | PICSTORY™ | 2008.06.11 |
링크 사이트 제작을 위한 어드바이스 - MouseOver Preview - [6] | Hammer | 2008.06.10 |
PHP 폼메일 [9] | 헥토르 | 2008.06.09 |
(위젯) 이미지 클라우드 스킨 사용 법 [2] | Simulz | 2008.06.06 |
링크 사이트 제작을 위한 어드바이스 - Fade In MouseOver - [3] | Hammer | 2008.06.06 |
2차메뉴 롤오버 위치 변환.. [3] | 봄처녀 | 2008.06.05 |
이전글,다음글 얻기 (검색결과 까지 포함) (수정) [8] | 라르게덴 | 2008.06.05 |
1.03버전 글쓸때 오류... [1] | 화려한 부활 | 2008.06.05 |
링크 사이트 제작을 위한 어드바이스 - Planning 2 - [6] | Hammer | 2008.06.04 |
링크 사이트 제작을 위한 어드바이스 - Planning 1 - [7] | Hammer | 2008.06.04 |
일정 기간이 지난 글에 코멘트 등록 제한 [3] | 老姜君 | 2008.06.03 |
1.0.3버전 외부 페이지 쿼리 스트링 붙일때 주의 하세요. | 그라미 | 2008.06.03 |
레이아웃에 스크립트를 이용한 화면을 띄우고 싶은 경우 [3] | dhseo | 2008.06.03 |