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


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




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


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


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


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


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


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



<div style="width: 900px; margin: 0 auto;">


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


margin: 0 auto가 중요하다.


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


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


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


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




margin을 쓸때는 


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


margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;


또는 


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


margin: 50px 20px;



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



margin: 50px;



라고 쓰면 된다.


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



Posted by sungho88
,