내가 원하는 이미지

현재 내가 원하는 페이지 구조는 이렇다. 화면이 어떻게 되든 기본 페이지의 요소는 무조건 정가운데 들어가는 것. 그런데 이게 뭐라고 인터넷을 찾아봐도 자꾸 display:flex를 사용하라는데 이거는 내가 원하는 문제의 해결책이 아니었다. 그렇게 여러가지 돌아다니던 중 찾게된 방법. 너무 간단했다.

margin: 0 auto;

margin: 0 auto;

이거를 최상단 css에 부여하면 그냥 해결되는 문제이다. 그렇다면 이 코드를 사용하면 어떻게 표현이 될까?

원래는 이랬던 화면이 가장 처음 화면으로 구성된 것이다.
누가보면 아니 이래 쉬운것을 몰라? CSS 헛공부했구만 하겠지만 맞다. 쳐맞다. 초보자들은 이게 있다는거 알려줘도 뒤돌면 까먹고 복습하고 까먹고 다른거로 응용하기 힘든것이다.
근데 이게 뭐로 검색을 해야 나오는지를 모르니 찾기가 너무 힘들었다. 그래서 한번 정리해둔다. 무조건 까먹기에.

그럼 어떤 원리로 작동하는가?

• margin: 0 auot;는 HTML 요소를 가로축 기준으로 가운데 정렬할 때 사용하는 CSS 속성이다.
• 그럼 각각의 요소에서 의미를 이해해보자.
  • 사전 정보: margin에 2가지 값을 넣게되면 margin:a b; 이렇게 넣으면 a는 위, 아래의 여백을 설정하는 값이다. b는 왼쪽, 오른쪽의 여백을 지정하는 값이다.
  • 0: 그러므로 여기서 0은 위와 아래의 여백을 0으로 설정하겠따는 의미이다.
  • auto: 왼쪽과 오른쪽 여백을 브라우저가 자동으로 계산하도록 지정하는 것이다.
• auto의 역할은 사용 가능한 공간을 균등하게 나누는 것이다. 즉, 요소의 너비와 부모 컨테이의 너비 간의 남는 공간을 왼쪽과 오른쪽 여백에 동일하게 배치한다는 것이다.
• 그러면 어떤 조건이 선행되어야 할까?
  • 블록 레벨 요소일 것 -> 인라인 요소면 안된다.
  • width가 값이 지정되어야 한다 -> width: 100% 이러면 안된다.

그러면 margin: auto 0;은 가능한가?

• 아니 그 원리면 세로 정렬이 되는가 하면 그건아니다. auto는 기본적으로 좌우만 작동한다로 알아두면 된다.
• 세로 정렬은 flexbox나 grid에서 사용된다. 자세한 설명은 생략한다.

text-align: center와의 차이점

• 위에서 이야기했듯이 margin: 0 auto;는 블록 요소에서 사용된다.
• text-align: center는 인라인 요소에서 사용된다.
  
• 출처: GPT...

  
  이것도 GPT가 만들어줌