토스 웹 페이지 중 상단 nav 영역을 코딩할 때 생긴 의문점이다.
margin auto와 flex justify-content center의 차이
우선 nav 태그 안에 div를 중앙으로 배치하기 위해 nav에 disply를 flex 속성을 부여한 후 justify-content와 align-items를 center로 주었다. 하지만 토스 웹 페이지 개발자 도구로 확인해보니 div에 width값을 주고 margin 값을 auto로 주었다.
물론 결과는 같았지만 내가 한 코딩과 다르게 코딩한 것을 보니 괜히 내가 틀린 것만 같은 기분이다.
그래서 margin auto를 사용해 중앙 배치와 justify-content를 사용하여 중앙 배치를 하는 방법의 차이를 찾아봤다. 이 두가지 방법의 차이에 대한 글은 없었고,
margin auto와 text-align의 차이점에 대한 글만 몇몇 찾을 수 있었다.
margin auto와 text-align의 주요 차이점은 내부 div가 인라인 요소이냐 아니냐의 차이라고 공통적으로 설명하고 있다.
이 차이점을 알고나서 토스 웹페이지를 보니 div의 width 값을 100%가 아닌 값으로 설정했다면 justify-content로 가운데 정렬하는 것과 margin 값으로 가운데 정렬하는 것의 차이는 무의미할 것 같다는 생각이 들었다.
다만 차이가 있다면 margin auto를 사용하면 코드의 길이가 줄어든다는 점이다.
코드의 경량화는 사용자가 많은 웹사이트에서 중요한 부분이다. 그래서 토스 웹 페이지도 margin을 사용한 것이라 지레 짐작해본다.
코딩에 정답은 없지만, 그럼에도 나는 margin보다는 가운데 정렬이라는
의미를 가진 justify-content를 사용하는 것이 조금 더 맞지 않을까하는 생각이다.
코드의 경량화도 중요하지만 코드가 올바른 의미로 사용되는 것도 중요한 부분이라 느껴지기 때문이다. 물론 내가 아직 모르는 무엇인가에서 유의미한 차이가 있을 수 있겠지만 아직은 모르겠다. 추후에 알게 된다면 아래 추가하겠다.
