inline-block과 float 중 어떤 것을 써야 할까?

🙋‍♂️ inline-block과 float 중 어떤 것을 써야 할까?

안녕하세요 TriplexLab 입니다 :)

오늘은 가로 배치 속성에 대해서 이야기를 해볼게요
가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요.

inline-block에 대해서 이야기를 해볼게요

각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다.

<div class="grid">
          <div class="grid_item first"></div>
          <div class="grid_item two"></div>
          <div class="grid_item third"></div>
  </div>

 

.grid {
          width: 500px;
          margin: 0 auto;
          background-color: dimgrey;
          text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/
          font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법 하지만 크로스브라우징 호환성헤서는 문제가 있다.*/
  }

  .grid_item {
          width: 100px;
          height: 100px;
          display: inline-block; /*이부분에 성질을 inline-block로 바꿔줘서 가로배치를 해줬다.*/
          vertical-align: top; /*밑에 4px 여백을 없에는것*/
  }
  .grid_item.first {background-color: orange;}
  .grid_item.two {background-color: yellow;}
  .grid_item.third {background-color: royalblue;}
      

 

결과:

근데 inline-block;은 다 좋은데 inline 속성이 기본적으로 가지고 있는 텍스트 성질을 가지고 있어서
자세히 보시면 4px 정도 여백이 양옆과, 밑에 생겼어요.
물론 저 여백은 font-size: 0;으로 강제로 없앨 수가 있어요.
하지만 호환성 문제가 있기 때문에 주의해야 해요.

​결론적으로는 저 양옆에 여백 4px을 완벽하게 없애주는 것은 없어요.
존재하지 않아요.

그래서 제가 말씀드리고 싶은 것은
inline-block;은

 

 

 

이런 경우에만 사용하시는 것을 권장합니다.
즉 텍스트에 양옆이 어느 정도 여백이 있고, 가로 정렬인 디자인일 때 권장합니다.

---

float에 대해서 이야기를 해볼게요

float은 뜨다는 성질을 가지고 있어요. 말 그대로 공간에서 뜨는 거죠.
이것도 똑같은 예제로 말씀을 드릴게요.

각각의 박스들을 float 가로 정렬을 시켜보겠습니다.

<div class="grid">
  <div class="grid_item first"></div>
  <div class="grid_item two"></div>
  <div class="grid_item third"></div>
</div>

 

.grid {
        width: 500px;
        margin: 0 auto;
        background-color: dimgrey;
        overflow: hidden; /*부모 높이를 잊어벼리기때문에 다시 높이를 생기게끔해주는 float해재 기법*/
}
    
.grid_item {
        width: 100px;
        height: 100px;
        float: left; /*가로 정렬을 하기위한 float*/
}
.grid_item.first {background-color: orange;}
.grid_item.two {background-color: yellow;}
.grid_item.third {background-color: royalblue;}

 

결과:

loat은 inline-block;과 다르게 양옆에 4px 여백 없이 깔끔하게 가로 정렬이 되는 것을 볼 수가 있어요.
float은 본질적으로 가로 정렬을 하기 위해서 생긴 속성이 아니에요...

(float은 이미지와 옆에 글이 올수 있게끔 해주기 위해서 생긴 속성이에요)

float은 위에서 말했듯이 말 그대로 공간에서 뜨는 거죠.
그래서 부모인 그레이 색상이 높이를 잊어버려요.

그것을 해결해주기 위한 방법은 여러 가지가 있습니다.
float:해제라고 부르기도 합니다.
이번 글에서는 간단한 해결 방법인

overflow: hidden;을 주는 것이에요.

​그래서 결론적으로 제가 말씀드리고 싶은 것은

float은

pinterest 이미지

이런 즉 큰 박스들을 가로 정렬하고 싶을 때 float을 사용하는 것을 권장합니다.