음수마진(collapse margin) 을 이용한 버튼 정렬

Collapsing margin for Align box

이 포스팅에서는 버튼에 대한 정렬을 음수마진을 이용하여 구현해 보도록 하겠습니다.

일반적으로 왼쪽, 중앙, 오른쪽 버튼 모음이 있다고 가정했을 때 많이 이용하는 방법이 좌,우측 버튼 모음에 대한 정렬을 absolute 를 이용하여 정렬하는 경우가 많습니다.

이 방법이 올바르지 않은 것은 아니지만 효율성, 재사용성이 부족합니다. 

absolute 를 이용하는 경우 가령 높이값이 다른 버튼타입이 있거나 중앙버튼이 없으면서 좌,우측 버튼만 있는 경우에는 버튼을 감싸고 있는 컨테이닝 박스에 높이값을 지정해 주기 위해서 멀티클래스를 이용하는 경우가 대부분입니다.

이런 경우에는 높이값에 대한 멀티 클래스를 부여하기도 하면서 높이값이 다른 버튼이 많을 수록 멀티 클래스는 그 만큼 늘어나기 때문에 유동적이지 못하는 단점을 지니고 있습니다.

이러한 노가다(?) 작업을 하지 않기 위해 absolute를 이용하지 않고 대신 음수마진을 이용하여 버튼의 내부 높이값 그리고 좌,우,중앙 버튼의 갯수에 관계없이 유동적으로 정렬하는 방식을 아래 소스를 통해 참고하시기 바랍니다.

Source

See the Pen 음수마진을 이용한 버튼 정렬박스 by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub