웹마스터 팁


 일명 버그라고 알려져 있고, 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를 짜는 경우가 많습니다.


 꽤 중요한 코드인데 팁 게시판에 없길래 올려봅니다. 이 글 보관 해두셨다가 필요하실 때마다 사용하시길!!

 

제목 글쓴이 날짜
빈공간 더블 클릭시 상하 이동 스크립트 socialskyo 2014.07.23
이메일인증 Error 한방정리 참고해보세요. [4] 애드바이러스 2014.02.12
로그인 안하면 코멘트 볼 수 없게 스킨 수정하는 법 [3] W.O 2014.03.23
회원 비밀번호 수정시 자동으로 로그아웃 되게 하는 방법 [4] sejin7940 2014.07.18
특정 확장변수를 글 추천자에게만 보이게 하기 [10] 뮤랑이 2010.01.11
관리자만 글 등록이 되고, 일반 유저는 글 등록버튼을 누르면 아무런 반응이 없을 때. [1] whitemind 2013.11.07
모바일(또는 textarea형)에서 댓글 수정시 줄바꿈 유지되도록 수정 [2] sejin7940 2014.07.17
댓글등록에 단축키 사용하기 ひりゅう. 2014.07.15
이전글, 다음글 코어 건드리지 않고 사용하기 (모듈X, 애드온X) (업데이트) [8] 시니시즘 2013.01.26
SocialXE 관련 사용팁 적용 수정 파일 [3] file 휘즈 2014.07.13
외부 페이지에서 회원 extra_vars 변수 가져오기 [1] Happyphp 2014.07.09
특정게시판, 비밀글로 작성하기 (대암지기님 팁 보완) [9] file 된장맛껌 2010.03.17
게시판 접속시에 첫(제일 최근) 게시물이 보여지게 하기 [16] foret 2014.03.08
편리한 안드로이드 크로스 브라우징 테스트 Tip - 안드로이드 가상화 file AJKJ 2014.07.09
htm과 html의 차이는 ? 디테일 2014.06.17
1.7 버전 사이트 메뉴 편집 사용법 [4] file 휘즈 2013.07.27
MRTG에서 네트워크및 CPU, 메모리점유율을 기록하기 ひりゅう. 2014.07.05
XE 왕초보를 위한 글 [13] 휘즈 2009.08.06
php 세션을 memcache에 저장할 때 주의할 점 XE러버 2014.07.04
클리어픽스(clearfix)의 개념과 방법 시니시즘 2014.07.04