페이지 가운데 정렬하기 : maring: 0 auto

마진을 위 아래 좌 우 각각 설정할수도 있지만, 

마진(margin)으로 네 영역을 모두 동일하게 지정할 수 있다.

margin : "10px 20px 30px 40px"와 같이 쓰면 된다.

맨 처음 값이 상단(위), 다음값이 우측, 세번째 값이 하단, 네번째 값이 좌측이다. 

방향으로 네 값이 돌아간다.

그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라고도 사용이 가능하다.

"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이다.

동일한 값으로 4번 반복된다면 "10px" 하나만 쓰면 된다.

즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 

좌측과 우측의 여백을 자동으로(auto) 주라는 것임을 알 수 있다.

 

이렇게하면, 왼쪽 마진을 오른쪽 마진을 자동으로 나눠서 균등하게 갖게 된다. 

이렇게, 가운데 정렬이 된다.

margin : "0 auto"; 이렇게 작성하면 되지만, 이상하다면 그냥 풀어서... 

margin-left : auto;

margin-right: auto;

이렇게 작성해줘도 된다. 아니 원래 이렇게 해야 정상이다. 

또한, 이것을 사용하려면 당연하지만, 너비가 존재해야 한다.

너비가 있어야 좌 우를 auto로 맞춰서 가운데 정렬이 될 것 아닌가?

너비를 주지 않으면 당연히 가운데 정렬이 적용되지 않는다.