웹마스터 팁
클리어픽스(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] | sejin7940 | 2014.06.18 |
목록에서 이미지 팝업 이용하기 | Happyphp | 2014.06.19 |
관리자페이지에서 콘텐츠->파일 에서 등록된 파일 전체 리스트에 이미지가 바로 나타나도록 [2] | sejin7940 | 2014.06.19 |
상단에 스르르~ 닫기 가능한 배너 달기 [30] | 야옹잉 | 2014.06.20 |
XE에서 신디케이션 제거하기 [1] | mAKEkr | 2014.06.20 |
관리자가 글 쓸때는 분류를 선택 안 해도 등록되도록 (공지글을 쓸때를 위해) 개선 [2] | sejin7940 | 2014.06.21 |
min.js min.css 정리해서 보기 | Happyphp | 2014.06.26 |
php에서 한글언어 작성이 깨질때 [1] | 광개토대왕3 | 2014.06.28 |
BlogAPI 활용하기 | 맞장 | 2014.06.29 |
닉네임 중복체크 버그 해결방법 [7] | 소렌트. | 2014.06.29 |
[nginx] Rewrite 예외 설정 | okiz | 2014.06.30 |
외국어 스팸 방어 [2] | DoorWeb | 2014.07.01 |
[javascript] 기초강좌 | 03 논리연산자, 비트, 삼항연산자, 기타연산자 | hiwebs | 2014.07.02 |
[javascript] 기초강좌 | 4장. 비교제어문(if문) | hiwebs | 2014.07.02 |
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때 | Canto | 2014.07.03 |
에디터 컴포넌트에 현재 mid 값 넘겨주기. [1] | 애니즌 | 2014.07.03 |
XE Core:1.7.5.3 조회수 증가, 자기 게시글 클릭시 조회수 증가 [1] | 때린데 또때려 | 2014.07.04 |
클리어픽스(clearfix)의 개념과 방법 | 시니시즘 | 2014.07.04 |
php 세션을 memcache에 저장할 때 주의할 점 | XE러버 | 2014.07.04 |
xe 1.7.4 이상 object cache 및 template cache 적용 방법 [3] | XE러버 | 2014.07.04 |