아티클

영역에서 아이템 간격 같게 구성하기 (css only)

유무 2015-06-15 13:57:48

안녕하세요. UI개발실 곽석종입니다.

 

해당 내용은 함께 업무하고 계신 김유리님, 김태형님, 최성규님, 황준상님의 도움을 받아 작성하는 글입니다.

특히 김유리님의 정리내용을 바탕으로 합니다.

 

모바일기기가 많아지고, 유동적인 너비의 영역에서 언제나 같은 간격을 유지하도록 아이템을 맞춰야 하는 요구가 생기는데요. 이를 해결하는 방법들을 소개해드리려고 합니다. 말보단 역시 그림이 설명하기 쉽겠죠? 아래의 그림을 참고해주세요.

 

 

가변영역에 아이템이 언제나 같은 여백을 가지는 디자인

 

위와같은 경우인데요. 아래에서 여러 방법들을 소개해 드리겠습니다. (대부분의 예제는 width를 정해두지 않은 상태를 기준으로 하였습니다.)

 

방법 1. flex를 이용하기! 

 

혹시 flex속성에 대해 들어보셨나요? 사실 프론트엔드 개발을 어느정도 해보신 분들이라면 접해 보셨을텐데요. flex에 있는 justify-content: space-between와 :before와 :after를 이용하면 별도의 수식 계산 없이 간단하게 구성이 가능합니다.

 

위와 같이 유동적인 아이템의 갯수에도 그리고 너비가 다른경우에도 대응이 가능한데요. 몇가지 문제점이 존재합니다.

  • flex를 지원하지 않는 브라우저에서 동작하지 않는다.
  • flex로 지정한 영역의 before, after를 사용하게 되는데, 모든 모바일 기기에 대해 대응되지 않는다.(flex 내부 before, after가 인식되지 않는 경우)

첫번째 문제점인 지원범위는 아래와 같습니다. new형태에 대해서만 justify-content속성을 지원합니다.

flex support

 

두번째 문제점은 before와 after를 대신해 빈 엘리먼트를 삽입하여 회피가 가능합니다.

 

결론적으로는 flex를 이용한 방법은 아직 사용하기에는 이른 방법이라고 말씀드릴 수 있겠습니다. 하지만, flex가 웹표준을 지키는 브라우저에서는 정상 작동해야 하며, 프론트엔드 개발의 궁극적인 목표인 단계적향상을 생각한다면, 하루 빨리 사용할 수 있는 날이 오기를 희망합니다.

 

- flex관련 링크모음 (https://css-tricks.com/almanac/properties/j/justify-content/http://dev.w3.org/csswg/css-flexbox/#flex-items) 



그러면 현실적인 해결책이 필요하겠죠? 위 문제를 해결하는 다른 차선책을 살펴보겠습니다.

 

방법 2. table, table-cell 이용하기


차선책 중 하나는 table과 table-cell, 그리고 공백을 차지하는 빈 엘리먼트를 사용하는 방법입니다. (김태형님의 방법)

현재로서는 해당 방법이 아이템의 너비변화라던지, 갯수에 대해서 가장 유동적으로 사용가능하여 강력 추천해드리지만, display:table을 지원하지 않는 브라우저에서는 제대로 보여지지 않는 것을 유의해주시기 바랍니다.

 

방법 3. text-align: justify, :after 이용하기 


또 다른 방법으로는 text-align: justify와 :after요소로 강제 개행을 하는 방법입니다. (최성규님의 방법)

맨처음 소개해 드렸던 flex와 가장 유사한 방식입니다.

text-align: justify는 한줄 이상의 경우에 적용되므로, after 엘리먼트를 사용하여 강제 개행하여 정렬합니다. 이또한 after를 지원하지 않는 브라우저에서는 사용할 수 없고, 아이템 갯수가 많아져서 한줄을 넘어가게 되면 넘치는 아이템이 보여지지 않게 되므로 유의하셔야 합니다.

 

방법 4. 계산하여 위치 시키기 


가장 마지막 방법으로는 여러가지 수식계산이 필요하지만, 하위 브라우저에서도 사용가능한 방법입니다. (황준상님의 방법)

계산을 통해 정해지는 수치로 표현하므로, 정확한 갯수와 아이템의 너비가 같을 경우에 사용가능하며, 만약 갯수가 변경되거나, 아이템 너비가 각각 변하게 된다면 추가적인 수정이 필요하게 됩니다. 하지만, 하위 브라우저에 대한 지원도 가능하니, 알아둬야 되는 방법입니다.

 

갯수와 내부 요소의 크기를 통한 계산법은 아래와 같습니다.

width: 100 * (n-1/n)%

margin: 0 -X% (X = 50 - (위에서 계산된 width))

padding: 0 Ypx (Y = 내부 요소의 width / n / 2)

 

지금까지 일정 영역안에서 아이템끼리 같은 마진을 구성하는 방법에 대해 살펴보았습니다. 누구나 생각할법한 형태에 대해서 구현하는데 생각보다 많은 어려운점이 존재한다는 것을 알게 되었고, 위 방법보다 더 좋은 방법을 알고 계시다면 댓글로 남겨주세요~!

댓글 0
댓글을 작성하려면 해주세요.