본문 바로가기
웹, 게임 제작

css float

by startSmall 2021. 8. 20.

 

 

-css float 개요

css float은 flex나 grid가 나오기 이전에 사용되던 css 레이아웃 방식입니다. float이라는 단어의 뜻은 뜨다, 뜨는 물건입니다. 그 뜻처럼 요소들을 공중에 띄운 상태에서 정렬하는 방식이라고 할 수 있습니다. 물 위에 요소가 떠 있고, 플롯 명령을 한 요소에서 특정 방향으로 흐름을 만든다고 생각하면 쉽습니다.

 

 

 

-css float 사용법

  1. 플롯 레이아웃을 사용할 html 요소를 만듭니다.
  2. css에서 플롯 명령을 줄 요소를 선택합니다.
  3.  float: left 혹은 float: right 명령을 줍니다.
  4. 흐름을 끊고 싶은 요소에 clear:both를 해서 흐름을 끊어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left div, 
        .right div{width: 50px; height: 50px; background: rgb(237, 159, 159);}
        p{font-size: 24px; width: 90%; border: 1px solid #000;}

        .left div{float:left;}
        .right div{float:right;}
        h2{clear: both;}
    </style>
</head>
<body>
    <div class="left">
        <h1>-float left</h1>
        <div></div>
        <p>float left 명령을 한 요소 뒤의 요소는 왼쪽으로 딸려갑니다.</p>
        <h2>더이상 안 딸려가려면 clear:both 해줍니다.</h2>
    </div>
    
  <hr>
    <div class="right">
        <h1>-float right</h1>
        <div></div>
        <p>float right 명령을 한 요소 뒤의 요소는 왼쪽에 떠있게 됩니다.</p>
        <h2>더이상 안 딸려가려면 clear:both 해줍니다.</h2>
    </div>


</body>
</html>

 

 

 

 

-포인트는 clear: both

float 레이아웃이 처음에 어려웠던 이유 중 하나는 의도하지 않게 한쪽 방향으로 다 쏠려버려서 환장 파티가 벌어져서 입니다. 클리어를 해주지 않아서 흐름이 계속 이어지기 때문입니다. 딸려가지 말아야하는 요소에 반드시 클리어를 해주어야 합니다.

 

 

 

-블록 엘리먼트를 플롯하면 인라인 블록이 된다?

p는 블록 엘리먼트이기 때문에 너비가 100% 이지만, 플롯 명령을 하면 인라인 블록 엘리먼트처럼 변합니다. 인라인 블록 엘리먼트답게 크기를 조절할 수 있지만, 너비를 90%로 해보면 본래의 100% 너비에서 90%가 아니라 플롯 레이아웃으로 인해 붙은 크기를 기준으로 조절되는 것을 볼 수 있습니다.

 

 

 

-언제 플롯을 쓸까?

주로 이미지와 텍스트를 정렬하기 위해 쓰이던 레이아웃으로, 현재는 플렉스와 그리드 레이아웃이 더 많이 쓰이고 있습니다. 하지만 플렉스나 그리드는 정렬할 요소에 대해 설정을 또 해줘야 하는 경우가 있으므로, 단순히 왼쪽 오른쪽으로 정렬할 때는 css float 을 쓰는게 편할 때도 있습니다. 상황에 따라, 최신 레이아웃이라고 무조건 좋다고 볼 수는 없고 단순한 명령이 베스트일 때도 있으니까요.

 

 

 

css float 정렬에 대해 알아보았습니다. 다음 포스팅에서는 css 레이아웃 중 모던 레이아웃이라 불리는 flex, grid에 대해 알아보겠습니다.

 

 

 

 

댓글