CSS 공작소 : float

float 로 div 를 한줄에 나열하기 (왼쪽으로 띄우기)

보기

1

2

3

4

5

6

float : left - 왼쪽으로 띄우기

소스

사용된 CSS (클릭시 보기) : borderclearfloattext-align

설명

- div 는 특별한 설정을 하지않는 한 한줄에 하나씩 표시됩니다.
- float : left 설정을 이용해서 왼쪽 정렬로 한줄에 여러개가 나오도록 해 보았습니다.
- float 는 이런 걸 할 수 있습니다. (띄운다라고 표현을..)

float 로 div 를 한줄에 나열하기 (오른쪽으로 띄우기)

보기

1

2

3

4

5

6

float : right - 오른쪽으로 띄우기

소스

사용된 CSS (클릭시 보기) : borderclearfloattext-align

설명

- 오른쪽으로 띄워본 예제입니다.
- float : right 로 사용하면 됩니다. 눈여겨 볼 것이 하나 있습니다.
- 정렬 순서가 좀 다릅니다. 태그상 마지막인 6번 개가 먼저 나옵니다.
- 일반적인 오른쪽 정렬과는 다른 부분이죠.
- float : right 를 사용할때 순서가 바뀌는 점을 감안해서 먼저나올 것을 뒤에 써주면 됩니다.
- 순서상 처음 나오는것부터 오른쪽으로 띄우기 때문에 이렇게 되는것이죠.
- 제일 처음에 나온 1번개가 먼저 오른쪽에 위치하게 됩니다.

실습 - float 속성 조절해 보기

보기

float :
float : left

1

2

3

4

5

6

오늘도 달립시다 ! (무엇을 달리든 자유 ! ㅋ)

설명

- float : none 이 기본값이며 사용하지 않는 경우입니다.
- 이미 지정된 값을 초기화 시키는 용도로 사용하면 좋겠죠.

float 사용시 주의점, 마감처리 하기 ( clear : both )

보기

1

2

3

4

5

6

float 를 clear:both 로 마감(?)처리 한 경우

1

2

3

4

5

6

float 마감처리 안한경우, 개들이 밖으로 나왔네요..

소스

사용된 CSS (클릭시 보기) : borderclearfloatpaddingtext-align

설명

- float 를 사용하면 떠있는 상태가되서 차지하고 있는 영역이 없어집니다.
- 떠있다면 특정 영역을 차지하고 있다고 보기 어렵죠. ^^; 말그대로 떠 있으니까요.
- 그래서 아래 공간으로 다른 것들이 들어올 수 있죠.
- 해결법은 간단합니다. 몇가지 방법이 있습니다. 그중 좋은 방법은

<div style="clear:both;"></div> 를 마지막에 사용해 주면됩니다.

<div class="dog"><img src="http://superkts.com/img/css/dog021.gif" /><br>6</div>
<div style="clear:both;"></div>

이런 식으로요.

float 는 어디에 사용하는 건가요? 알려주시죠..

설명

아래는 현재 제가 만들고 있는 사이트의 스크린샷 입니다. ^^;

아래 자전거 리스트는 table 태그를 사용하여 만든것이 아니고
div 에 float 를 적용해서 만들었습니다.

이런 리스팅의 용도로 사용할 수도 있습니다.

http://biketago.com/bike/

한번 방문해 보세요 ^^;; 자전거 관련 홈페이지 입니다.

사이트의 레이아웃을 잡는데도 사용합니다

설명

홈페이지 제작 업체들이 마구 생겨나던 시기에는 HTML 코딩을 할 때 table 태그를 많이 사용하였습니다.
위지윅 에디터를 사용한 영향이기도 합니다. (나모나 드림위버 같은)

요즘은 table 로 레이아웃 잡으면 욕먹는(?) 바람직한 세상으로 변했죠.
그리고 코더라는 직업이 생겨나기까지 했습니다.

많이 쓰이던 table 레이아웃은 문제가 많습니다.
소스를 알아보기 힘들다, 난잡하다, 구조화되지 않았다 등 상당하죠.
그렇다고 table 을 쓰지 말라는것은 아닙니다. 리스팅 할때는 table 이 원래의 용도에 맞고 편합니다.

그리고 이제는 일반화된 DIV 레이아웃의 경우 처음 접할때 어렵지만 경지에 이르렀을 때(?) 오히려 더 쉽습니다.
여담으로 함량미달 브라우저 특히(IE8 이하, 최악은 6버젼) 때문에 DIV 레이아웃 정착이 많이 힘들었습니다.
지금은 브라우저들이 표준을 잘 지키기 때문에 상황이 많이 좋아졌습니다.

마지막으로 DIV 레이아웃에 많이 사용되는 CSS 중 하나가 바로 float 죠.

관련 예제를 꾸준히 올려보겠습니다.

많이 방문해 주시면 좋겠다냥 ㅇㅅㅇ;

실습 - 간단한 좌우 2단 레이아웃 조절해 보기

보기

내용 가로 크기

메뉴 가로 크기

float 조절

width :

400px

width : 400px

width :

150px

width : 150px

float :
float : left

내용

메뉴

설명

- 가로 550px 의 박스안에 두개의 div 가 들어있습니다.
- 직접 조절해 보세요 ^^
- 크기 조절 슬라이더는 마우스로 한번 클릭한 후 키보드 위,아래 키로 세밀하게 조절할 수 있습니다.
- 내용과 메뉴의 합이 550px 보다 크면 밑으로 떨어집니다. (이것도 테스트 해보세요)

아래는 위 레아아웃의 코딩입니다.

<style type="text/css">
        .css_test {
                background:#efefef;
                border:2px solid #777;
                margin:0 auto;
                text-align:center;
                width:550px;
        }

        .css_test .content {
                background:yellow;
                float:left;
                height:300px;
                line-height:300px;
                width:400px;
        }
        .css_test .side {
                background:orange;
                float:left;
                height:300px;
                line-height:300px;
                width:150px;
        }
</style>

<div class="css_test">
        <div class="content">내용</div>
        <div class="side">메뉴</div>
        <div class="cb"></div>
</div>

※ class="cb" 에서 cb 는 clear : both 입니다. (임의로 만든것)

실습 - 간단한 좌우 3단 레이아웃 조절해 보기

보기

왼쪽 가로 크기

중간 가로 크기

오른쪽 가로 크기

float 조절

width :

100px

width : 100px

width :

350px

width : 350px

width :

100px

width : 100px

float :
float : left

왼쪽

중간

오른쪽

설명

- 가로 550px 의 박스안에 세개의 div 가 들어있습니다.
- 크기 조절 슬라이더는 마우스로 한번 클릭한 후 키보드 위,아래 키로 세밀하게 조절할 수 있습니다.
- 왼쪽, 중간, 오른쪽의 합이 550px 보다 크면 밑으로 떨어집니다. (이것도 테스트 해보세요)

아래는 위 레아아웃의 코딩입니다.

<style type="text/css">
        .css_test {
                background:#efefef;
                border:2px solid #777;
                margin:0 auto;
                text-align:center;
                width:550px;
        }
        .css_test .left {
                background:antiquewhite;
                float:left;
                height:300px;
                line-height:300px !important;
                width:100px;
                margin:0;
        }
        .css_test .center {
                background:pink;
                float:left;
                height:300px;
                line-height:300px !important;
                width:350px;
        }
        .css_test .right {
                background:bisque;
                float:left;
                height:300px;
                line-height:300px !important;
                width:100px;
        }
</style>

<div class="css_test">
        <div class="left">왼쪽</div>
        <div class="center">중간</div>
        <div class="right">오른쪽</div>
        <div class="cb"></div>
</div>

※ class="cb" 에서 cb 는 clear : both 입니다.