Extended Isolate Float Technique

CSS
css, grid, isolate-float, isolate-technique, layout

기존의 Isolate Float 기술을 이용해 다양한 사이즈의 박스들을 배치해보려고 이것저것 해보다가 조금 업데이트한 방법을 공유합니다.

Floating box

CSS를 배우기 시작하면서 float만을 가지고 박스들을 원하는 위치에 배치하기는 쉽지 않았었습니다.
약간의 크기 차이만 생겨도 다음 라인으로 떨어지거나 다음 라인에서도 튀어나와 있는 박스에 걸리거나 하면서 조금 복잡한 레이아웃을 구성하다 보면 뒷골 땡기는 일이 많이 생기죠.
그리고 float된 박스들을 비율 값으로 배치할 때 발생하는 Sub-Pixel Problem 과 같은 것들도 있어 브라우저마다 다른 결과 때문에 애를 먹기도 한다고 합니다. 아직 실무를 해본 건 아니라 이 문제가 피부에 와 닿지는 않지만 아무튼 컨트롤 하기 어려운 아이라는 거죠.
아무튼 조금 더 다양한 기법들을 배우기 시작하면서 Isolate Float 방식으로 float된 박스를 배치하는 방식을 알게 되었고 이것을 여러 예제에 이용해보고자 하였습니다.

Isolate Float

먼저 알게 된 기존의 Isolate technique 은 하나의 행 안에서 박스들을 이동하는 방식이었습니다. 하나의 행 안에서 박스들의 순서를 바꾸기도 쉽고 Sub-Pixel Problem도 해결할 수 있었습니다.

Extended Isolate Float

이 방식은 제멋대로 이름을 한번 붙여 본 거고, 검색 능력이 부족한 것인지 같은 방식을 쓰는 사례는 찾지 못했습니다.

1
2
3
.iso-box {
  margin-right: -100%;
}

이 코드가 기존 방식의 핵심이죠. float: left된 박스들 모두에게 margin-right: -100%; 속성을 준 후에 margin-left 속성으로 그 페이지의 그리드 시스템에 맞게 배치하는 방식이었습니다.

그런데 한 디자인 예제를 구현해보면서 박스의 사이즈가 다양해 이 방법만으로는 레이아웃을 구성하기가 어려워서 고민하던 중에 margin-top을 활용해서 행 뿐만 아니라 열에도 Isolate Technique이 가능하지 않을까 생각이 들어서 한번 해보았습니다.

1
2
3
4
.iso-box {
  margin-top: -100%;  
  margin-right: -100%;
}

그리고 요런 식으로 그리드 시스템도 구성했습니다.

1
2
3
4
5
6
7
8
9
10
.iso-col-1 { margin-top: calc(20%*0); }
.iso-col-2 { margin-top: calc(20%*1); }
.iso-col-3 { margin-top: calc(20%*2); }
.iso-col-4 { margin-top: calc(20%*3); }
.iso-col-5 { margin-top: calc(20%*4); }
.iso-row-1 { margin-left: calc(20%*0); }
.iso-row-2 { margin-left: calc(20%*1); }
.iso-row-3 { margin-left: calc(20%*2); }
.iso-row-4 { margin-left: calc(20%*3); }
.iso-row-5 { margin-left: calc(20%*4); }

해봤더니 되더라구요…

이렇게 배치된 박스들을 ~

box1
box2
box3
box4
box5

이렇게 내 맘대로 아무 데나 배치할 수 있습니다.

box1
box2
box3
box4
box5
box1
box2
box3
box4
box5
1
2
<div class="box1 iso-box iso-col-1 iso-row-0">box1</div>
<div class="box2 iso-box iso-col-2 iso-row-1">box2</div>

위와 같이 일정한 그리드 시스템을 가진 컨테이너 안에서는 각 박스 아이템의 클래스를 조정해서 엑셀을 사용하듯이(?) 아주 쉽게(?) ㅎㅎ 아무튼 원하는 레이아웃으로 박스를 배치하기에 조금 쉬운 방법이 아닐까 생각합니다.

그리고 물론 CSS에서 높이 값을 조절하는 데는 한계가 많죠. 이 방법도 박스들을 담고 있는 컨테이너가 높이 값을 가지고 있지 않거나 clearfix가 적용되어 있지 않다면 레이아웃이 무너질 수도 있을 것입니다. 아무튼 이 방법은 최근에 알게된 내용을 활용하다가 조금 확장해본 방법입니다. 요즘은 flex나 다른 프레임웍을 이용한 더 훌륭한 방법들도 많지만 이 방법도 어떤지 한번 참고 해보시고 보완할 점이나 더 좋은 방법들이 있다면 피드백 주시면 감사하겠습니다.

Share Comments