float 속성[정렬] IE 해결법
- 퍼블리셔/css
- 2011. 2. 19. 14:36
float 는 띄우다라는 뜻입니다. 왼쪽으로 정렬, 오른쪽으로 정렬 , 아니면 none.
[참고사항]
즉 하나의 div 에 두개의 class 를 부여하는것입니다.
이런식으로 블럭을 왼쪽이나 오른쪽으로 정렬할때 사용합니다.
이와 비슷하게 position 속성도 있는데요. 이번에는 float 에 대해서 알아보고 IE 는 버그가 있어 다르게 나오는데 이또한 해결법을 알아봅니다.
그럼 속성은 어떻게 되고 어떻게 사용할까요? 아주 간단합니다. 아래처럼 사용합니다.
float:left; /* 왼쪽으로 정렬 */
float:right; /*오른쪽으로 정렬 */
float:none; /* float 영향을 받지 않음 */
이처럼 사용법은 무척간단합니다.
그럼 어떨때 사용할까요?
예를들어 아래처럼 블럭이 있다고 가정합니다.
<div id="text_box">
<div id="text_box1">text_box1</div>
<div id="text_box2">text_box2</div>
<div id="text_box3">text_box3</div>
</div>
text_box라는 블럭안에 3개의 블럭이 있습니다.
그럼 아래처럼보이겠지요.
너비와 높이는 살짝 제외하고 이해하세요. 어느 영역을 갖는다는것만 우선 알아두면 됩니다.
그럼 이것을 float:left 를 사용해서 왼쪽으로 정렬해보겠습니다.
스타일은 아래와 같습니다.
#text_box1, #text_box2, #text_box3{
float:left;
}
그럼 아래와 같은 형식으로 됩니다.
여기서 한가지 주의할점은 여백은 상관하지 말고 모양만 우선 참고하세요.
즉 float:left 를 하면 왼쪽으로 차곡, 차곡 정렬이 된다는 점입니다.
여기까지 float 에 대한 간단한 설명입니다.
헌데 문제는 float는 버그가 있습니다. 그걸 알고 해결해보겠습니다.
float 버그
float 를 사용하다보면 잘 안될때가 있습니다. 그것은 버그때문에 그런데요. 이를 해결해보겠습니다.
버그는 3가지 정도가 있습니다.
margin 3px 버그 , 떠블 마진 버그 , 부모 요소를 벗어나는 버그입니다.
float를 사용하면 이 세가지 경우를 반드시 해결해야 크로스 브라우징 환경을 이룰수 있습니다.
첫번째는 margin 버그입니다.
mragin 3px 버그 (IE 6)
이경우는 특히 스킨을 제작하다보면 나오는데요. 본문과 사이드바 너비를 정확히 계산해서 했는데 다른 브라우져는 괜찮은데 유독 IE6만 사이드바가 아래로 내려가는 경우입니다.
float 를 같은 방향으로 중첩할때 나오는경우 입니다.
즉 총너비(800) = 본문(600) + 사이드바(200) 이렇게 딱 맞는데 유독 ie6만 포함하지 않은 3px가 나옵니다.
그래서 IE6만 본문(600) + 사이드바(200) + 버그(3) = 총너비 803) 이런식으로 계산이 됩니다.
이때 해결방법은 두가지가 있습니다.
첫번째 : left 와 right 를 번갈아가면서 적용하기.(본문을 float:left 를 하면 사이드바는 float:right 이렇게 합니다)
두번째 : 너비를 3px 더 여유분으로 주기입니다.(즉 총너비를 800px 가 아닌 803px 이상주면 됩니다.)
떠블 마진 버그
이경우는 같은 방향으로 마진을 주었을때 마진값이 두배가 되는 경우입니다.
즉 float:right 하고 margin-right:10px 라고 하면 다른 브라우져는 정상적으로 처리하는데 유독 ie6 은 margin-right:20px 가 되는경우입니다.
정상적인 브라우져 => float:right; margin-right:10px;
정상적인 브라우져 보여줄 때 => float:right; margin-right:10px;
똑같이 보여줌.
ie 6 => float:right; margin-right:10px;
ie 6 보여줄때. => float:right; margin-right:20px;
margin 값이 두배가 되어 보여줌.
이를 해결하는 방법.
첫번째 : margin 대신 padding 를 사용한다.
예; float:right; padding-right:10px;
두번째 : 자식 요소 이용하기.
이것은 이런경우 입니다.
부모요소에는 float:right margin:0; 을 부여하고 그 아래자식요소에 margin-right:10px를 부여하는것입니다.
이것은 불필요한 요소를 만든다는 점에서 비추하는 방법입니다.
간단하게 padding을 이용하는것을 추천합니다.
부모요소를 벗어나는 버그
이는 아래그림처럼 부모의 요소안에 있지않고 부모요소 밖으로 넘쳐나는경우 입니다.
이를 해결하는 가장 간단하고 확실한 방법은 핵을 사용하는 겁니다.
일단 html 에서 ie 에 class="clearfix" 를 부여합니다.
그럼 아래처럼 코드가 변경이 되겠지요. 즉 아래처럼요.
<div id="text_box" class="clearfix">
<div id="text_box1">text_box1</div>
<div id="text_box2">text_box2</div>
<div id="text_box3">text_box3</div>
</div>
/* Float bug */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;height:0}
.clearfix{display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
여기서 참고로 코딩을 하다보면 ie 에 class를 부여할때도 있지만 class 에 class 를 부여할때가 있습니다.
그럴때는 아래처럼 하면 됩니다.
<div class="text_box clearfix">
<div id="text_box1">text_box1</div>
<div id="text_box2">text_box2</div>
<div id="text_box3">text_box3</div>
</div>
이는 공백으로 class를 구분합니다.
위처럼 text_box 와 clearfix 두개가 공백으로 분리되어 있습니다.