티스토리꾸미기12 티스토리 스킨 편집, F12 먼저 눌러야 했다 - 개발자 도구, CSS 역추적, 치환자 남의 CSS 코드를 복붙했는데 아무 일도 일어나지 않는 경험, 한 번쯤 해보셨을 것이다. 나는 #content에 width를 아무리 줘도 사이드바가 꿈쩍도 안 해서 한참을 헤맸다. 알고 보니 내 스킨은 #content라는 ID 자체가 없었다. 처음엔 내가 CSS를 잘못 쓴 줄 알았다. 그런데 원인은 코드가 아니라 전제가 틀린 것이었다. 존재하지 않는 대상에게 명령을 보낸 셈이었다.이 경험이 내게 가르쳐준 건 의외로 단순했다. 내 블로그의 실제 구조를 먼저 봐야 한다는 것. 순서가 틀리면 아무리 좋은 코드도 소용없다. 그리고 솔직히 말하면, 이 순서를 알려주는 글이 너무 없다는 것도 문제라고 생각한다. 대부분의 스킨 커스터마이징 튜토리얼이 코드를 먼저 제시하고 "여기 넣으세요"로 끝난다. 왜 그 코드가 필.. 2026. 4. 29. details 태그 - JS 없이 토글, 아코디언, SEO FAQ 페이지 작업을 처음 맡았을 때, 저는 JavaScript로 토글 기능을 직접 짰습니다. 기능은 됐지만 코드가 생각보다 많아졌고, 항목이 늘어날 때마다 JS까지 함께 손봐야 했습니다. 그러다 HTML 레퍼런스를 뒤지다 details 태그를 발견했고, 솔직히 처음엔 '이게 진짜 되나?' 싶었습니다. 테스트해보니 JS 한 줄 없이 열리고 닫혔습니다. 그 허탈함이 아직도 기억납니다.이 글을 쓰면서 동시에 드는 생각이 있습니다. details 태그가 HTML에 이미 있는데 왜 몰랐냐는 자책보다, 왜 이런 기능이 잘 알려져 있지 않은지가 더 흥미로운 질문입니다. HTML 입문 튜토리얼 대부분이 div와 span, 기본 입력 요소에 집중되어 있고 details처럼 인터랙티브한 시맨틱 요소는 후반부에 짧게 지나.. 2026. 4. 19. 스마트폰에서 글씨가 사라졌다 나타나는 현상, 원인은 폰트였습니다 스마트폰으로 블로그를 열었을 때 텍스트가 2초 가까이 아예 안 보이다가 갑자기 뜨는 현상을 경험한 적 있으신가요? 저는 한동안 모바일 인터넷 속도 탓을 했습니다. Wi-Fi 연결 상태가 좋을 때도 같은 증상이 반복됐고, 그제야 "이건 네트워크 문제가 아닐 수 있다"는 생각이 들었습니다. PageSpeed Insights에서 구글 폰트 링크가 "렌더링 차단 리소스"로 잡히는 걸 보고 나서야 원인이 다른 곳에 있다는 걸 알았습니다. HTML 설정 두 줄을 바꾸는 것으로 체감이 달라졌습니다.사실 이 문제를 처음 발견했을 때 꽤 허탈했습니다. 폰트 설정 두 줄 문제로 방문자들이 빈 화면을 보고 있었다는 게 믿기지 않았거든요. 하지만 그게 현실이었습니다. 그래서 이 경험을 그냥 지나치지 않고 정리하기로 했습니다... 2026. 4. 15. CSS Minify로 블로그 속도 올리기-Minify, PageSpeed, 백업 티스토리 스킨을 오랫동안 손대다 보면, 어느 순간 CSS 파일이 감당하기 어려운 크기로 불어납니다. 저도 반년 넘게 스킨을 수정하다 파일이 4,000줄을 넘어선 걸 뒤늦게 확인했습니다. 공백, 주석, 이미 덮어쓴 속성들이 쌓인 결과였습니다. 처음엔 그냥 뒀습니다. "언제 한 번 정리해야지"라는 생각이었는데, 그 타이밍은 스스로 오지 않았습니다. 아무도 "블로그 느려요"라고 말해주지 않으니까요. 독자들은 느리다고 느끼면 그냥 닫아버립니다. 그 사실을 나중에야 깨달았습니다.PageSpeed 점수가 58점이 나온 날구글 PageSpeed Insights로 블로그를 검사해봤더니 모바일 기준 58점이 나왔습니다. "렌더링 차단 리소스 제거"라는 항목이 경고로 떴는데, 처음엔 의미를 몰랐습니다. 알아보니 CSS 파.. 2026. 4. 14. 사파리 브라우저 호환성 - 렌더링 엔진, 크로스브라우저, 테스트 도구 크롬에서 멀쩡하던 레이아웃이 사파리에서 완전히 무너진 경험, 혹시 있으신가요? 저도 블로그를 몇 달째 크롬으로만 테스트하다가 아이폰을 쓰는 친구한테 "네 블로그 레이아웃 다 깨졌어"라는 말을 들었습니다. 그날이 아직도 생생합니다. 친구가 그냥 지나치듯 던진 말이었는데, 저는 그 자리에서 바로 아이폰을 빌려서 블로그를 열어봤고 — 진짜로 다 깨져 있었습니다. 이미 몇 달 동안 방문자들이 그 화면을 보고 있었을 거라는 생각에 식은땀이 났습니다. 나름 신경 써서 꾸몄다고 생각했던 블로그가 사실은 절반의 독자에게 부서진 채로 보이고 있었던 겁니다.그 경험을 계기로 브라우저 호환성을 제대로 공부하기 시작했는데, 알면 알수록 "이걸 진작에 알았어야 했는데"라는 생각이 들었습니다. 이 글은 그 과정에서 직접 겪은 것.. 2026. 4. 14. CLS 개선 - 원인 진단, 이미지 최적화, 애드센스 승인 애드센스 심사가 반려됐을 때 콘텐츠만 들여다봤습니다. 글이 부족한가, 카테고리가 문제인가, 페이지가 너무 적은가. 원인을 찾겠다고 글을 추가하고 카테고리를 정리하면서 몇 주를 보냈습니다. 그런데 진짜 원인은 전혀 다른 곳에 있었습니다. CLS 점수가 0.4를 넘어 있었고, 저는 그때까지 CLS가 뭔지도 몰랐습니다. 방향을 잘못 잡으면 열심히 할수록 더 멀어집니다. 이 글은 그 경험을 바탕으로, CLS를 어떻게 진단하고 실제로 어떻게 고쳤는지를 정리한 것입니다. -->CLS 원인 진단: PageSpeed Insights보다 DevTools가 정확합니다CLS(Cumulative Layout Shift)란 페이지가 로딩되는 동안 화면 요소가 예기치 않게 움직이는 정도를 수치로 나타낸 지표입니다. 구글이 Cor.. 2026. 4. 14. 이전 1 2 다음
