HTML - 웹 사이트 구조 이해

수많은 웹사이트들은 다양한 디자인과 구조들을 가지고 있습니다. 그러나, 실제로 내부를 들여다 보면 대부분 비슷한 구조를 가지고 있음을 알수 있습니다. 아래에 있는 그림과 같이, 웹사이트의 디자인 관점에서 크게 4가지로 나눌수 있습니다.

 

헤더 및 푸터의 경우는 모든 페이지에서 같은 내용이 보여지도록 되있습니다. 즉, 한번 만 헤더 및 푸터를 만들어 놓으면 모든 페이지에서 자동으로 보여지게 되는 것입니다. 내용을 변경하는 경우도 마찬 가지 입니다. 해더나 푸터의 내용을 한번 만 변경하면 모든 페이지에서 자동으로 변경이 됩니다. 이 부분에 착안해서 웹사이트에서 항상 보여질 필요가 있는 컨텐츠들을 헤더나 푸터에 넣으면 좋습니다.

 

메인 컨텐츠 부부은 웹사이트의 실제 내용이 들어가는 부분 입니다. 만약 ABOUT US 페이지라면 회사 혹은 단체, 개인의 소개가 들어가는 부분 입니다. 메인 컨텐츠는 선택한 테마에 따라서 디자인 요소가 달라질수 있습니다. 잘 만들어진 디자인테마들은 거의 대부분 DRAG & DROP 형태의 페이지 작성 툴(Page Builder)를 가지고 있습니다. 쉽게 여러분이 원하시는 형태로 컨텐츠를 페이지에 입력하시고 다양한 방법으로 표현이 가능합니다.

 

사이드바는 메인컨텐츠의 왼쪽 혹은 오른쪽에 나타나는 부분으로 일반적으로 전체 화면 넓이의 20~30 % 정도의 넓이를 갖습니다. 사이드바의 경우는 페이지마다 ON/OFF를 할수 있습니다. 또한, 사이드바를 여러게 만들고 페이지마다 다른것을 넣을수도 있습니다. 사이드바에는 주로 최근 게시물 리스트, 배너, 메인메뉴 이외의 특별한 목적의 메뉴등을 보여줄수 있습니다.

웹사이트 디자인 영역별구분

 

 

HTML5의 페이지 구조 태그를 사용하여 만들 수 있는 권장 레이아웃 입니다.