필요 항목
HTML 및 CSS를 사용하여 웹 페이지의 레이아웃을 올바로 지정하는 방법에 대한 자세한 내용은 HTML 레이아웃을 사용하여 작업하는 방법 및 CSS를 사용하여 웹 페이지의 레이아웃 지정 튜토리얼을 참조하십시오.
웹 페이지를 구축할 때 콘텐츠는 기본적으로 왼쪽에 정렬됩니다. 중앙에 정렬된 레이아웃은 미적으로 더 뛰어날 뿐만 아니라 사용자가 디자인에 더욱 집중하게 만듭니다. 이를 위해서는 페이지의 구조를 HTML로 만든 다음 브라우저에서 중앙에 정렬되도록 CSS를 적용하는 것이 중요합니다.
<body> 태그 안의 모든 요소 앞과 뒤에 <div> 태그를 추가합니다. <div> 태그가 모든 콘텐츠의 앞과 뒤를 감싼다는 의미에서 <div>의 id를 wrapper 라고 합니다. </div> 닫는 태그를 잊지 마십시오.
페이지에 포함되는 모든 콘텐츠의 앞과 뒤에 <div> 태그를 추가하면 CSS를 적용하여 섹션 전체를 손쉽게 제어할 수 있습니다. 이 예제의 경우 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로 설정되어 있어 양쪽으로 공간이 동일하게 분할됩니다. 그러면 레이아웃이 페이지 중앙에 정렬됩니다.
브라우저에서 미리보기(Preview in Browser)를 클릭하고 원하는 브라우저를 선택하여 중앙에 정렬된 새로운 레이아웃을 확인합니다.
변경 내용을 확인하려면 파일을 저장해야 합니다.