margin-left : auto 적용하기

프로젝트를 진행하던 중 버튼이 화면 오른쪽 끝에 배치되는 레이아웃을 구현하게 됐습니다.

버튼을 오른쪽으로 밀기 위해 margin-left : auto를 적용했지만?

아무 일도 일어나지 않았습니다!

자, 이럴 때는 당황하지 않고 침착하게 구글 창을 켜서 마법의 키워드 not working으로 검색해 줍니다.

margin auto 적용 조건

제가 찾은 스택오버플로우 글에 따르면 margin-left auto를 적용하기 위해서는 두 가지 조건이 필요했습니다.

1. block 요소일 것
2. 요소의 width 값이 고정되어 있을 것

생각해 보면 당연합니다. margin auto는 남는 여백을 자동으로 분배합니다. 따라서 width를 가지지 않는 inline 요소 혹은 width가 지정되지 않아 부모의 너비를 여백 없이 꽉 채운 block 요소에는 margin auto가 적용될 수 없습니다.

margin auto가 적용이 안 되는 이유를 알아냈으니 이제 display block과 width 값을 지정해 주면 문제는 쉽게 해결됩니다.

요소의 콘텐츠에 따라 너비 지정하기

그런데 여기서 한 가지 고민이 추가됩니다. 요소의 width를 고정값으로 정하고 싶지 않은 것이죠.

고정값을 사용하면 콘텐츠 내용이 달라졌을 때 UI가 쉽게 깨지게 됩니다. 고민하던 차에 다행히 요소 안에 포함된 콘텐츠를 기준으로 width를 정할 수 있는 CSS 속성값을 알게 되었습니다.

max-content

css코드 복사
.button {
  width: max-content;
}

max-content는 콘텐츠가 가지는 최대 크기를 지정합니다. 이때 부모 요소의 너비를 초과하더라도 줄 바꿈이 되지 않습니다.

min-content

css코드 복사
.button {
  width: min-content;
}

min-content는 콘텐츠에 포함된 가장 긴 단어를 기준으로 크기를 지정하고 그 크기를 초과하면 줄 바꿈 됩니다.

fit-content

css코드 복사
.button {
  width: fit-content;
}

fit-content는 max-content와 마찬가지로 콘텐츠가 가지는 최대 크기를 지정하지만 부모 요소의 너비를 초과하게 되면 줄 바꿈 됩니다.

최종 코드

버튼에 margin-left auto를 적용하기 위한 최종 스타일입니다. 저는 콘텐츠가 가지는 최대 크기만큼 너비를 지정하지만 오버플로우가 발생하지 않도록 fit-content 값을 사용했습니다.

css코드 복사
.button {
  display: block;
  margin-left: auto;
  width: fit-content;
}

위 코드를 적용하면 버튼이 오른쪽으로 잘 밀리는 것을 볼 수 있습니다.

호환성 이슈

다만 Can I Use를 보면 IE에서는 max-content, min-content, fit-content를 지원하지 않는 것을 확인할 수 있습니다.

만약 IE까지 고려해야 한다면 div 태그로 버튼을 한 번 감싸고 flex를 사용해서 오른쪽으로 밀어버리는 방법이 정신 건강에 이로울 것 같습니다 🙄

포스팅을 마치며

사실 디자인이 변경되면서 해당 코드는 제거하게 되었습니다. 그렇지만 앞으로 프론트 작업을 하며 또 이런 상황을 마주칠 것 같아 이번에 알게 된 내용을 정리해 보았습니다. CSS 작업을 할 때 어려운 점은 어떤 부분이 문제라고 에러를 던져주지 않는다는 점인 것 같습니다. 따라서 각 속성의 특성을 정확하게 알아두는 게 중요한 것 같습니다. 그럼 이번 포스트는 여기서 마무리하도록 하겠습니다 👋👋