float으로 이미지와 텍스트 영역 조절하기 (뉴스기사 UI)

영역 안에 이미지를 감싸는 텍스트가 있는 UI
영역 안에 이미지를 감싸지 않고 본인의 영역을 차지하는 텍스트가 있는 UI

두가지를 쉽게 대응할 수 있는 방식을 물어봐서 샘플을 만들어 보았다.

• HTML

<div class="news">
    <div class="thumbBox">
        <img src="https://picsum.photos/100/50?random=1" alt="" class="thumb">
    </div>
    <p class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quod at veniam, minima, libero exercitationem cupiditate placeat temporibus numquam,
        ipsam id autem dignissimos illum quidem quos enim non eos incidunt rerum?
    </p>
</div>

• CSS

.thumbBox {
   float:left;
   height:60px;
   border:1px solid gray;
}
.thumbBox:before {
   content:"";
   display:inline-block;
   width:0;
   height:100%;
   vertical-align:middle; // 이미지 세로 사이즈에 상관없이 중앙정렬하기 위해 높이값 100%, vertical을 middle로 고정
}
.thumbBox img {
   vertical-align:middle;
}

float과 overflow를 사용하면 이미지를 감싸고 있는, 감싸지 않는 UI를 구현 할 수 있다.

• .text에 overflow: hidden을 사용하지 않았을 때
  

• .text에 overflow: hidden을 사용했을 때
  

overflow:hidden 을 사용하지 않았을 때는 float이 부유하는 성질이 있어 텍스트 영역이 이미지 아래로 영역이 잡히지만
글자 자체는 이미지랑 겹칠 수 없기 때문에 글자가 들어갈 수 있는 영역을 차지하는 듯 하고,

overflow:hidden 을 사용했을 때는 overflow:hidden 속성 자체가 본인의 영역을 넘치는 걸 자르는 역할을 하기에
본인 영역을 자르기 위해 인지하면서 이미지와 영역 자체가 분리 되는 것 같다.

명확하게 탁! 꼬집어서 얘기하긴 힘들지만 비유하자면 위와 같고, 해당 이슈는 특정 환경에 따라 float된 요소만 보여주고 숨긴다고 했을 때
float과 함께 있는 요소는 굳이 제어를 하지 않아도, 해당 영역을 항상 알아서 차지 할 것이기 때문에
비슷한 UI를 만들 때 유용하게 잘 사용하고 있다