calc() 함수로 부트스트랩 스타일의 반응형 레이아웃 만들기

<div class="box" data-columns="6">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

부트스트랩처럼 12개로 미리 나누어진 구획을 기준으로 레이아웃을 만드는 방식은 레이아웃을 단순화하고 빠르게 레이아웃을 만들 수 있게 해주는 장점이 있습니다.

calc() 함수를 이용하면 부트스트랩처럼 미리 구획을 나누어 구성한 구획에 맞춰 아이템들을 배치할 수 있습니다.

매번 아이템 개수에 맞춰 레이아웃과 아이템 너비를 계산할 필요없이 클래스 선언으로 자동으로 아이템 배치를 할 수 있습니다.

한 행에 표시하는 아이템 개수는 "data-" 속성으로 표시합니다.

calc() 함수를 사용해 다음과 같이 한 행에 표시할 아이템 개수에 따라 너비를 자동 계산하는 클래스를 작성합니다.

[data-columns="1"] .col { width: calc(100% / 1); }
[data-columns="2"] .col { width: calc(100% / 2); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="6"] .col { width: calc(100% / 6); }

"data-columns" 속성 값 숫자에 따라 그 안에 있는 "col" 클래스를 가진 아이템들의 개별 너비를 cal() 함수로 자동 계산하는 클래스 정의입니다.

다음처럼 "data-columns" 속성으로 한 행에 표시할 컬럼 개수를 정해주면

<div class="box" data-columns="6">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

다음처럼 한행에 6개의 아이템이 자동으로 채워집니다. "data-columns" 값을 바꾸면 한 행에 표시되는 아이템의 개수가 자동으로 변경됩니다.