기업 및 기타 조직을위한 웹 사이트 디자인은 종종 잘 정의 된 브랜딩 및 마케팅 요소를 통합합니다. 웹 사이트에 중심에 놓고 싶은 웹 페이지가있는 경우 HTML과 CSS (Cascading Style Sheet) 코드를 조합하여 직접 웹 페이지를 만들 수 있습니다. 많은 개발자들이 웹 페이지 요소에 스크롤 속성을 사용하여 센터링 속성을 지정하지만 항상 신뢰할만한 것은 아닙니다. 가운데 맞춤 웹 사이트 레이아웃과 스크롤 막대없이 표시 될 페이지를 정의하려면 몇 가지 CSS 선언이 필요합니다.

1.

HTML 페이지를 만듭니다. 이미 작업하고있는 페이지가 있으면 엽니 다. 그렇지 않으면 텍스트 편집기에서 새 파일을 만들고 ".html"확장자로 저장하십시오. 다음 개요를 사용하십시오.

페이지에는 헤드에 CSS 코드 섹션이 있고 본문에 요소가 있습니다. 페이지의 내용은이 요소 안에 있어야합니다. 기존 페이지로 작업하는 경우 CSS 코드를 찾으십시오.이 코드는 페이지 헤드에서 링크 된 별도의 CSS 파일에 저장 될 수 있습니다.

2.

CSS에서 페이지 컨테이너를 확인하십시오. 포함하는 요소의 스타일을 지정하려면 먼저 CSS 코드에서 요소를 식별해야합니다. 페이지 헤드의 스타일 섹션 또는 작업중인 경우 별도의 파일에 다음 선택기 및 개요를 추가하십시오.

컨테이너 {

}

이는 ID 속성으로 "컨테이너"가있는 요소를 식별합니다. 요소의 스타일 선언은 여는 대괄호와 닫는 대괄호 사이에 나타납니다. 또는 다음과 같이 클래스 속성 값을 사용하여 요소를 식별 할 수 있습니다.

. 컨테이너 {

}

그러면 다음 요소가 식별됩니다.

삼.

내용을 가운데 맞추기 위해 요소에 고정 폭을 적용하십시오. 페이지의 요소를 가운데 맞춤하려면 포함 요소의 너비가 고정되어 있어야합니다. 다음과 같이 "container"요소의 CSS 대괄호 사이에 하나를 추가하십시오.

너비 : 800px;

디자인에 맞게 높이 값을 변경하십시오. 이제 여백 속성을 적용하면 페이지 내에서 요소가 가운데에 배치됩니다.

여백 : 자동;

4.

요소가 스크롤되지 않도록합니다. 페이지를 스크롤하지 않으려면 다음과 같이 컨테이너 요소에 height 속성을 적용해야합니다.

높이 : 90 %;

디자인에 맞게 값을 변경하십시오. 컨테이너 내부의 요소가이 공간보다 많은 공간을 차지하고 스크롤을 방지하려면 다음과 같이 요소 오버플로를 숨길 필요가 있습니다.

오버플로 : 숨김;

이렇게하면 페이지 콘텐츠가 사용자 브라우저에서 할당 된 높이보다 많이 차지하는 경우에도 스크롤 막대가 표시되지 않습니다.

5.

페이지를 저장하고 봅니다. 결과를 보려면 브라우저에서 열거 나 사이트에 업로드하십시오. 당신이 원하는 디자인에 도달하기 위해 조정을해야 할 수도 있습니다. 완성 된 콘텐츠를 일단 확인한 후 페이지의 모양이 크게 달라질 수 있으므로 페이지를 테스트하십시오.

팁

• 서로 다른 웹 브라우저는 다양한 방식으로 CSS 규칙을 구현하므로 하나 이상의 페이지를 테스트해야합니다.

경고

• 웹 페이지 요소의 오버플로를 숨기면 일부 사용자가 모든 페이지 콘텐츠를 볼 수 없게 될 수 있습니다.