스킨편집3 티스토리 스킨 구조 파악 (개발자 도구, CSS 역추적, 치환자) 남의 CSS 코드를 복붙했는데 아무 일도 일어나지 않는 경험, 한 번쯤 해보셨습니까? 저는 #content에 width를 아무리 줘도 사이드바가 꿈쩍도 안 해서 한참을 헤맸습니다. 알고 보니 제 스킨은 #content라는 ID 자체가 없었습니다. 티스토리 스킨 구조를 제대로 파악하지 않으면 이런 일이 반복됩니다. 개발자 도구와 CSS 역추적을 함께 쓰는 방법을 알고 난 뒤로는 구조 파악에 걸리는 시간이 눈에 띄게 줄었습니다.개발자 도구 없이 스킨을 건드리면 생기는 일티스토리 스킨 편집창을 처음 열면 HTML과 CSS가 뒤섞인 코드가 나옵니다. 여기에는 치환자(substitution variable)가 포함되어 있습니다. 치환자란 티스토리가 실제 렌더링 시점에 특정 데이터로 자동 대체해주는 플레이스홀더로,.. 2026. 4. 29. 티스토리 상단 알림 바 (position fixed, padding-top, sessionStorage) 블로그에 구독 유도 장치를 여러 개 달아봤는데 다 효과가 없었던 경험이 있습니다. 사이드바, 글 하단 CTA, 본문 중간 삽입까지 시도해봤지만 공통적으로 독자 반응이 없었습니다. 그러다 상단 고정 알림 바를 달기 시작했고, 달고 나서야 왜 이게 맞는 위치인지 이해했습니다. 이 글은 그 과정에서 직접 겪은 실수와 해결 방법을 정리한 것입니다.position fixed와 padding-top 보정처음 알림 바를 달았을 때 글 제목이 보이지 않는 상황이 생겼습니다. 방문자가 페이지에 들어오면 글 제목 첫 줄이 알림 바에 그대로 가려져 있었습니다. 원인은 간단했습니다. position: fixed 속성을 적용했는데 body에 padding-top 보정을 하지 않은 것이었습니다.position: fixed란 해당.. 2026. 4. 26. 크롬 개발자 도구 (F12, Elements탭, Inspect) 티스토리 스킨 CSS 파일을 열었더니 3,000줄이 넘어서 그냥 닫아버린 적 있으신가요? 저는 있습니다. 글 제목 폰트 하나 바꾸려고 Ctrl+F로 "title"을 검색해서 나오는 항목을 전부 열어보던 시절이요. F12 하나로 그 시간이 거의 사라집니다.CSS 위치를 모른다는 건 어떤 느낌인가스킨 편집을 처음 시작하면 가장 먼저 막히는 지점이 있습니다. "수정하고 싶은 부분은 알겠는데, 코드 어디에 있는지 모르겠다"는 것입니다. CSS 파일이 길면 길수록 이 막막함은 커지고, Ctrl+F로 뭘 검색해야 할지도 모른 채 위아래로 코드를 긁어 내리게 됩니다.제가 직접 겪어봤는데, 이 상태에서 잘못된 선택자(selector)를 건드리면 생각지 못한 곳이 무너집니다. 여기서 선택자란 CSS에서 어떤 HTML 요.. 2026. 4. 15. 이전 1 다음
