9/25 - margin : auto

margin : auto에 대해서

block 요소에서의 auto

<p> 태그와 같이 텍스트를 적기 위한 block은 padding을 사용하여 내부 여백을 조정한다.

이와 다르게 내부 요소말고 외부에서 가운데 정렬할 수 있는 방법은 display : flex 등이 있다.

그리고 margin을 통해서 요소 위치를 조정하는 방법이 있는데 그때 사용할 수 있는 것이 margin : auto이다.

( padding은 auto 값을 사용할 수 없다. )

[Css] margin auto, 중앙정렬하기 :: hansol.cha (tistory.com)

[Css] margin auto, 중앙정렬하기

윗 글에서 자세한 내용을 확인할 수 있다.

정리하자면 margin에서는 padding과 다르게 auto 값을 활용하여 가운데 정렬을 사용할 수 있다.

 

margin - CSS: Cascading Style Sheets | MDN (mozilla.org)

MDN에서도 예시를 살펴볼 수 있다.

해당 문서에서는 이를 수평 정렬 하는데 사용하라고 하고, 수직정렬과는 관련이 없을 것으로 보인다.

추가적으로 flex를 지원하지 않는 옛날 브라우저의 문서에서는 margin : 0 auto;를 통한 수평 정렬을 추천하기도 한다.

 

flex 요소에서의 auto

margin : auto는 display : flex 의 레이아웃에서도 사용가능하다.

[CSS] flexbox로 만들 수 있는 10가지 레이아웃 (tistory.com)

[CSS] flexbox로 만들 수 있는 10가지 레이아웃

윗 글에서 자세한 내용을 확인할 수 있다.

 

정리하자면 기존의 margin : 0 auto; 와 같이 수평 가운데 정렬을 사용하는데도 물론 사용 가능하며,

margin-left : auto; 나 margin-right : auto; 와 같이 양 쪽으로 정렬을 사용하는데도 사용이 가능하다 ! ( 수직 방향도 물론 OK )

이는 flex item만의 레이아웃 구성의 장점이라고 볼 수 있고, 잊지않으면 꼭 유용하게 사용가능할 것 이다.