HTML 내용물 가운데 정렬하기

중앙에 오게 하기 위해 많이 시도했지만, 개념이 부족하여 실패했다.

검색한 결과, 생각보다 간단했다.

margin:0 auto;

이 코드를 스타일에 넣어주면 그만이다.

여기서 0 auto 는 "0 auto 0 auto" 의 의미라고 할 수 있다..

패딩 또는 마진을 값을 지정할 때, 상하좌우 4가지 방향으로 각각 설정할 수 있다.

순서는 블럭의 상단 --> 우측 --> 하단 --> 좌측이다. 즉, 시계 방향으로 돌아간다고 생각하면 쉽다.

반복되는 값이라면 줄여서 "5px 10px" 이라고 할 수 있다. 이는 5 10 5 10과 같이 2번 반복되는 것이다.

마찮가지로 상하좌우 모두 동일한 값으로 4번 반복된다면 "5px" 하나만 쓰면 된다.

즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 좌측과 우측의 여백을 자동으로(auto) 주라는 것이다.

이렇게 하면 내용물이 페이지에 중앙에 배치되는 것을 볼 수 있다.