[CSS] 정렬 스타일(float)


Study/Javascript, Jquery, CSS  2020. 2. 12. 00:06

안녕하세요. 명월입니다.


이 글은 CSS에서 정렬 스타일(float)에 대한 글입니다.


이전 글에서 position를 재 배치에 대한 글 작성한 적이 있습니다.

링크 - [CSS] 위치(postion)과 요소 객체 스타일(display)


태그의 배치를 설정하는 것 중에는 float로 태크를 정렬 배치를 할 수 있습니다.

float는 position이 absolute인 경우는 정상적으로 작동하지 않을 수 있습니다.

<html>
  <head>
    <style>
      /* 테스트 확인을 쉽게 하기 위해 바탕을 회색으로 설정 */
      body {
        background: gray;
      }
      /* 테스트 확인을 위해 바탕색과 구분  */
      div.float-style {
        background: white;
        width: 100%;
      }
      /* float 요소들은 전체적으로 정렬에 영향이 가기 때문에 float 쓰는 영역을 구분해야 한다. */
      div.float-style:before, div.float-style:after {
        clear:both;
        display: table;
        content: " ";
      }
      /* 정령할 요소들 왼쪽 정렬을 한다.*/
      p {
        border: 1px solid;
        margin: 5px;
        width: calc(50% - 12px);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="float-style">
      <p style="height:50px;">1</p>
      <p style="height:20px;">2</p>
      <p style="height:20px;">3</p>
    </div>
  </body>
</html>

위에 예를 보면 p태그는 높이가 50px인 1번 사각형과 20px인 2번, 3번 사각형이 있습니다.

사실 div는 block 스타일이기 때문에, 기본적으로 너비가 100%입니다만 float가 적용되면 inline스타일로 바뀌는데 50% - 12px 크기로 변합니다. 그렇다고 실제 태그 스타일이 inline으로 변하지는 않습니다.

위 예제를 보면 1번 사각형이 왼쪽으로 먼저 들어가고 2번 3번이 오른쪽에 나란히 정렬되었습니다.


만약 2와 3번 같은 4번 사각형이 있다고 하면 어디에 정렬이 될까요?

4번의 사각형이 1번 사각형 밑으로 배치가 되었네요.. 마치 테트리스 처럼 오른쪽에서 왼쪽으로 정렬이 되는 느낌입니다.

그러나 위의 예제에서는 제가 3번의 사각형 높이를 조금 크게 했습니다. 예상하기로는 1번 아래 3번 왼쪽에 들어갈 줄 알았는데, 공간 여백이 생겼습니다. 그럼 저 사이에 넣을 수는 없을까?

<html>
  <head>
    <style>
      /* 테스트 확인을 쉽게 하기 위해 바탕을 회색으로 설정 */
      body {
        background: gray;
      }
      /* 테스트 확인을 위해 바탕색과 구분  */
      div.float-style {
        background: white;
        width: 100%;
      }
      /* float 요소들은 전체적으로 정렬에 영향이 가기 때문에 float 쓰는 영역을 구분해야 한다. */
      div.float-style:before, div.float-style:after {
        clear:both;
        display: table;
        content: " ";
      }
      /* 정령할 요소들 왼쪽 정렬을 한다.*/
      p {
        border: 1px solid;
        margin: 5px;
        width: calc(50% - 12px);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="float-style">
      <!-- 1번 4번은 왼쪽 정렬을 한다. -->
      <p style="height:50px;">1</p>
      <!-- 2번 3번은 오른쪽 정렬을 한다. -->
      <p style="height:20px;float:right;">2</p>
      <p style="height:50px;float:right;">3</p>
      <p style="height:20px;">4</p>
    </div>
  </body>
</html>

1번과 4번은 왼쪽 정렬로 하고 2번과 3번은 오른쪽 정렬을 했습니다. 단순하게 1번 4번은 왼쪽으로 몰고 2번 3번은 오른쪽으로 몰아 버린 것입니다.

예상대로 정렬이 되었네요.. 그러나 실제 코딩에서는 float를 왼쪽 오른쪽 혼합해서 잘 사용하지는 않습니다.


그리고 이 float의 큰 장점은 브라우져의 사이즈에 따라 보이는 모습이 다르다는 것입니다.

<html>
  <head>
    <style>
      /* 테스트 확인을 쉽게 하기 위해 바탕을 회색으로 설정 */
      body {
        background: gray;
      }
      /* 테스트 확인을 위해 바탕색과 구분  */
      div.float-style {
        background: white;
        width: 100%;
      }
      /* float 요소들은 전체적으로 정렬에 영향이 가기 때문에 float 쓰는 영역을 구분해야 한다. */
      div.float-style:before, div.float-style:after {
        clear:both;
        display: table;
        content: " ";
      }
      /* 정령할 요소들 왼쪽 정렬을 한다.*/
      p {
        border: 1px solid;
        margin: 5px;
        /* 높이와 너비를 30px로 고정해서 정사각형으로 표현한다. */
        width: 30px;
        height: 30px;
        float: left;
      }
    </style>
  </head>
  <body>
    <!-- 1부터 9까지의 정사각형을 만든다. -->
    <div class="float-style">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
    </div>
  </body>
</html>

실제 float 속성은 정렬로도 많이 사용되지만, 반응형 웹에서도 자주 사용되는 스타일입니다.


float에서 중요한 점은 clear:both 속성입니다.

위 예제를 보면 p태그의 부모 태그인 div에 before과 after에 display를 table로 설정되고 clear:both를 설정되었습니다.

이유는 float는 테이블 속성이 있기 때문에 before, after를 table 속성을 넣습니다.


clear:both는 float를 해제하는 설정인데, float라는 속성이 설정을 어설프게 하면 또 참 골치 아픈 속성이기도 합니다.

왜냐하면 display 속성도 inline으로 바꾸어 버리고, 그렇다고 display:block!important 설정한다고 inline 설정이 풀리지 않습니다.

위 이미지를 보시면 분명히 display:block 설정이 해제가 되지 않았는데 width:100%가 아닙니다.


그리고 float가 설정되어 있지 않은 속성과 혼합이 되면 정렬이 엉망진창이 되는 속성입니다.

그래서 float를 사용하는 구간에는 부모 태그에 before, after에 꼭 clear:both를 넣는 것이 조금은 css를 쉽게 설계할 수 있습니다.

(이게 bootstrap에서 웹 반응형을 clear:both와 float:left만으로 설정합니다. 거기서 모티프를 따온 것입니다.)


여기까지 CSS에서 정렬 스타일(float)에 대한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.