사실 창피한 얘기일 수 있지만, 여태 HTML/CSS 마크업 작업을 할 때 가운데 정렬이 필요하다 싶으면 margin: 0 auto; 를 기계적으로 썼던 것 같다.
margin을 준다는 것이 해당 크기만큼 간격이 떨어진다고 생각할 수 있지만, 사실은 그만큼 element 바깥영역을 차지하고 있는 것이다. padding이 요소 안쪽 영역을 차지하고 있는것과 동일하다!
해당 이미지는 쿠팡 웹사이트에서 로그인부분을 캡쳐해서 가져와보았다.
해당 요소 배치를 어떻게 하면 좋을지에 대해서 생각해볼 시간이 있었는데, 처음 고려할 때부터 flex로 배치를 해야겠다는 생각만 했었다.
display를 flex로 두고 justify-content를 space-between으로 두면 되겠다!라고 생각을 했지만 이 아이디어엔 큰 오류가 있었다.
space-between을 적용하려면 왼쪽 부분을 하나의 div로 묶고 오른쪽 부분을 또 하나의 div로 묶어야 하는데, 동일한 기능을 하는 요소들은 하나로 묶어야 한다는 것이다.
결론적으로 굳이 justify-content를 써서 배치를 하지 않아도 된다는 것이다. 다섯개의 element를 하나의 row에 배치하고 두번째 요소의 margin-right를 auto로 두면 되는것이다.
