티스토리 스킨 HTML 구조 완전 분석: #content, #sidebar 핵심 ID 선택자 파악법 5가지
티스토리 스킨의 HTML 구조를 제대로 이해하면, CSS 한 줄로도 블로그 전체 레이아웃을 내 마음대로 바꿀 수 있다. 많은 사람들이 스킨을 그냥 적용하고 끝내지만, 실제로 원하는 결과를 얻으려면 #content, #sidebar 같은 핵심 ID 선택자가 어디에 있는지 직접 파악하는 능력이 필요하다. 이 글에서는 내가 직접 삽질하면서 익힌 방법 5가지를 정리해봤다.
1. 티스토리 스킨 구조, 먼저 전체 그림부터 파악하자
"티스토리 스킨"은 기본적으로 HTML + CSS + JavaScript로 구성된 템플릿이다. 스킨마다 구조가 다를 수 있지만, 대부분의 스킨은 공통적으로 아래와 같은 큰 틀을 유지한다.
#header (상단 헤더 영역)
#content 또는 #main (본문 영역)
.entry-content (글 내용)
#sidebar (사이드바 위젯 영역)
#footer (하단 푸터)이 구조를 머릿속에 그리고 있으면, CSS를 수정할 때 어느 요소를 건드려야 할지 바로 감이 온다. 예를 들어 본문 글자 크기를 바꾸고 싶으면 .entry-content를 타깃으로 잡으면 된다.
2. 크롬 개발자 도구로 ID 선택자 직접 파고들기
가장 확실한 방법은 크롬 브라우저에서 F12(개발자 도구)를 여는 것이다. 내 블로그 페이지를 열고, 수정하고 싶은 영역에 마우스를 올린 뒤 우클릭 → "검사(Inspect)"를 누르면 해당 요소의 HTML이 오른쪽 패널에 바로 표시된다.
여기서 id 속성이나 class 속성을 확인하면 "티스토리 스킨"에서 어떤 선택자를 써야 하는지 정확히 알 수 있다. 모바일 스킨의 경우 PC와 ID가 다르게 설정된 경우도 있으니 반드시 양쪽 다 확인하자.
3. 스킨 HTML 편집기에서 치환자(##) 구조 이해하기
"티스토리 스킨" 편집기를 열면 일반 HTML이 아니라 ##_blog_link_##, ##_title_## 같은 티스토리 고유의 치환자(Replacement Variable)가 섞여 있다. 이게 처음엔 낯설지만, 구조 분석에는 크게 영향을 미치지 않는다.
치환자는 실제 페이지가 렌더링될 때 실제 값으로 바뀌기 때문에, 개발자 도구에서는 이미 치환된 HTML을 보게 된다. 스킨 편집 화면에서는 치환자를 그대로 두고 id나 class 이름만 파악하면 충분하다.
/* 예시: 사이드바 너비 조절 */
#sidebar {
width: 260px;
}
/* 예시: 본문 영역 최대 너비 제한 */
#content {
max-width: 800px;
margin: 0 auto;
}4. 티스토리 공식 스킨별 HTML 구조 차이점 파악하기
티스토리에서 제공하는 기본 스킨(Symbol, Letter, Book 등)은 각각 HTML 구조가 조금씩 다르다. 직접 스킨 편집기를 열어보면 알겠지만, #content 대신 .container나 .inner를 쓰는 스킨도 있다.
스킨을 바꿀 때마다 CSS를 처음부터 다시 짜야 하는 이유가 바로 이 때문이다. 가장 좋은 방법은 새 스킨을 적용하자마자 개발자 도구로 구조를 한 번 훑어보고, 내가 커스터마이징한 CSS가 여전히 작동하는지 확인하는 것이다. 특히 #sidebar 영역은 스킨마다 위치와 이름이 많이 달라지는 편이다.
5. CSS 우선순위(Specificity) 개념으로 충돌 없이 덮어쓰기
구조를 다 파악했는데 CSS를 적용해도 반영이 안 된다면? 대부분은 우선순위 문제다. 기존 스킨 CSS가 더 높은 명시도(Specificity)를 갖고 있어서 내 코드가 먹히지 않는 것이다.
이 경우 선택자를 좀 더 구체적으로 쓰거나, 아니면 !important를 붙이는 방법이 있다. 단, !important는 남발하면 나중에 관리하기 힘들어지니 꼭 필요한 경우에만 쓰는 게 좋다.
/* 우선순위를 높이는 방법 */
body #sidebar .widget-title {
font-size: 16px;
color: #333;
}
/* 최후의 수단 */
#sidebar { width: 280px !important; }마무리: 구조 파악이 커스터마이징의 시작이다
"티스토리 스킨"을 제대로 다루려면 결국 HTML 구조 이해가 기본이다. 처음에는 낯설고 귀찮게 느껴질 수 있지만, 한 번만 제대로 파악해두면 그 다음부터는 CSS 몇 줄로 원하는 걸 바로 구현할 수 있다. 특히 #content와 #sidebar 두 영역만 제대로 잡아도 블로그 레이아웃 80%는 해결된다고 봐도 된다.
블로그를 운영하다 보면 어느 시점엔 무조건 커스터마이징 욕심이 생긴다. 그때 이 글이 도움이 됐으면 한다.
- 티스토리 공식 스킨 가이드: tistory.com
- MDN Web Docs - CSS Specificity: developer.mozilla.org
- Chrome DevTools 공식 문서: developer.chrome.com/docs/devtools