개발자의 개발 블로그

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

마진(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로 맞춰서 가운데 정렬이 될 것 아닌가?

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

홈페이지 개발 시, 화면 영역 크기를 제한하려고 한다.

제한하지 않으면, 아래 이미지와 같이 화면 창 끝과 끝까지 텍스트가 길어져 보기 좋지 않다.

그래서, 대부분의 홈페이지들은 중앙에 내용을 위치하며, 너비의 제한을 둔다.

컨텐츠 화면을 중앙으로 배치하는 방법.. margin : 0 auto;

지금 작성중인 티스토리 글쓰기 화면도 마찮가지다.

어떻게하면, 컨텐츠를 중앙으로 옮길 수 있을까?

간단하다. 하지만 모르면 어렵다.

중앙으로 이동하고자하는 div태그에 다음과 같이 style 속성을  추가해주면 된다.

width는 당연하겠지만, 너비다. 900px만 사용하겠다는 의미이다.

margin: 0 auto가 중요하다.

0은 위아래 마진이다. 위아래는 마진이 필요없으므로 0

auto는 좌우 마진이다. auto는 자동이므로 양옆을 균일한 값으로 마진이 발생한다.

따라서, 정중앙으로 컨텐츠 이미지가 이동하게 된다.

아래 사진을 보면 하단이 적용한 텍스트이다. 보기 더욱 깔끔해졌다.

margin을 쓸때는 

상 하 좌 우 모두 따로따로 사용할 수 있다.

또는 

상하 , 좌우 를 두개로 묶어서 사용할 수 있다.

아니면, 동일하게 마진(패딩)을 적용하고 싶다면, 그냥 

라고 쓰면 된다.

패딩도 똑같은 원리로 적용할 수 있다.

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

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

margin:0 auto;

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

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

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

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

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

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

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

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