[ CSS ] 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기

📍 반응형을 고려하여 Cards 컴포넌트 중앙 정렬하기

CSS를 만지다 보면 항상 내 뜻대로 안 될 때가 많다. 그럴 때마다 직접 손으로 움직여주고 싶지만 우리는 프로그래머니까 코드로 움직이는 방법을 사용하도록 하자.

 

여러가지 Card를 모아놓은 Cards 컴포넌트가 있다고 가정하자. 이 Cards 컴포넌트를 중앙 정렬하고 싶다고 했을 때 어떻게 할 것인가? 여러 가지 방법을 떠올릴 수 있겠지만 처음에 나는 피그마에 명시되어있는 margin값을 고정하여 Cards를 중앙에 위치시켰다. 그런데 반응형이미지를 고려하는 환경에서 이러한 방법은 적절하지 못한 선택이었다. 왜냐하면 viewport가 고정되어있을 때는 괜찮지만, viewport가 바뀔때마다 margin값을 하나로 고정해놨기 때문에 CSS가 원하는 대로 나오지 않을 확률이 높기 때문이다.

728x90

이럴 때는 margin값을 고정하지말고 전체 Cards의 width를 고정하고, margin: ? auto(?는 상+하 값이므로 필요한 만큼 선언하자 중요한 값은 auto이다.)를 주면 반응형에 대응 할 수 있다.

 

예를 들어, viewport가 1280px일 때 Cards의 margin은 0 286px을 줬다. 그랬을 때 첫번째 사진처럼 원하는 모양이 나오긴하지만, 브라우저 창의 크기가 커지게 되면 margin값은 고정되어있기 때문에 Cards의 전체적인 Width가  고정된 margin값까지 늘어나게 된다. 그렇게되면 두번째 사진처럼 Card가 늘어져보인다. 이럴 때 Cards의 width를 고정하고 margin: 0 auto를 주면 된다. 그러면 마지막 사진처럼 1280px보다 늘어나게 되도 width값은 고정되어 있고, 필요한 margin값은 자동으로 늘어나기 때문에 더 이상 늘어나지 않는다.