먼저 introWrap 서랍장 안에 left: 50%;을 적용합니다. 그럼 intro 공간을 기준으로 introWrap 서랍장 왼쪽 면이 50% 지점으로 이동합니다. 이는 브라우저 창의 너비를 줄여도 항상 유지됩니다.
다음으로 introWrap 서랍장의 width: 760px의 절반 값인 380px을 음수(-)로 적용합니다. 왼쪽으로 절반만큼 당겨지면서 introWrap 서랍장을 x축 중앙에 둘 수 있습니다.
그림 12-5 left: 50% 적용 상태(좌)와 margin-left: -380px 적용 상태(우)
TIP
이외에도 다른 중앙 정렬 방법이 궁금하다면 다음 링크를 참고하세요.
여러 가지 중앙 정렬 방법 참고 URL https://css-tricks.com/centering-css-complete-guide/
introWrap 서랍장 안에 있는 position: relative;은 다음과 같은 이유로 사용하였습니다.
■ x축 중앙 정렬 작업을 할 때 사용되는 left 속성을 사용하기 위해
■ 로고와 동물 이미지를 안전하게 배치하기 위해