홈페이지 개발 시, 화면 영역 크기를 제한하려고 한다.
제한하지 않으면, 아래 이미지와 같이 화면 창 끝과 끝까지 텍스트가 길어져 보기 좋지 않다.
그래서, 대부분의 홈페이지들은 중앙에 내용을 위치하며, 너비의 제한을 둔다.
컨텐츠 화면을 중앙으로 배치하는 방법.. 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;
라고 쓰면 된다.
패딩도 똑같은 원리로 적용할 수 있다.
'개발 > HTML' 카테고리의 다른 글
| [HTML] HTML에서 CSS파일 사용시, class와 id 확장 연산자 (0) | 2018.05.01 |
|---|---|
| [HTML] HTML로 테이블(Table) 생성하기... (0) | 2018.05.01 |
| [HTML] 홈페이지에 다음 지도 API를 사용해서 맵 삽입하는 방법... (0) | 2018.05.01 |
| [HTML] 비주얼 스튜디오 코드로 HTML 코드 작성하기 (0) | 2018.05.01 |
| [HTML] 비주얼 스튜디오 코드에서 HTML 브라우저로 실행하기 (0) | 2018.05.01 |
