CSS 기초강좌 17 ( Float 의 이해 )



Float 속성은 display 와 position과 같이 웹페이지의 레이아웃을 짤때 많이 사용합니다.
하지만 float는 몇가지 알려진 문제점과 사용상의 불편한 점등 때문에 레이아웃을 짤때는 position을 더 선호하는 것 같습니다. 사실 position의 속성만 가지고도 충분히 레이아웃을 작성할 수 있습니다.

그러나 float 또한 CSS에서 매우 많이 사용하는 속성이므로 한번 알아보기로 하겠습니다.

float의 키워드는 "left, right, none, hide, inherit, inside, initial..." 등 많이 있습니다.


이중에서 사용되는 것은 대부분 아래의 2가지 뿐인 것 같습니다.

float : left   // 요소를 왼쪽으로 붙여서 배치합니다.

float : right   // 요소를 오른쪽으로 붙여서 배치합니다.


레이아웃을 짤때 float는 아래와 같이 사용하시면 됩니다.
header

sidebar

float:left 지정
content

float:right 지정
clear:both 지정
footer


[CSS code]

<style>

 #container { width:720px; }

 #header { height:50px; }

 #sidebar { width:150px;height:200px;float:left; }

 #content { width:550px;height: 200px;float:right; }

 #clr { clear:both; }

 #footer { height:50px; }

</style>

위와 같은 레이아웃을 작성할때 CSS 코드를 보면 sidebar요소에 float:left를 사용하고 content요소에 float:right를 사용하였다. 그리고 footer 바로위에서 clear:both를 사용해서 float속성을 해제하였다.

만약 clear를 사용하지 않은면 footer가 content옆으로 붙어 버린다.


또한 float는 문단에서 특정한 요소(그림)의 배치를 정할때도 유용하게 사용된다.

아래의 그림과 문단이 있는 예시는 그림 이미지에다 float 속성값중 left와 right값을 넣었다 뺐다 한 것입니다.

   

목련꽃 그늘 아래서 베르테르의 편질 읽노라 구름꽃 피는 언덕에서 피리를 부노라 아 멀리 떠나와 이름 없는 항구에서

배를 타노라 돌아온 4월은 생명의 등불을 밝혀 든다 빛나는 꿈의 계절아 눈물어린 무지개 계절아

★★Clear 속성 사용여부★★

목련꽃 그늘 아래서 긴 사연의 편질 쓰노라 클로버 피는 언덕에서 휘파람을 부노라 아 멀리 떠나와 깊은 산골 나무 아래서

별을 보노라 돌아온 4월은 생명의 등불을 밝혀든다 빛나는 꿈의 계절아 눈물어린 무지개 계절아

위의 버튼을 눌러보면 float의 left와 right에 대해 금방 이해가 갈 것입니다. 여기서 중요한 것은 글들이 그림옆으로 계속 흐르고 있다는 것입니다.

또한 float를 해제하기 위해서 clear:both를 하게되면 "★★Clear 속성 사용여부★★"부터 float의 영향으로 부터 벗어나게 됩니다. Clear버튼을 눌러 보시면 clear한 경우와 안한경우를 아실 수 있습니다. clear을 사용하면 더 이상 글들이 그림 옆에 있지 않고 독립적으로 움직입니다.


clear 속성을 사용하는데 속성값은 아래와 같습니다.

clear : left   //  float : left의 속성을 해제합니다.

clear : right   //  float : right의 속성을 해제합니다.

clear : both   //  float : left 와 float : right의 속성을 모두 해제합니다.


float는  위에서 나열한  left, right 와 float를 해제하는 clear 속성만 안다면사용하는데 큰 무리는 없을 것이라 생각합니다.

이 외에도 중요한 것들이 많이 있지만 지식이 짧음과 귀차니즘의 발동으로 인해 여기서 줄입니다.


참고: 위의 레이아웃 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #container {
                width: 720px;
            }
            #header {
                background-color: #fef9de;
                border: 1px solid #333;
                text-align: center;
                height: 50px;
            }
            #sidebar {
                background-color: #fef9de;
                border: 1px solid #333;
                text-align: center;
                width: 150px;
                height: 200px;
                float: left;
            }
            #content {
                background-color: #fef9de;
                border: 1px solid #333;
                text-align: center;
                width: 550px;
                height: 200px;
                float: right;
            }
            #footer {
                background-color: #fef9de;
                border: 1px solid #333;
                text-align: center;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">header</div>
            <br/>
            <div id="sidebar">sidebar<br/><br/>float:left 지정</div>
            <div id="content">content<br/><br/>float:right 지정</div>
            <div style="clear:both;"></div>clear:both 지정
            <div id="footer">footer</div>
        </div>
    </body>
</html>



디자인/CSS 강좌 다른 글

댓글 7

    • 프로필사진 지나가던행인1

      2014.10.11 05:51

      설명 깔끔하게 잘 하시네요
      지나가다가 들어왔는데 이해하기 쉽게 설명을 잘 하셔서
      결국 포스트 다 보고갑니다~_~

    • 감사합니다.
      허접한 내용인데 인내심을 갖고 읽어주셨다니 감사합니다.
      즐거운 하루 되세요 ^^

    • 프로필사진 지나가던행인2

      2014.10.13 18:01

      우연히 css강좌 검색해서 봤는데
      설명 너무 이해하기 쉽게 해놓으셔서 1강부터끝까지 다봤네요
      너무 잘봤습니다~~!

    • 감사합니다.
      조금이라도 도움이 되셨으면 좋겠습니다.
      댓글 감사합니다. ^^

    • 설명 진짜이해잘되고 좋아요
      엄청엄청 도움이되요!!! 제가 공부하면서 블로그에 조금씩 정리하는데 만약에 여기서 본 내용 정리한거 올리게되면
      출처밝히고 올려도될까요????

    • 네 도움이 되었다니 저도 좋네요.
      블로그에 올리셔도 됩니다.

    • 스킨을 바꾸면서 버튼에 걸어 두었던 CSS가 없어져 버렸네요. 나중에 시간이 되면 버튼을 다시 살려놔야 겠네요.

*

*