[CSS] 정렬 스타일(float)

Study/Javascript, Jquery, CSS

[CSS] 정렬 스타일(float)

v명월v 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>