가장 쉬운 웹 페이지 분할 방법

깨끗하고 체계적이며 읽기 쉬운 웹 페이지를 만들려면 기본 사항을 고수하십시오. HTML 5와 CSS 3는 모든 인쇄기를 얻을 수 있지만 헤더, 단락 및 잘 배치 된 몇 개의 표와 같은 기본 HTML 요소는 페이지를 효과적으로 나누어 메시지를 전달할 수 있습니다. 다음은 사이트 구성에 도움이되는 쉽고 유용한 태그입니다.

헤더

다양한 크기의 제목은 눈을 사로 잡고 독자가 읽고 자하는 정보를 가리 키도록합니다. 메인 타이틀로 시작하기

또는

태그 :

내 사이트에 오신 것을 환영합니다.

하위 수준 헤더를 사용하여 사이트를 섹션으로 세로로 나눕니다. 헤더를 두세 가지 크기로 제한하십시오.

에

3 개 또는 4 개의 섹션으로 구성됩니다.

단락

단락 사용

태그를 사용하여 텍스트를 다음과 같이 섹션으로 나눕니다.

첫 번째 단락 텍스트 ...

두 번째 단락 텍스트 ...

단락을 간결하고 간결하게하십시오. 일반적인 웹 리더는 신속하게 콘텐츠를 스캔하므로 지루하고 다른 링크를 클릭하기 전에 첫 번째 문장 또는 두 번째 문장에서 요점을 읽으십시오.

이미지

이미지를 잘 배치하면 페이지를 논리적 섹션으로 나눌 수 있습니다. 방향을 변경하여 페이지를 분할하십시오. 가능하면 제목을 이미지로 변환하여 스타일과 다양성을 추가하십시오. 이미지는 링크와 버튼을 대체하는 데에도 효과적입니다.

테이블

간단한 표를 사용하여 페이지를 가로로 나눕니다. 제목 뒤에 배치 된 단일 테이블은 효과적으로 페이지를 두 개 또는 세 개의 섹션으로 나눕니다. 다음 HTML 코드를 사용하십시오.

이 표는 페이지의 20 %를 차지하는 왼쪽 열, 다른 20 %를 가운데 열로 취하는 오른쪽 열로 페이지를 채 웁니다. 각 열이 맨 위에서 시작하여 아래로 흐르도록 valign 속성을 기억하십시오. 이 속성을 잊어 버리면 내용은 페이지 중앙에 세로로 정렬됩니다. 내용을 추가 한 다음 프리젠 테이션이 올바르게 보일 때까지 열 너비를 조정하십시오.

선과 테두리

"수평"규칙은 "

여백

빈 줄과 열은 종종 다른 모든 서식보다 페이지를 더 잘 나눕니다. 줄 바꿈은 "

"따옴표없이 빈 단락, 자기 닫는 태그로 코딩 된"

빈 따옴표를 사용하지 않고 빈 테이블 열은 텍스트를 구분하고 레이아웃을 독자에게 더 즐겁게 만듭니다. 빈 공간은 대역폭이 거의 필요하지 않으며 실제로 페이지를 나누는 가장 간단한 방법입니다.