float 사용시 원만한 해결방법

말자아이콘 전체게시물 작성일15-03-04 15:32 조회2,626회

본문

http://naradesign.net/open_content/lecture/wp/#section11

 정말 좋네요

내용 중..
 

만약 배경색을 넣지 않았다면 무엇이 문제인지 알아차리지 못했을껍니다. 부모 요소가 자식의 높이를 상자의 크기에 전혀 반영하지 못하고 있는 상황 입니다. 때문에 자식 요소들은 부모 밖에서 따로 존재하는 것처럼 보입니다. 이것은 브라우저 버그가 아니라 정상적으로 표준에 따라 잘 렌더링 된 것입니다. 부모 상자는 왜 자식만큼 커지지 않았을까요? 그것은 float 속성 때문입니다. float 요소가 적용된 상자는 마치 둥둥 떠 다니는 레이어 처럼 float 되지 않은 다른 블럭 요소와 다른 층에 떠 있게 되어서 자식의 높이가 부모에게 전달되지 않은 것입니다. 자식의 높이를 부모에게 전달하기 위한 여러가지 방법들이 있습니다.

부모 요소에 float 속성을 부여

.container { float:left }

float된 요소들끼리는 서로 어울리기 때문에 부모 요소에도 flaot 속성을 부여 합니다. 하지만 이 방법은 결국 현재 문서의 모든 블럭에 불필요한 float 속성을 부여하도록 만듧니다. 왜냐하면 모든 블럭들이 같은 층에 떠 있어야만 서로의 영역을 침범하지 않기 때문입니다. 만약 하나의 블럭이라도 float 되지 않았다면 이 상자는 float된 다른 상자와 겹칠 것이므로 이런 방법은 절대로 권장할 수 없습니다.

부모 요소에 overflow 속성을 부여

.container { overflow:hidden }

overflow 속성을 변경 합니다. 모든 요소는 overflow 속성의 기본 값을 지니고 있는데 기본 값은 visible 입니다. 이 값을 visible이 아닌 다른 값으로 변경해 주면 됩니다. 다른 값으로는 auto, scroll, hidden 이 있습니다. 이 방법은 자식 블럭이 부모 블럭을 넘칠 때 스크롤이 발생하거나 숨김 현상이 발생하기 때문에 언제나 가장 안전한 방법은 아닙니다. 자식 요소 가운데 부모 상자의 바깥쪽으로 펼쳐지는 레이어 .layer { position:absolute } 를 넣어야 한다면 절대로 이 방법을 사용할 수 없을 것입니다. 향후 이런 레이어를 띄우는 상황이 절대로 발생하지 않으리라고 누구도 장담할 수는 없기 때문에 이 방법 역시 권장하는 방법은 아닙니다.

빈 요소에 clear 속성을 부여

.clear { clear:both }

clear 속성은 float된 요소의 흐름을 끊고 자기 자신은 float된 요소로부터 줄 바꿈 처리하는 속성 입니다. float된 요소의 아래쪽에 내용 없는 블럭 <div class="clear"></div>을 하나 추가한 다음 clear 속성을 추가하면 비로소 float된 자식 요소들의 높이가 부모에게 반영이 되는데 clear 속성의 값으로는 left, right, both가 있습니다. 이 방법은 아무 의미 없는 빈 요소를 추가해야 하기 때문에 역시 권장하는 방법은 아닙니다.

가상 선택자 :after 를 사용하는 방법

.container:after { content:""; clear:both; display:block; }

가상 선택자란 실제로는 존재하지 않는 요소나 특수한 상황에서만 발생하는 동적인 요소를 CSS 명령으로 제어하는 기법 입니다. 가상 선택자는 다시 '가상 클래스 선택자'와 '가상 요소 선택자'로 구분할 수 있는데요. 가상 클래스 선택자(:link, :visited, :hover, :active, :focus, :first-child)는 특정 요소에 마치 동적으로 class를 부여한 것과 같은 이치로 이용할 수 있습니다. 가상 요소 선택자(:first-line, :first-letter, :before, :after)는 실제로 존재하지 않는 요소를 마치 존재하는 것처럼 이용하는 기법 입니다. :after 라는 가상 요소 선택자는 content 라는 속성을 이용해서 .container 블럭이 끝나기 직전 content 속성의 값 "*" 을 화면에 출력할 수 있습니다. 이렇게 생성된 요소에 clear:both 속성을 부여하면 자식의 높이를 부모에게 전달할 수 있는데 실제로 HTML 코드에는 빈 요소가 존재하지 않기 때문에 가장 이상적인 방법이라고 할 수 있습니다. 그러나 IE 6~7 브라우저는 가상 요소 선택자를 지원하지 않습니다.

IE 전용 확장 zoom 속성을 이용하여 IE 6~7 문제 해결

.container { *zoom:1; }

IE 6~7 브라우저는 가상 요소 선택자 :after를 지원하지 않습니다. 그러나 CSS hack을 이용하여 자식의 높이를 부모에게 전달 할 수 있습니다. zoom:1 속성은 IE 전용 확장 속성으로써 본래의 존재 목적은 IE 브라우저에서 웹 문서를 자유롭게 'zoom in / zoom out' 하는 것 입니다. 이 속성을 부여하게 되면 요소는 IE 브라우저에서만 존재하는 hasLayout 이라는 개념의 속성을 갖게 되는데 이 속성이 IE 브라우저에서 float 문제를 해결하는 trigger로 작용을 하고 다른 브라우저에는 영향을 미치지 않습니다. zoom 속성 앞에 '*'을 붙이는 이유는 현재는 존재하지 않지만 향후 zoom과 동일한 이름을 지닌 속성이 표준으로 등장하거나 다른 웹 브라우저에서 CSS 확장 속성으로 등장하더라도 이 코드를 무시하도록 만드는 'hack'을 사용한 것입니다. 속성 앞에 공백 없이 '*'을 붙이면 해당 속성은 IE 6~7 브라우저에서만 작용하게 됩니다.

다양한 시행 착오를 통해서 얻은 컬럼 구조 만들기 CSS 결과 코드

다양한 시행 착오와 IE 6~7 브라우저의 버그를 격었지만 우리는 다음과 같은 방법으로 컬럼 구조 레이아웃을 위한 CSS 코드를 얻었습니다.

.container { background:#ddd; *zoom:1; }
.container:after { content:""; clear:both; display:block; }
.content { width:70%; float:left; background:#f00; }
.navigation { width:20%; float:right; background:#00f; }

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 3 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 62 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 73 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 105 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 90 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 87 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 128 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 91 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 299 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 111 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 75 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 169 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1406 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1661 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1038 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4119 추천: 15
게시물 검색