[IE] clearfix 핵 clearfix 핵다음은 float를 사용할 때 때때로 일어날 수 있는 이상하고 바람직하지 않은 경우입니다.img { float: right; }이런... 이 이미지는 그것을 담고 있는 엘리먼트보다 높이가 높고 떠 있어서 컨테이너 바깥으로 넘쳤습니다!이 문제를 해결하는 방법이 하나 있긴 하지만 조금 지저분합니다. 이를 clearfix 핵이라고 합니다.다음과 같은 CSS 코드를 새로 추가해 봅시다..clearfix { overflow: auto; }이제 어떻게 되는지 확인해 봅시다.훨씬 낫네요!이 기법은 근래에 나온 브라우저에만 동작합니다. IE6를 지원하고 싶다면 다음과 같은 코드를 추가해야 합니다..clearfix { overflow: auto; zoom: 1; }이 기법을 쓸 때 좀 더 주의를 기울여.. WEB/Hack*Bug 8년 전
position-2 위치 지정 예제아래의 위치 지정 예제는 실제 예제에서 쓰기에 좀 더 적절할지도 모릅니다. 다음은 다소 현실적인 페이지 레이아웃입니다..container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; } footer { position: fixed; bottom: 0; left: 0; height: 70px; background-color: white; width: 100%; } body { margin-bottom: 120px; }홈타코 메뉴초안 목록시간방향연락처section에 지정한 margin-.. WEB/CSS 8년 전
position-1 position좀 더 복잡한 레이아웃을 만들기 위해서는 position 프로퍼티에 관해 살펴볼 필요가 있습니다. position 프로퍼티에는 다양한 값을 설정할 수 있으며, 각 값의 이름은 제대로 지어지지 않아서 기억하기가 불가능합니다. 그럼 지금부터 하나씩 살펴보기로 하고, 이 페이지를 즐겨찾기에 추가해 둬야 할 수도 있습니다.static.static { position: static; }static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아닙니다. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현합니다.relative.relative.. WEB/CSS 8년 전
box-sizing box-sizing오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다. 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다. 다음은 이전 페이지와 동일한 예제이지만 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다..simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; pa.. WEB/CSS 8년 전
기초 - float 해제 float된 직속부모에 가상선택자인 :after 부여 :after{content:""; display:block; clear:both;} ex) div.wrap > ul.list{float:left} / div.wrap:after{content:"",display:block;clear:both;} ps. 이 외 직속부모 속성에 overflow:hidden 추가하는 방법도 있다. 참조 : http://webclub.tistory.com/183 WEB/HTML 8년 전
