[티스토리 꾸미기] 북클럽 스킨 포스팅 글제목(article title) 상단 헤더에 고정하기(스크롤 시 자연스런 전환)

북클럽 스킨 글제목 상단 고정 (스크롤 전환)

∶

블로그에 긴 글을 쓰다 보면 독자들이 스크롤을 내리면서 "내가 지금 무슨 글을 읽고 있었지?" 하고 길을 잃는 경우가 종종 있습니다. 이때 화면 상단에 현재 읽고 있는 포스팅의 진짜 제목이 스르륵 나타나 고정된다면 독자의 편의성(UX)을 크게 높일 수 있습니다.

특히 티스토리 베스트셀러 스킨인 북클럽(Book Club) 스킨은 기본적으로 상단 고정 헤더가 없어서 이 기능을 추가했을 때 드라마틱한 효과를 볼 수 있는데요.

오늘은 스크롤을 내릴 때 원래 블로그 로고는 부드럽게 사라지고, 반투명한 블러 배경 위에 포스팅 진짜 제목이 정중앙(또는 좌측)에 스르륵 나타나는 고급스러운 고정 헤더 구현 방법을 공유해 드립니다.

메인 홈이나 카테고리 목록에서는 작동하지 않고, 오직 포스팅 본문 글에서만 완벽하게 작동하는 가장 최적화된 코드입니다.

📌 알림

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

이 코드는 웹상에 공개된 적 없는 직접 제작한 북클럽 스킨 전용 코드입니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

1. '글제목 상단 고정' 미리보기

☑

1. 슬라이드 스타일

현재 제 블로그에도 적용되어 있는 방식입니다.

2. 페이드 인/아웃 스타일.

이 코드는 제 이전 포스팅인 '북클럽 스킨 상단 메뉴 고정하기(CSS)'와 '헤더의 메뉴 삭제로 깔끔한 블로그 만들기'를 먼저 설정하신 후에 적용해야 '미리보기'처럼 작동합니다.

💡 아직 설정을 안 하셨다면 먼저 아래 코드를 적용 후 본 코드를 사용해 주세요.

티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)

북클럽 스킨 상단 헤더(메뉴) 고정하기티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다. 수정 방법은 CSS에서 #h

galam.tistory.com

[티스토리 꾸미기] 북클럽 스킨 헤더의 메뉴 삭제로 깔끔한 블로그 만들기

티스토리 '북클럽 스킨' 헤더의 메뉴 삭제하기✚티스토리 블로그 스킨 중 북클럽 스킨은 깔끔한 레이아웃과 세련된 디자인 덕분에 많은 분들이 선호합니다.하지만 사용하다 보면 “조금 더 깔

galam.tistory.com

2. HTML 설정 (제목 헤더 구조 잡기)

☑

가장 먼저 제목이 표시될 상단 헤더 틀을 만들어 줍니다.

HTML 코드를 수정하기 위해 '관리자 홈'에서 꾸미기 → 스킨 편집 → HTML 편집 → HTML 탭으로 이동합니다.

여기서 가장 중요한 핵심은 코드가 들어갈 위치입니다. 스킨 구조에 따라 레이아웃이 깨지거나 오작동하는 것을 방지하기 위해, 반드시 아래의 <body> 태그 바로 아랫줄에 코드를 삽입해 주어야 합니다.

Ctrl + F를 눌러 아래의 시작 태그를 찾습니다.

<body

찾으셨다면, 이 길다란 <body> 태그 바로 아랫줄에 아래 코드를 그대로 넣어준 후, [적용] 버튼을 눌러 저장합니다. .

💡 (중요)

코드를 붙여넣으신 뒤, 치환자 [*##_article_rep_title_##*] 양 끝에 있는 별표(*)는 반드시 지우고 저장해 주셔야 정상적으로 제목이 노출됩니다.

<!-- ==================================
   헤더 포스팅 타이틀 코드 1
   Created by Galam
   For Tistory Book Club Skin   
================================== -->
<div class="header-title">
  <div class="header-title-container">
    <a href="#container">[*##_article_rep_title_##*]</a>
  </div>
</div>
<!-- 헤더 포스팅 타이틀 끝 -->

이렇게 <body> 시작 지점에 코드를 배치해야 페이지가 로드될 때 자바스크립트가 헤더 영역을 가장 빠르고 안전하게 인식하며, 다른 요소들과의 렌더링 충돌도 예방할 수 있습니다.

💡 더 간단한 방법! (메모장 파일 활용)

만약 위 코드를 직접 삽입하고 별표(*)를 찾아서 지우는 과정이 다소 번거롭거나 복잡하게 느껴지신다면, 아래에 첨부해 드린 메모장(.txt) 파일을 다운로드하여 그대로 복사·붙여넣기 해보세요! 똑같이 아주 잘 작동합니다.

헤더 포스팅 타이틀 코드 1.txt

0.00MB

3. JavaScript 설정 (페이지 판별 및 타이틀 동적 복사)

☑

이 스크립트는 오직 포스팅 글(/entry/...)에서만 작동하도록 주소를 감지하며, 본문의 <h1> 제목을 자동으로 읽어와 고정 헤더에 띄워줍니다.

[html 편집] 창 맨 아래 </body> 태그 바로 위에 넣어준 후, [적용] 버튼을 눌러 저장합니다.

<!-- ==================================
   헤더 포스팅 타이틀 코드 2
   Created by Galam
   For Tistory Book Club Skin   
==================================  -->
<script>/*Galam*/(function(){const isPostPage=location.pathname!=="/"&&location.pathname!=="/index.html"&&!location.pathname.startsWith("/category");if(!isPostPage){document.addEventListener("DOMContentLoaded",()=>{const title=document.querySelector(".header-title");if(title)title.style.display="none";});return;}
let lastScrollTop=window.scrollY||document.documentElement.scrollTop;document.addEventListener("DOMContentLoaded",()=>{const postTitle=document.querySelector(".hgroup h1, .post-cover h1");const titleLink=document.querySelector(".header-title a");const headerTitle=document.querySelector(".header-title");const header=document.getElementById("header");if(titleLink){titleLink.textContent=postTitle?postTitle.textContent.trim():document.title.split(" :: ")[0];}
window.addEventListener("scroll",()=>{const currentScroll=window.scrollY||document.documentElement.scrollTop;if(currentScroll>200){if(currentScroll>lastScrollTop+5){headerTitle?.classList.add("title-visible");header?.classList.add("header-display");}else if(currentScroll<lastScrollTop-5){headerTitle?.classList.remove("title-visible");header?.classList.remove("header-display");}}else{headerTitle?.classList.remove("title-visible");header?.classList.remove("header-display");}
lastScrollTop=currentScroll;},{passive:true});});})();</script>
<!-- 헤더 포스팅 타이틀 END -->

4. 헤더 CSS 디자인 및 애니메이션 효과 설정

☑

마지막으로 고정된 헤더를 한층 더 고급스럽게 만들어 줄 디자인과 애니메이션을 설정할 차례입니다.

단순히 헤더가 딱딱하게 고정되는 것에 그치지 않고, 트렌디한 반투명 블러 효과(Glassmorphism)와 은은한 그림자를 더해 본문 글씨와 겹쳐도 가독성이 깨지지 않도록 했습니다. 여기에 위에서 아래로 스르륵 내려오는 슬라이드 모션과 부드럽게 나타나는 페이드 효과까지 추가하여 자연스러운 움직임을 구현했습니다.

CSS 코드를 설정하기 위해 [CSS] 탭으로 이동합니다.

원하는 스타일의 코드를 [CSS] 탭 맨 아래에 다음 코드 전체를 붙여 넣어준 후, [적용] 버튼을 눌러 저장합니다.

1. 슬라이드 스타일

/*-- ==================================
   헤더 포스팅 타이틀
   Created by Galam
   For Tistory Book Club Skin
================================== --*/
/* 1. 원래 북클럽 메뉴 영역 (부드러운 전환 효과 추가) */
#header {
  transition: opacity .3s, visibility .3s; /* 헤더 사라지는 속도 */
}

#header.header-display {
  opacity: 0;
  visibility: hidden;
}

/* 포스팅 타이틀 헤더 */
.header-title {
  z-index: 1010; /* 다른 요소보다 위에 표시 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,.9); /* 헤더 배경 투명도 */
  -webkit-backdrop-filter: blur(5px); /* 블러 강도 (값이 높을수록 흐려짐) */
  backdrop-filter: blur(5px);
  box-shadow: rgba(99,99,99,.2) 1px 1px 10px 0; /* 그림자 효과 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* 헤더 등장 전 위쪽 이동 거리 */
  will-change: transform, opacity;

  /* 애니메이션 속도 */
  transition: opacity .3s ease,
              transform .3s ease,
              visibility 0s linear .3s;
}

/* 활성화 상태 */
.header-title.title-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 최종 위치 */
  transition: opacity .3s ease,
              transform .3s ease,
              visibility 0s;
}

/* 내부 정렬 */
.header-title-container {
  max-width: 1080px; /* 콘텐츠 최대 너비 */
  margin: 0 auto;
  padding: 21px 20px 17px; /* 상 좌우 하 */
  box-sizing: border-box;
  display: flex;
  justify-content: left; /* left / center / right */
  align-items: center;
}

/* 제목 */
.header-title a {
  display: block;
  font-family: inherit !important;
  font-weight: 700; /* 제목 굵기 */
  font-size: 1.5rem; /* 제목 크기 */
  line-height: 32px; /* 줄 높이 */
  letter-spacing: -0.2px; /* 자간 */
  color: #333; /* 제목 색상 */
  text-decoration: none;

  /* 긴 제목 말줄임 처리 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 모바일 */
@media (max-width: 767px) {
  .header-title-container {
    padding: 20px 15px 15px; /* 모바일 여백 */
  }

  .header-title a {
    font-size: 1.1rem; /* 모바일 제목 크기 */
    line-height: 25px; /* 모바일 줄 높이 */
  }
}

/*-- 헤더 포스팅 타이틀 끝 --*/

2. 페이드 인/아웃 스타일

/*-- ======================================
   헤더 포스팅 타이틀 (페이드 인/아웃 버전)
   Created by Galam
   For Tistory Book Club Skin
====================================== --*/
/* 1. 원래 북클럽 메뉴 영역 (부드러운 전환 효과 추가) */
#header {
  transition: opacity .3s ease, visibility .3s ease; /* 헤더 사라지는 속도 */
}

#header.header-display {
  opacity: 0;
  visibility: hidden;
}

/* 포스팅 타이틀 헤더 */
.header-title {
  z-index: 1010; /* 다른 요소보다 위에 표시 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,.9); /* 헤더 배경 투명도 */
  -webkit-backdrop-filter: blur(5px); /* 블러 강도 */
  backdrop-filter: blur(5px);
  box-shadow: rgba(99,99,99,.2) 1px 1px 10px 0; /* 그림자 효과 */
  
  /* [수정] 제자리 페이드 아웃을 위해 투명도와 가시성만 제어 */
  opacity: 0;
  visibility: hidden;

  /* 애니메이션 속도 */
  transition: opacity .3s ease,
              visibility 0s linear .3s;
}

/* 활성화 상태 */
.header-title.title-visible {
  /* [수정] 제자리 페이드 인 */
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease,
              visibility 0s;
}

/* 내부 정렬 */
.header-title-container {
  max-width: 1080px; /* 콘텐츠 최대 너비 */
  margin: 0 auto;
  padding: 21px 20px 17px; /* 상 좌우 하 */
  box-sizing: border-box;
  display: flex;
  justify-content: left; /* left / center / right */
  align-items: center;
}

/* 제목 */
.header-title a {
  display: block;
  font-family: inherit !important;
  font-weight: 700; /* 제목 굵기 */
  font-size: 1.5rem; /* 제목 크기 */
  line-height: 32px; /* 줄 높이 */
  letter-spacing: -0.2px; /* 자간 */
  color: #333; /* 제목 색상 */
  text-decoration: none;

  /* 긴 제목 말줄임 처리 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 모바일 */
@media (max-width: 767px) {
  .header-title-container {
    padding: 20px 15px 15px; /* 모바일 여백 */
  }

  .header-title a {
    font-size: 1.1rem; /* 모바일 제목 크기 */
    line-height: 25px; /* 모바일 줄 높이 */
  }
}

/*-- 헤더 포스팅 타이틀 끝 --*/

💡 유용한 커스텀 꿀팁

☑

Q. 상단 바 박스 크기(높이)를 조절하고 싶다면?

CSS 코드 안의 .header-title-container에 있는 padding 속성의 위아래 값을 수정하면 박스 두께를 아주 조절하기 쉽습니다.

박스를 더 슬림하게 만드려면: padding: 10px 20px 10px; 형태로 위아래 여백을 줄여줍니다.
스마트폰(모바일)의 두께도 줄이려면: 맨 아래 모바일 미디어 쿼리 속에서 .header-title-container { padding: 10px 15px; } 처럼 패딩 값을 함께 줄여주셔야 스마트폰 화면에서도 완벽하게 세트로 적용됩니다.

Q. 폰트 글꼴과 크기는 어떻게 설정되어 있나요?

글꼴(Font): font-family: inherit !important;를 적용하여, 블로그 본문에서 사용하는 기본 폰트 패밀리를 자동으로 100% 완벽 상속받도록 설계했습니다. 덕분에 글꼴 이질감이 전혀 없습니다.
크기(Size): 부모 태그 크기에 영향받아 폰트가 왜곡되는 것을 막기 위해 가장 예측하기 쉽고 안전한 rem 단위를 적용해 견고한 정렬을 유지합니다.

마치며

☑

티스토리 스킨 편집은 작은 기호나 코드 순서 하나 때문에 화면이 갑자기 어긋나기도 해서 처음에는 조금 망설여지기도 합니다.

하지만 오늘 소개해 드린 팁은 <body> 태그 바로 아래에 안전하게 자리를 잡아 배치하는 원리라 충돌이나 에러 걱정 없이 수월하게 적용해 보실 수 있을 거예요.

긴 글을 깊이 있게 담아내시는 정성 가득한 블로거분들이라면 이 작은 변화 하나만으로도 방문하는 이웃분들에게 훨씬 매끄럽고 편안한 읽기 환경을 선물해 줄 수 있습니다. 차근차근 한 단계씩 세팅해 보시길 바라며, 설치하시다가 잘 안 풀리거나 막히는 점이 있다면 언제든 편하게 댓글 남겨주세요!

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦

저작자표시 비영리 변경금지 (새창열림)

'- 티스토리 이야기 > 티스토리 꾸미기' 카테고리의 다른 글

[티스토리 꾸미기] 북클럽 스킨 헤더와 메뉴의 순차 스크롤 및 글제목 상단 고정 효과 만들기 (1)	2026.06.13
[티스토리 꾸미기] 티스토리 북클럽 스킨 헤더 고정하기 \| 스크롤 시 메뉴 자동 숨김 CSS (0)	2026.06.13
티스토리 꾸미기 \| 북클럽 스킨 상단 메뉴 고정하기(CSS) (12)	2026.06.12
블로그 상단의 '타이틀 로고' 크게 만들기 \| 티스토리 북클럽 스킨 (6)	2026.06.12
[티스토리 꾸미기] 북클럽 스킨 헤더의 메뉴 삭제로 깔끔한 블로그 만들기 (1)	2026.06.09