HTML 및 CSS를 사용하여 웹 사이트를 중앙에 정렬하는 방법을 살펴보세요.
필요 항목
HTML 및 CSS를 사용하여 웹 페이지의 레이아웃을 올바로 지정하는 방법에 대한 자세한 내용은 HTML 레이아웃을 사용하여 작업하는 방법 및 CSS를 사용하여 웹 페이지의 레이아웃 지정 튜토리얼을 참조하십시오.
웹 페이지를 구축할 때 콘텐츠는 기본적으로 왼쪽에 정렬됩니다. 중앙에 정렬된 레이아웃은 미적으로 더 뛰어날 뿐만 아니라 사용자가 디자인에 더욱 집중하게 만듭니다. 이를 위해서는 페이지의 구조를 HTML로 만든 다음 브라우저에서 중앙에 정렬되도록 CSS를 적용하는 것이 중요합니다.
시작하기 전에
프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 center-website.html을 열고 분할 뷰에서 소스 코드(Source Code)를 확인합니다.
"wrapper" div 만들기
<body> 태그 안의 모든 요소 앞과 뒤에 <div> 태그를 추가합니다. <div> 태그가 모든 콘텐츠의 앞과 뒤를 감싼다는 의미에서 <div>의 id를 wrapper 라고 합니다. </div> 닫는 태그를 잊지 마십시오.
페이지에 포함되는 모든 콘텐츠의 앞과 뒤에 <div> 태그를 추가하면 CSS를 적용하여 섹션 전체를 손쉽게 제어할 수 있습니다. 이 예제의 경우 CSS를 사용하여 모든 콘텐츠가 중앙에 정렬되도록 합니다.
HTML
<div id="wrapper">
(콘텐츠)
</div>
CSS를 사용하여 여백 설정
style.css를 열어 /* Start Here */ 섹션을 찾습니다.
보기를 선택하고 수직 분할을 선택 해제하면 코드 뷰와 라이브 뷰가 세로로 나란히 표시되므로 콘텐츠가 중앙에 정렬되는 것을 손쉽게 확인할 수 있습니다.
HTML에서 <div>의 id와 일치하는 margin: 속성을 #wrapper라는 선택기에 추가합니다.
margin 속성은 top, right, bottom, left의 4개 값을 허용합니다. 전체 CSS는 margin: 0 auto 0 auto;이지만 top 및 bottom 값이 동일하고 left 및 right 값이 동일하기 때문에 다음과 같이 줄일 수 있습니다.
margin: 0 auto;
위 또는 아래에 여유 공간이 없으므로 위쪽 및 아래쪽 값은 0입니다. 왼쪽 및 오른쪽 여백은 auto로 설정되어 있어 양쪽으로 공간이 동일하게 분할됩니다. 그러면 레이아웃이 페이지 중앙에 정렬됩니다.
CSS
#wrapper {
...
margin: 0 auto;
}
브라우저에서 미리보기(Preview in Browser)를 클릭하고 원하는 브라우저를 선택하여 중앙에 정렬된 새로운 레이아웃을 확인합니다.
변경 내용을 확인하려면 파일을 저장해야 합니다.
