'북클럽 스킨' 꾸미기 모음.
티스토리 블로그를 더욱 멋지고 매력적으로 꾸미고 싶으신가요? 이 글에서는 티스토리를 처음 시작하는 분들을 위해 다양한 '티스토리 꾸미기' 팁을 한곳에 모아 소개합니다.
모든 내용은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.
[📌 코드 수정 시 주의사항]
1. 스킨 저장.
스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.
스킨을 백업하려면, [블로그 관리자] > [꾸미기] > [스킨 변경]을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.
2. [Ctrl] + [F]를 사용할 때.
먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.
티스토리 개설 후 기본 설정 (북클럽 필수 설정)
티스토리 개설 후 기본 세딩방법
목차티스토리 개설 후 최초 세팅방법티스토리를 처음 시작하는 분들 중에는 세팅을 하지 않고 글부터 쓰는 경우가 많습니다. 물론 카테고리만 만들어 글을 써도 검색엔진에 노출되기 때문에 크
galam.tistory.com
티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법
티스토리 북클럽 스킨 | "h1 태그가 2개입니다." 문제 원인과 해결 방법
티스토리 '북클럽 스킨' SEO 검색 최적화 방법수익형 블로그 또는 블로그 활성화를 위해, 티스토리 북클럽 스킨을 사용하는 분들은 꼭 주의해야 하는 문제가 있습니다. 모든 글은 검색 엔진 최적
galam.tistory.com
상단 메뉴, 헤더 꾸미기
티스토리 북클럽 스킨 I 상단 메뉴 삭제하기
티스토리 '북클럽 스킨' 상단 메뉴 삭제하기티스토리 블로그 스킨 중 북클럽 스킨이 가장 깔끔하다고 생각합니다. 하지만 약간씩 마음에 들지 않는 부분들이 있어 수정하려고 합니다. 이번에
galam.tistory.com
블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
블로그 상단의 '타이틀 로고' 크게 만들기 | 티스토리 북클럽 스킨
목차 블로그 상단의 '타이틀 로고' 크게 만들기 오늘은 아래 그림처럼 블로그 상단의 '타이틀 로고'를 기존의 크기보다 조금 더 크게 만드는 법에 대해서 알아보겠습니다. 로고 CSS코드 수정하기
galam.tistory.com
티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)
티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS)
▤ 목차북클럽 스킨 상단 메뉴(헤더) 고정하기티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다. 수정 방법은 CS
galam.tistory.com
사이드바, 카테고리 꾸미기
티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨
티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨
목차 북클럽 스킨 | 최근글, 인기글 분리하기. 이번은 티스토리 북클럽 스킨의 사이드바에 있는 '최근글과 인기글'을 분리하는 방법에 대해 알아보도록 하겠습니다. 기본적으로 '최근글과 인
galam.tistory.com
티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경
티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경
'북클럽 카테고리' 밑줄 넣기 및 마우스 오버 색상 변경이번에는 조금 밋밋해 보이는 티스토리 북클럽 사이드바의 카테고리에 밑줄을 넣는 방법과 마우스를 올렸을 때 밑줄 없이 색상이 변경되
galam.tistory.com
티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기
티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기
카테고리의 '분류 전체보기' 변경 및 삭제하기티스토리의 북클럽 스킨을 사용하면 사이드바에 카테고리가 표시됩니다. 이때 하위 카테고리는 제목을 설정할 수 있지만, 최상단의 '분류 전체보
galam.tistory.com
본문 상단 제목 박스 꾸미기
2025.03.10-티스토리 북클럽 스킨 본문 상단 '글 제목 커버' 꾸미기 #1
티스토리 북클럽 스킨 본문 상단 '글 제목 커버' 꾸미기 #1
북클럽 스킨 본문 '글 제목 커버' 꾸미기티스토리 북클럽 스킨의 본문 'post-cover'를 수정하는 이유는 다음과 같습니다:시각적인 일관성: 본문 첫 번째 이미지나 썸네일을 제목 박스의 배경으로 설
galam.tistory.com
티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2
티스토리 북클럽 스킨 본문 상단 제목의 배경 이미지 삭제 및 배경색 변경 #2
본문 상단 제목의 배경 이미지 삭제 및 배경색 변경티스토리 북클럽 스킨의 본문 'post-cover'를 수정하는 이유는 다음과 같습니다:시각적인 일관성: 본문 첫 번째 이미지나 썸네일을 제목 박스의
galam.tistory.com
티스토리 북클럽 스킨 본문 상단 제목의 배경에 고정 이미지 적용하기 #3
티스토리 북클럽 스킨 본문 상단 제목의 배경에 고정 이미지 적용하기 #3
제목의 배경에 고정된 이미지 적용하기배경 이미지 설정: 한 번 설정해두면 깔끔한 제목 배경을 지속적으로 사용할 수 있습니다.일관된 적용: 설정된 제목 배경은 모든 글에 동일하게 적용되므
galam.tistory.com
북클럽 스킨 글 제목의 이미지를 없애고, 글 제목을 본문에 넣어 깔끔하게 만들기
북클럽 스킨 글 제목의 이미지를 없애고, 글 제목을 본문에 넣어 깔끔하게 만들기
글 제목의 이미지를 지우고 본문에 넣기. 오래전부터 사용해 온 티스토리 스킨인 Book Club은 심플하고 깔끔한 디자인 덕분에 많은 사용자들에게 인기를 끌고 있습니다. 그러나 블로그 본문에서
galam.tistory.com
하단 푸터 꾸미기
티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기
블로그 '푸터' 영역 꾸미기 #1블로그의 푸터(Footer)란 블로그 하단에 위치한 영역으로, 주로 저작권 정보나 사업자 정보 등을 표기하는 부분을 말합니다. 이 영역은 방문자들에게 중요한 정보를
galam.tistory.com
티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 #2
티스토리 꾸미기 | 블로그 하단의 푸터 영역 꾸미기 #2
블로그 '푸터' 영역 꾸미기 #2푸터를 꾸미는 주요 이유▪ 정보 제공: 푸터에는 연락처, 사이트맵, 저작권 정보 등 중요한 정보를 포함할 수 있습니다. ▪ 브랜드 이미지 강화: 통일된 디자인과
galam.tistory.com
홈화면 최신글 꾸미기
티스토리 I 카테고리 목록 '뉴북' 소제목 스타일 변경하기
티스토리 I 카테고리 목록 '뉴북' 소제목 스타일 변경하기
홈 화면의 최신 글, '뉴북' 상단 꾸미기이번에는 카테고리 목록을 소제목 스타일로 조금 더 세련되게 변경해 보겠습니다. 북클럽 스킨에 적용해 보았지만, 다른 스킨에도 적용 가능할 것 같습니
galam.tistory.com
티스토리 북클럽 스킨 I 본문 카테고리 썸네일 정사각형으로 수정하기
티스토리 북클럽 스킨 I 본문 카테고리 썸네일 정사각형으로 수정하기
북클럽 스킨의 장점은 다음과 같습니다.깔끔하고 세련된 디자인 북클럽 스킨은 책을 읽는 느낌을 강조하는 디자인으로, 깔끔하고 세련된 느낌을 주어서 사용자들이 더욱 집중할 수 있도록 도와
galam.tistory.com
티스토리 북클럽 스킨 I 본문 ' 뉴북' 및 커버 '뉴스레터' 제목 잘림 수정하기
티스토리 북클럽 스킨 I 본문 ' 뉴북' 및 커버 '뉴스레터' 제목 잘림 수정하기
본문 카테고리 '뉴북' 및 커버 아이템 '뉴스레터' 제목 잘림 수정하기 북클럽 스킨의 장점 레이아웃이 간결하고 깔끔합니다. 티스토리 북클럽 스킨은 레이아웃이 간결하고 깔끔한 디자인을 가지
galam.tistory.com
홈 커버화면 꾸미기
티스토리 북클럽 스킨 I 커버 소제목 스타일 변경하는 방법
티스토리 북클럽 스킨 I 커버 소제목 스타일 변경하는 방법
북클럽 스킨 '커버 타이틀' 소제목 스타일로 꾸미기. 티스토리 북클럽 (Book Club) 스킨에서 스킨 편집 시 커버 아이템을 설정하고 각 커버 아이템의 타이틀을 지정할 수 있습니다.커버의 소제목
galam.tistory.com
티스토리 북클럽 스킨 I 커버 아이템 뉴스레터 썸네일 정사각형으로 변경
티스토리 북클럽 스킨 I 커버 아이템 뉴스레터 썸네일 정사각형으로 변경
목차 커버 아이템 뉴스레터 썸네일 정사각형으로 변경 홈 설정에서 커버를 선택하고, 커버 아이템을 뉴스레터로 설정 후 뉴스레터의 썸네일 사진의 비율이 마음에 들지 않는다면. HTML과 CSS를 수
galam.tistory.com
TOP 버튼 만들기
티스토리 꾸미기 | 탑(TOP) 버튼 만드는 방법
티스토리 블로그 탑(TOP) 버튼 만드는 방법 티스토리 블로그의 TOP버튼은 하단의 '푸터'부분에 조그마하게 위치하거나 스킨에 따라 아예 없는 경우가 있습니다.그렇기 때문에 페이지를 끝까지
galam.tistory.com
티스토리 꾸미기 | 반응형 탑(TOP) 버튼 만들기
마우스 오버 시 반응하는 탑(TOP) 버튼 만들기티스토리 블로그의 TOP 버튼은 하단의 '푸터' 부분에 작게 위치하거나 스킨에 따라 아예 없을 수도 있습니다. 따라서 페이지를 끝까지 내리지 않는 이
galam.tistory.com
티스토리 꾸미기 | HOME / TOP / BOTTOM 반응형 버튼 만들기
티스토리 꾸미기 | HOME / TOP / BOTTOM 반응형 버튼 만들기
HOME / TOP / BOTTOM 버튼 만들기 #2HOME / TOP / BOTTOM 버튼의 장점HOME 버튼: 사용자가 현재 페이지에서 빠르게 메인 화면으로 이동할 수 있도록 합니다. 특히 블로그 웹사이트가 여러 섹션으로 구성된 경
galam.tistory.com
티스토리 꾸미기 | 프로그레스바 탑(TOP) 버튼 만들기
티스토리 꾸미기 | 프로그레스바 탑(TOP) 버튼 만들기
프로그레스바 탑(TOP) 버튼의 장단점.장점:가시성 향상: 사용자가 페이지를 스크롤할 때에도 좌측에 있는 '프로그레스바 탑 버튼'은 항상 보입니다. 이를 통해 사용자에게 현재 작업의 진행 상황
galam.tistory.com
CSS 버튼 서식 모음
티스토리 | CSS 링크 버튼 서식 모음 #2
'티스토리 링크 버튼' CSS 서식 모음 #2 티스토리 링크 버튼의 CSS와 HTMl 코드 모음입니다.티스토리 스킨 편집에 들어가 CSS 코드를 CSS 코드란에 삽입 후 HTML코드를 원하는 위에 넣어주거나 서식으
galam.tistory.com
티스토리 | CSS 링크 버튼 서식 모음 #3
'티스토리 링크 버튼' CSS 서식 모음 #3링크 버튼을 사용하는 것은 블로그나 웹사이트를 더 효과적으로 운영하는 데 매우 유용합니다. 그 이유는 다음과 같습니다.사용자 편의성 향상: 링크 버튼
galam.tistory.com
TOC 자동목차 만들기
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용
누구나 쉽게 따라 만드는 TOC 자동 목차 #2. 오늘은 '티스토리 자동 목차 #1'에 이어 조금 다른 스타일의 '티스토리 자동 목차 #2'에 대해 알아보겠습니다. 제가 프로그래머도 아니고 블로그 고수
galam.tistory.com
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 떠있는 스크롤 반응형 자동목차
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 떠있는 스크롤 반응형 자동목차
좌측에 떠있는 스크롤 반응형 자동목차(TOC) 만들기오늘은 '자동목차 만들기 #2'에 이어 좌측에 떠있는 '자동목차(TOC) #3'에 대해 알아보겠습니다. 이번 자동목차는 서식을 사용하는 목차가 아니
galam.tistory.com
티스토리 자동목차 HTML 서식 모음집 #1 | 북클럽 스킨
티스토리 자동목차 HTML 서식 모음집 #1 | 북클럽 스킨
TOC 자동목차(HTML) 서식 모음. '자동목차 만들기 (TOC) part 2, part 4'에 적용 가능한 서식 스타일 모음본 서식은 '자동목차 만들기 part 2' 또는 'part 4'를 설정한 후에 사용할 수 있습니다.기본 코드와 CS
galam.tistory.com
티스토리 자동목차 HTML 서식 모음집 #2 | 북클럽 스킨
티스토리 자동목차 HTML 서식 모음집 #2 | 북클럽 스킨
TOC 자동목차(HTML) 서식 모음. '자동목차 만들기 (TOC) part 2, part 4'에 적용 가능한 서식 스타일 모음본 서식은 '자동목차 만들기 part 2' 또는 'part 4'를 설정한 후에 사용할 수 있습니다.기본 코드와 CS
galam.tistory.com
2025.02.25-티스토리 자동목차 만들기 part 5 (초간단 버전)
티스토리 자동목차 만들기 part 5 (초간단 버전)
티스토리 자동목차 만들기. 📌 알림 웹서핑을 하다 보면 제가 만든 코드, 태그 속성, 그리고 오탈자까지 그대로 가져가 본인 작성한 글인 것처럼 사용하는 경우가 있습니다. 코드를 가져가는
galam.tistory.com
소제목 HTML 서식 모음
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1
티스토리 소제목 서식 스타일 모음 #1 티스토리에서 소제목 서식을 사용하는 장점은 다음과 같습니다.시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효
galam.tistory.com
티스토리 소제목 서식(HTML) 스타일 모음 part 5
티스토리 소제목 서식(HTML) 스타일 모음 part 5
티스토리 소제목 서식(HTML) 모음 part 5티스토리에서 소제목 서식을 사용하는 장점은 다음과 같습니다.시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과
galam.tistory.com
티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 인용구 서식(HTML) 스타일 모음티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면
galam.tistory.com
2024.10.18-티스토리 꾸미기 | 소제목 'SET10' 모음집
티스토리 꾸미기 | 소제목 'SET10' 모음집
티스토리 소제목 'SET10' 모음집 블로그에서 소제목 서식을 사용하는 것은 콘텐츠의 가독성, 구조화, 그리고 SEO(검색 엔진 최적화) 측면에서 매우 중요합니다.가독성 향상 소제목을 사용하면 긴
galam.tistory.com
인용구, 글박스 HTML 서식 모음
2024.03.14-티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 인용구 서식(HTML) 스타일 모음티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면
galam.tistory.com
2024.03.15-티스토리 꾸미기 | 인용구 따옴표 닫기 만들기
티스토리 꾸미기 | 인용구 따옴표 닫기 만들기
인용구 따옴표 닫기 만들기티스토리의 인용구 따옴표의 경우 열림 따옴표만 존재하고 닫힘 따옴표가 존재하지 않는 것이 기본값입니다. 이 경우는 CSS 값을 추가해 줌으로써 아래처럼 따옴표 닫
galam.tistory.com
2025.02.15-티스토리 꾸미기 | 둥근 테두리 글 상자 HTML 서식 모음 #1
티스토리 꾸미기 | 둥근 테두리 글 상자 HTML 서식 모음 #1
'폴더 스타일' 글상자, 인용구 만들기. 티스토리나 다른 블로그 플랫폼에서 '글상자 및 인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.강조: 중요한 정보나 주요 메
galam.tistory.com
2025.02.15-티스토리 꾸미기 | 둥근 테두리 글상자 HTML 서식 모음 #2
티스토리 꾸미기 | 둥근 테두리 글상자 HTML 서식 모음 #2
'폴더 스타일' 글상자, 인용구 만들기. 티스토리나 다른 블로그 플랫폼에서 '글상자 및 인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다.강조: 중요한 정보나 주요 메
galam.tistory.com
더 많은 티스토리 북클럽 꾸미기 보러 가기
더 많은 '티스토리 꾸미기 팁'들은 아래 링크에서 확인하시기 바랍니다.
'▸티스토리 이야기' 카테고리의 글 목록
우리들의 일상 속 소소한 이야기를 나누고 티스토리 꾸미기 등도 함께 하는 공간이 되기를 바랍니다.
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"
