HTML 및 CSS를 사용하여 웹 사이트를 중앙에 정렬하는 방법을 살펴보세요.

웹 사이트 중앙에 정렬된 페이지 콘텐츠를 표시하는 그래픽 디자인

HTML 및 CSS를 사용하여 웹 페이지의 레이아웃을 올바로 지정하는 방법에 대한 자세한 내용은 HTML 레이아웃을 사용하여 작업하는 방법CSS를 사용하여 웹 페이지의 레이아웃 지정 튜토리얼을 참조하십시오.

페이지 레이아웃을 중앙에 놓은 후 캡처한 위아래 스크린샷

웹 페이지를 구축할 때 콘텐츠는 기본적으로 왼쪽에 정렬됩니다. 중앙에 정렬된 레이아웃은 미적으로 더 뛰어날 뿐만 아니라 사용자가 디자인에 더욱 집중하게 만듭니다. 이를 위해서는 페이지의 구조를 HTML로 만든 다음 브라우저에서 중앙에 정렬되도록 CSS를 적용하는 것이 중요합니다.

HTML 소스 코드와 CSS 스타일시트 간 전환을 위해 버튼 클릭하기

시작하기 전에

프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 center-website.html을 열고 분할 뷰에서 소스 코드(Source Code)를 확인합니다.

분할 뷰를 선택하여 파일 패널에서 소스 코드 열기

"wrapper" div 만들기

<body> 태그 안의 모든 요소 앞과 뒤에 <div> 태그를 추가합니다. <div> 태그가 모든 콘텐츠의 앞과 뒤를 감싼다는 의미에서 <div>idwrapper 라고 합니다. </div> 닫는 태그를 잊지 마십시오.

페이지에 포함되는 모든 콘텐츠의 앞과 뒤에 <div> 태그를 추가하면 CSS를 적용하여 섹션 전체를 손쉽게 제어할 수 있습니다. 이 예제의 경우 CSS를 사용하여 모든 콘텐츠가 중앙에 정렬되도록 합니다.

HTML

<div id="wrapper">
(콘텐츠)
</div>

HTML 소스 코드에서 래퍼 div 만들기

CSS를 사용하여 여백 설정

style.css를 열어 /* Start Here */ 섹션을 찾습니다.

보기를 선택하고 수직 분할을 선택 해제하면 코드 뷰와 라이브 뷰가 세로로 나란히 표시되므로 콘텐츠가 중앙에 정렬되는 것을 손쉽게 확인할 수 있습니다.

HTML에서 <div>의 id와 일치하는 margin: 속성을 #wrapper라는 선택기에 추가합니다.

margin 속성은 top, right, bottom, left의 4개 값을 허용합니다. 전체 CSS는 margin: 0 auto 0 auto;이지만 topbottom 값이 동일하고 leftright 값이 동일하기 때문에 다음과 같이 줄일 수 있습니다.

margin: 0 auto;

위 또는 아래에 여유 공간이 없으므로 위쪽 및 아래쪽 값은 0입니다. 왼쪽 및 오른쪽 여백은 auto로 설정되어 있어 양쪽으로 공간이 동일하게 분할됩니다. 그러면 레이아웃이 페이지 중앙에 정렬됩니다.

CSS

#wrapper {
    ...
    margin: 0 auto;
}

Google Chrome 미리보기로 페이지가 어떻게 표시되는지 확인하기

브라우저에서 미리보기(Preview in Browser)를 클릭하고 원하는 브라우저를 선택하여 중앙에 정렬된 새로운 레이아웃을 확인합니다.

변경 내용을 확인하려면 파일을 저장해야 합니다.

Adobe 로고

내 계정 로그인