강좌 및 설정/블로그 만들기

홈페이지 구조(레이아웃)와 사이드바

웹 개발자의 비상 2024. 4. 16. 18:51

이번에 알려드리고자 하는 것은 사이드바입니다.

사이드바를 이해하기 전에 일반적인 홈페이지 구조에 대해서 알아보겠습니다. 

 

남양주시청 홈페이지 구조

 

일반적으로 홈페이지는 그림과 같은 구조의 형태로 만들어집니다.

 

  • header 영역은 보통 상단에서 내비게이션 메뉴들로 구성되고 각 페이지를 찾아갈 수 있는 역할을 합니다.
  • aside는 좌측이나 우측 위치할 수 있으며 같은 분류의 내용들 중 세부내용을 연결하는 역할을 합니다.
  • footer 부분은 카피라이트와 주소, 연락처등의 회사 정보를 나타내줍니다.
  • contents 영역이 실제로 내용이 채워지는 부분입니다.

 

header와 footer는 동일한 내용으로 어느 페이지에서나 존재합니다. aside는 대분류의 메뉴들에서는 동일하게 존재하며 대분류가 바뀔 경우에만 바뀌게 되죠. 예로 남양주시청 사이트의 "종합민원"에 속하는 세부메뉴들에는 모두 동일한 aside로 나타납니다. "시민참여"라는 대분류의 메뉴로 바꾸기에 되면 바뀌게 되겠죠

 

블로그에서도 이렇게 aside의 내용을 설정할 수 있습니다. 티스토리 블로그에서는 aside를 "사이드바"로 표현하고 있습니다. 사이드바는 블로그의 스킨별로 다르게 존재할 수 있습니다. 보통은 우측에 존재하지만 좌측에 있는 경우, 숨겨진 경우도 있습니다.

 

설정을 하기 전에 블로그 홈에서 티스토리 블로그의 구조를 보겠습니다.

 

티스토리 블로그 구조

 

그림과 같은 구조입니다. 사이드바가 우측에 있죠. 사이드바의 내용에서 첫 번째 등장하는 녀석은 지금까지 글에 분류를 나누기 위해 만들었던 카테고리 메뉴입니다. 그리고 밑으로도 뭐가 있죠. 최근글|인기글, 공지사항, 최근댓글이 있을 수도 있고요...

 

그럼 어떻게 관리하는지 보겠습니다. 관리자페이지화면과, 블로그홈화면을 여태껏 해왔던 방식으로 같이 띄워 주세요

2024.04.09 - [강좌 및 설정/블로그 만들기] - 내 티스토리 블로그 접속하기

 

내 티스토리 블로그 접속하기

티스토리 블로그 접속하기. 티스토리 블로그를 개설후에 내 티스토리 블로그에 접속하는 방법을 안내합니다. 접속하는 방법은 다음 사이트를 이용하는 방법과 블로그 주소를 직접 타이핑해서

dance2i.tistory.com

 

반응형

 

관리자 페이지와 블로그홈화면 탭으로 띄우기

 

그림처럼 관리자페이지와 홈화면을 띄우시시고 관리자페이지를 클릭해서 관리자페이지로 접속합니다.

 

사이드바

 

좌측 메뉴에서 꾸미기 밑에 사이드바를 클릭하여 사이드바화면 접속합니다.

 

사이드바 화면

 

좌측이 티스토리 사용할 수 있는 기본 모듈이고 우측은 현재 블로그에서 사용 중인 사이드입니다.

 

사이드바의 관리자와 블로그에서의 화면

 

관리자페이지에서의 사이드바와 실제 블로그에서의 사이드바의 화면은 위와 같이 연결이 되어 있습니다.

관리자에서 설정된 내용들이 블로그화면 사이드바영역에 나타나고 있는 것이죠. 

사이드바가 어떤 녀석인지 이해가 됐다면 사용법은 간단합니다.

 

사이드바에 추가, 삭제, 이동
  • 사이드메뉴에서 빼고 싶은 내용이 있다면 우측 사이드바1에서 " - " 버튼을 클릭합니다.
  • 내용이 빠지고 내용은 우측 기본 모듈로 이동 됩니다. 다시 추가하고 싶다면 기본 모듈에서 "+" 버튼을 클릭합니다.
  • 우측 사이드바1 상단에 다시 추가됩니다.
  • 사이드바1의 글자옆 선 4개의 아이콘에 마우스를 위치한 후 클릭드래그하여 순서를 정해줍니다.
  • 같은 방법으로 기본모듈에서 최근댓글도 사이드바1에 추가해 줍니다.
  • 원하는 내용으로 사이드바가 완성되었다면 반드시 변경사항 저장 버튼을 클릭하여 완료합니다.

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

 

이제 블로그 홈에서 확인만 남았습니다.

 

사이드바 적용 확인

 

 

그림의 순서로 확인하시면 최근댓글이 사이드바에 추가된 것을 확일할 수 있습니다.

 

 

 

 

 

 

728x90