워드프레스 헤더, 푸터, 바디의 개념

wordpress

2023-10-21 02:47:50

페이지의 헤더, 푸터, 바디

웹사이트의 어떤 한 페이지를 방문했을 때, 제일 큰 구성이 어떻게 될까요?

바로 헤더, 바디, 푸터 입니다. 말 그대로 머리, 몸, 발 이라고 생각하시면 됩니다. 제 페이지를 예로 들어볼게요!

위 캡쳐는 저의 블로그 페이지를 캡쳐한건데요, PC 버전으로 캡쳐했고 임의로 수정한 것이라 조금 다르게 보일 수 있습니다.

자 이렇게 보시면, 맨 위에 붉은색으로 표시된 내용이 헤더라고 보시면 됩니다.

그 아래에 파란색으로 표시된 칸이 바디이구요,

제일 아래에 검은색 부분이 푸터입니다.

사진으로 확인하니 어떤 느낌인지 감이 오시죠? 웹서핑을 하다보면 흔히 보이는 구성입니다.

저의 경우는 페이지를 구성하는 기본이 이 세가지라고 생각합니다. 사람에 따라 다르게 나눌 수도 있겠지만, 결국 보여지는 것에서는 이렇게 나눠지는 것 같다는 생각입니다!

이 안에서 스타일을 어떻게 적용하느냐에 따라서 나만의 디자인을 만들 수 있는 것입니다..

그럼 이제 각각 어떤 느낌인지 알아보도록 하죠!

헤더 (Header)

헤더라고 하면 일반적으로 어떤 것들로 구성되어 있을까요?

사실 이것에 대한 대답은 정해져있지 않습니다. 어떤식으로 생각하고 디자인하느냐에 따라서 천차만별로 달라지기 때문이죠.

그래도 보편적인 예를 들어보자면,

사이트의 로고

메인메뉴의 구성

로그인/로그아웃 버튼

회원가입 버튼

검색 버튼

소셜 링크

정도가 되지 않을까 싶네요. 이 글을 보신 분도 아마 그렇게 생각하실거에요!

제 블로그의 경우에는 왼쪽엔 블로그 로고가 위치하고, 가운데 메인메뉴, 오른쪽엔 검색 버튼을 넣어두었습니다.

그리고 아래로 스크롤 시 같이 따라오게 설정해 두었죠. 설정하는 방법은 추후 포스팅 할 예정입니다.

별로 어렵지 않죠?

바디 (Body)

그렇다면 바디는 어떨까요?

보통 우리가 컨텐츠를 본다고 하면, 이 바디에 내용이 들어가게 됩니다.

내가 찾거나 보고싶은 내용은 이 바디에 표시되는거죠.

결국 헤더와 푸터 바디의 경우, 웹사이트를 구성하는 액자같은 틀이고 개중에서 내용을 표시하는 것이 바디라고 생각하시면 됩니다.

위 캡쳐는 제 블로그 내에 ‘Blog’ 페이지 입니다.

왼쪽에 서브메뉴를 보시면, 현재 작성일 기준으로는 Blog 내에 메뉴가 Daily, Review, Wordpress 로 세가지가 존재하는걸 볼 수 있죠.

그리고 가운데에는 제가 올려놓은 포스팅들이 카테고리별로 나열되어 있습니다.

아래 사진도 한번 같이 확인해보겠습니다.

위 캡쳐는 Daily 카테고리 안에 있는 포스트를 클릭하여 진입한 화면입니다. 이전 캡쳐와 다른 점을 아시겠나요?

이전 페이지에서는 바디의 내용이 서브메뉴와 포스팅 나열로 나뉘어졌다면, 현재 캡쳐에서는 서브메뉴/포스팅 내용/Table of contents 로 나뉘어진걸 확인하실 수 있습니다.

이 설정은 제가 따로따로 적용한 것이고, 여러분도 하실 수 있습니다. 이런식으로 페이지, 포스트 별로 바디의 디자인을 다르게 할 수 있다는 것을 보여드리고 싶었습니다.

푸터 (Footer)

이번 주제의 마지막인 푸터입니다. 푸터는 보통 어떤 내용을 포함할까요?

앞전에 말씀드렸듯이 이는 디자인에 따라서 다를 수 있고, 푸터가 없는 경우도 있습니다. 예를 들어 유튜브 홈페이지의 경우 아래로 스크롤을 할 때 마다 새로운 컨텐츠를 로딩하면서 아래로 계속 내려가게 합니다(Infinity Scroll). 이런 경우에는 푸터가 있을 수 없겠죠.

일반적으로 푸터에는 회사 홈페이지라면 회사 정보, 이용약관 등이 들어갈 수 있겠고, 소셜링크나 사이트맵, 로고 등이 들어갈 수 있겠네요.

제 블로그의 경우에는 개인 블로그이기도 하고 제가 심플한 것을 좋아해서 별다른 내용을 넣지는 않았습니다.

제 블로그 로고의 심볼과, 제 소셜링크를 넣어놨습니다.

요약정리

헤더, 바디, 푸터에 대해서 조금은 이해가 되셨나요?

어려운 개념은 아니지만 저는 처음 접했을 때 쉽게 느껴지진 않더라구요.

결과적으로 헤더, 바디, 푸터는 웹사이트의 액자 틀과 비슷하다고 생각하시면 됩니다.

액자 틀을 모두 만들어놓고 나면, 그 글 내용에는 텍스트만 집어넣더라도 저 헤더/푸터/바디 의 틀 안에서 표시되는거죠.

이 3요소가 없는 상태에서 텍스트를 작성한다고 한들, 흰 바탕에 글자만 쓰여있는 모습을 보게 되실겁니다.

이 헤더, 푸터, 바디를 프로그래밍이 아닌 클릭 몇번으로 손쉽게 구현해줄 수 있도록 도와주는게 워드프레스이고,

그 워드프레스를 조금 더 활용하기 편하도록 해주는 플러그인이 엘리멘토,

더 많은 기능을 쉽게 구현할 수 있도록 확장성을 넓혀주는 플러그인이 크로코블럭 이라고 생각하시면 됩니다. (제가 사용하는 플러그인 기준입니다)

그럼 또 다음 글에서 찾아뵙겠습니다.

댓글 목록

아직 댓글이 없습니다.