티스토리 블로그를 시작하고 가장 신경쓰인 부분이 블로그 레이아웃입니다. 생각보다 많은 스킨이 제공되지 않더라고요. 그래서 일단 가장 많이 사용된다는 Odyssey 스킨을 적용한 후, 제가 직접 커스텀을 하기로 결정했습니다. 여러 커스텀 중 하나가 바로 sticky sidebar 입니다.
- ❓sticky sidebar란?
sticky sidebar란 페이지를 스크롤할 때 사이드바가 화면의 일정 위치에 고정되어 따라오는 UI 요소를 말합니다. 즉, 사용자가 페이지를 아래로 스크롤할 때 사이드바가 페이지를 스크롤함에 따라 함께 움직이지 않고, 설정된 위치에 "고정"되어 계속 화면에 보이게 되는 기능입니다. 이는 주로 내비게이션 메뉴나 중요한 정보가 담긴 요소에 사용됩니다.
저는 블로그 글을 빠르게 훑기 위해서는 toc(table of contetns)이 필요하다 생각했습니다. 그리고 저는 개인적으로 이런 toc이 사이드바 영역에 계속해서 스크롤에 반응하며 따라오는 형식을 선호합니다. 전체적인 구조를 파악해 블로그 글을 더 쉽게 이해할 수 있게 도와주기 때문입니다. 그래서 직접 html, css, javascript를 수정하여 이런 기능을 구현했습니다.
준비물
일단 저의 상황에 맞게 커스텀했으므로 각자의 상황에 맞게 수정하셔야 오류 없이 사용 가능할 것 같습니다.
- 사용 중인 티스토리 스킨
Odyssey - 티스토리 제공 사이드바 사용 여부
사용하지 않음 - main 클래스 최대 가로 길이
900px. 이 부분은 제가 직접 CSS 파일을 수정했었는지 기존 설정이 이렇게 되어있는지 확실하지는 않습니다. 제 기억으로는 main 컨텐츠(블로그 글) 양 옆에 공백을 넣어 sticky sidebar와 main 컨텐츠가 겹치지 않게 일부로 넣었던 것 같습니다.
이 정도면 준비는 완료되었습니다.
코드
티스토리 관리 페이지에서 왼쪽 사이드바를 확인하면 여러 메뉴가 존재하는데요. 여기서 '꾸미기 > 스킨 편집'을 이용하면 html과 css를 수정할 수 있는 기능을 제공하고 있습니다. 해당 기능을 활용해 html, css 파일을 수정해 줍시다.
html
1. id가 container인 div 검색
html 코드를 클릭 후 ctrl+f 검색키를 활용해 container를 검색합니다.
( html 코드가 너무 복잡해서 이해가 한 눈에 보이지 않은 경우 div 혹은 aside 태그가 시작되는 부분의 왼쪽 숫자들이 써있는 부분의 접기 기능을 활용하시면 해당 부분이 접어지면서 전체 구조를 더 쉽게 확인할 수 있습니다. )
2. 커스텀 스티키 사이드바 코드 추가
아마 기본 Odyssey를 사용하고 있는 분들은 가운데 제가 직접 넣은 스티키 사이드바 코드는 없을 것입니다. 아래 코드를 복사 붙여넣어줍니다. (이때 위치는 <div id="container"> 하위에만 넣으면 됩니다. 하지만 혹시 모를 오류가 신경쓰인다면 저와 동일한 위치에 넣어주세요 )
<!-- 스티키 사이드바 -->
<div id="stickySidebar" class="sticky-sidebar">
<div class="sticky-sidebar-title">목차</div>
<div id="stickyList" class="sticky-list">
</div>
</div>
<script>
const stickySidebar = document.getElementById('stickySidebar');
const stickyList = document.getElementById('stickyList');
const headings = document.querySelectorAll('.contents_style h2, .contents_style h3, .contents_style h4');
if (headings.length === 0) {
stickySidebar.style.display = "none";
} else {
stickySidebar.style.display = "block";
}
headings.forEach((heading, index) => {
const stickyItem = document.createElement('div');
const anchor = document.createElement('a');
const id = `heading-${index}`;
heading.id = id;
anchor.textContent = heading.textContent;
anchor.href = `#${id}`;
anchor.classList.add('sticky-item-a');
if (heading.tagName === 'H2') {
anchor.classList.add('h2-sticky-item-a');
stickyItem.appendChild(anchor);
stickyItem.classList.add('h2-sticky-item');
stickyList.appendChild(stickyItem);
} else if (heading.tagName === 'H3') {
anchor.classList.add('h3-sticky-item-a');
stickyItem.appendChild(anchor);
stickyItem.classList.add('h3-sticky-item');
stickyList.appendChild(stickyItem);
} else if (heading.tagName === 'H4') {
anchor.classList.add('h4-sticky-item-a');
stickyItem.appendChild(anchor);
stickyItem.classList.add('h4-sticky-item');
stickyList.appendChild(stickyItem);
}
});
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
stickySidebar.style.transform = `translateY(${scrollY}px)`;
});
function resizeStickSidebar () {
const width = window.innerWidth;
stickySidebar.style.width = ((width - 940) / 2) + 'px';
if (((width - 940) / 2) > 300) {
stickySidebar.style.right = ((((width - 940) / 2)-300)/2) + 'px';
} else {
stickySidebar.style.right = '20px';
}
}
resizeStickSidebar();
window.addEventListener('resize', resizeStickSidebar);
</script>
<!-- // 스티키 사이드바 -->위 코드는 sticky sidebar로 사용할 부분의 html 코드와 해당 부분의 동작을 구현한 자바스크립트 코드로 구성되어 있습니다. 만약 해당 부분을 조금 더 수정하고 싶다면 어떻게 해야하는지도 가장 아래에 설명드리겠습니다.
html 코드 수정은 완료되었습니다.
css
1. 커스텀 CSS 코드 추가
아래 css 코드를 추가해줍니다. css 파일에 전혀 모르시는 분은 이상한 곳에 코드를 집어 넣어 문제가 될 수 있으니 해당 부분을 그냥 css 코드의 가장 위 쪽에서 엔터를 쳐준 후 해당 부분을 복사 붙여넣어줍니다.( 중괄호로 설어되어있는 다른 css 설정 안에만 안 들어가면 된다는 의미입니다 )
/* 스티키 사이드바 */
@media (min-width: 1200px) {
.sticky-sidebar {
position: absolute;
z-index: 100;
max-width: 300px;
top: 50px;
right: 20px;
background: white;
padding: 20px;
border:none;
border-radius: 15px;
transition: transform 0.2s ease;
box-shadow: 2px 2px 5px 3px rgb(0, 0, 0, 0.1)
}
.sticky-sidebar-title {
text-align: center;
margin-bottom: 10px;
color: rgb(0, 140, 255);
font-size: large;
font-weight: bold;
}
.sticky-item-a {
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
}
.sticky-item-a:hover {
background-color: rgb(0, 140, 255, 0.5);
}
.h2-sticky-item {
padding-left: 0px;
}
.h2-sticky-item-a {
font-weight: bold;
}
.h3-sticky-item {
padding-left: 0px;
}
.h3-sticky-item-a {
font-weight: normal;
}
.h4-sticky-item {
padding-left: 15px;
}
.h4-sticky-item::before {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
font-size: 12px;
}
.h4-sticky-item-a {
font-weight: normal;
font-size: small;
}
}
결과 화면
성공적으로 블로그 글을 읽을 때 스크롤을 따라서 내려오는 sticky sidebar를 구현할 수 있었습니다.
추가 커스텀
위 결과에서 글자 크기가 마음에 안 들거나, 색깔이 마음에 안 들수도 있습니다. 이런 경우 쉽게 커스텀하기 위해 주요 부분을 설명드리겠습니다.
sticky sidebar 배경색, 크기를 수정하고 싶어요
sticky sidebar 관련 css 설정은 다음 부분입니다. 해당 파일에서 배경색, 크기, 그림자 등을 수정하시면 됩니다.
.sticky-sidebar {
position: absolute;
z-index: 100;
max-width: 300px;
top: 50px;
right: 20px;
background: white;
padding: 20px;
border:none;
border-radius: 15px;
transition: transform 0.2s ease;
box-shadow: 2px 2px 5px 3px rgb(0, 0, 0, 0.1)
}
글자 색, 크기, 두께를 수정하고 싶어요
sticky sidebar 상 글자를 커스텀하기 위해서는 css 파일의 다음 부분을 수정하면 됩니다.
- h2-sticky-item-a
- h3-sticky-item-a
- h4-sticky-item-a
티스토리 글쓰기를 이용해 블로그 글을 작성할 때 제목1, 제목2, 제목3 이런 식으로 h태그를 활용할 수 있게 도와줍니다. 이때 제목1부터 순서대로 h2, h3, h4 태그를 이용하는데요. 제가 만든 코드는 이런 태그 정보를 긁어와 sticky sidebar 위에 표시하는 형식입니다. 그래서 제목1 스타일은 h2-sticky-item-a라는 클래스명 css로 관리하고, 제목2는 h3-sticky-item-a, 제목3은 h4-sticky-item-a라는 클래스명을 사용하게 했습니다.
다음은 제목2를 이용한 부분의 글자 두께를 더 두껍게 만드는 예제입니다.
/* 수정 전 */
.h3-sticky-item-a {
font-weight: normal;
}
/* 수정 후 */
.h3-sticky-item-a {
font-weight: bold;
}'목차'라고 쓰인 부분을 수정하고 싶어요
'목차'라고 쓰인 부분은 html 코드를 보시면 확인할 수 있습니다.
목차라는 텍스트를 다른 글자로 수정하고 싶다면 해당 html 코드를 수정하면 되겠조? 또한 해당 글자의 스타일을 수정하고 싶다면 위 사진에서 볼 수 있듯 클래스명이 sticky-sidebar-title이라고 되어있는 부분을 css 파일에서 수정하면 됩니다. css 파일 수정 방법은 위에서 알려드린 예제와 비슷합니다.
마우스 올리면 배경색이 변하는 기능을 수정하고 싶어요
마우스를 올렸을 때 배경색이 하늘색으로 변하는 기능은 css 파일에서 구현되어 있습니다.
.sticky-item-a {
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
}
.sticky-item-a:hover {
background-color: rgb(0, 140, 255, 0.5);
}기존의 설정의 주요 기능은 다음과 같습니다.
- sticky-item-a 부분의 transition
배경색을 0.2초의 순간으로 천천히 변하게하는 애니메이션 효과를 넣겠다! - sticky-item-a:hover
마우스를 올렸을 때(hover) 배경색을 rgb(0, 140, 255, 0.5)으로 수정하겠다!
예를 들어 마우스를 올렸을 때 글자 크기를 더 크게 만드는 예제입니다.
.sticky-item-a {
text-decoration: none;
color: inherit;
transition: font-size 0.2s ease;
}
.sticky-item-a:hover {
font-size: large;
}
에러가 난다면?
저와 동일한 설정이 아니라면 에러가 날 수도 있습니다. 혹은 에러가 아니지만 에러라고 느낄 수도 있습니다. 예상해본 에러에 대해 미리 몇 가지 작성해보겠습니다.
sticky sidebar가 안 보이는데요?
sticky sidebar관련 css 파일을 보시면