전체 글118 네이버 블로그 HTML (허용 태그, deprecated, 반응형 한계) 솔직히 저는 네이버 블로그에서도 div와 style 속성이 당연히 된다고 생각했습니다. 티스토리에서 하던 방식 그대로 붙여 넣었다가 저장 직후 싹 사라지는 걸 보고 한동안 멍했습니다. 그 경험 이후로 네이버 블로그의 HTML 허용 구조를 하나씩 직접 실험하며 파악해 나갔는데, 오늘은 그 과정에서 터득한 현실적인 방법들을 공유합니다.미리 말씀드리지만, 이 글은 "이렇게 하면 됩니다"가 아닌 "이게 현실입니다"에 가까운 내용입니다. 네이버 블로그에서 할 수 있는 것들을 정리하면서 동시에, 그 한계가 얼마나 구조적인지도 함께 이야기하려 합니다.저장하자마자 사라진 코드 — 네이버의 XSS 방어 구조네이버 블로그가 div, style, script 태그를 서버 단에서 자동 제거하는 이유는 XSS(Cross-Sit.. 2026. 4. 30. 티스토리 스킨 편집, F12 먼저 눌러야 했다 - 개발자 도구, CSS 역추적, 치환자 남의 CSS 코드를 복붙했는데 아무 일도 일어나지 않는 경험, 한 번쯤 해보셨을 것이다. 나는 #content에 width를 아무리 줘도 사이드바가 꿈쩍도 안 해서 한참을 헤맸다. 알고 보니 내 스킨은 #content라는 ID 자체가 없었다. 처음엔 내가 CSS를 잘못 쓴 줄 알았다. 그런데 원인은 코드가 아니라 전제가 틀린 것이었다. 존재하지 않는 대상에게 명령을 보낸 셈이었다.이 경험이 내게 가르쳐준 건 의외로 단순했다. 내 블로그의 실제 구조를 먼저 봐야 한다는 것. 순서가 틀리면 아무리 좋은 코드도 소용없다. 그리고 솔직히 말하면, 이 순서를 알려주는 글이 너무 없다는 것도 문제라고 생각한다. 대부분의 스킨 커스터마이징 튜토리얼이 코드를 먼저 제시하고 "여기 넣으세요"로 끝난다. 왜 그 코드가 필.. 2026. 4. 29. 블로그 프로그레스 바 - scroll 이벤트, requestAnimationFrame, 완독률 방문자 대부분이 글의 30% 지점에서 이탈하고 있었다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때 솔직히 좀 허탈했다. 숫자가 나를 판단하는 것 같은 느낌이랄까. 그런데 동시에 글이 문제인지 구조가 문제인지 알 수 없어서, 일단 독자가 어디까지 읽었는지 눈으로라도 보여주는 장치를 달아보고 싶었다.프로그레스 바가 완독률을 높인다는 보장은 어디에도 없었지만, 달기 전에 효과를 따지는 건 써보지도 않고 리뷰를 쓰는 것과 마찬가지라 일단 만들어보기로 했다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔다.scroll 이벤트와 requestAnimationFrame 사이에서 배운 것처음 구현할 때 scroll 이벤트 핸들러 안에서 바로 D.. 2026. 4. 28. CSS 별점 위젯 직접 만들기 (HTML 구조, 형제 선택자, 반 별 구현) CSS 별점 위젯 직접 만들기 - HTML 구조, 형제 선택자, 반 별 구현리뷰 글을 꾸준히 올리다 보면 한 번쯤 이런 생각이 드실 겁니다. "별점 하나 넣고 싶은데, 플러그인 쓰기엔 너무 무겁고 스타일은 또 따로 놀고." 저도 그 고민을 꽤 오래 했습니다. 결국 JavaScript 없이 CSS만으로 별점 위젯을 직접 만들어 붙였고, 그 과정에서 배운 것들을 정리해 봤습니다. 처음에는 쉬워 보였는데 실제로 해보니 생각보다 복잡한 개념들이 얽혀 있었습니다.HTML 구조: 왜 별을 거꾸로 써야 할까요처음 이 방법을 접했을 때 가장 당황했던 부분이 바로 HTML 마크업 구조였습니다. 별을 5번부터 1번 순서로 역순 배치한다는 게 직관과 정반대라서, 저도 처음엔 "이게 맞나?" 싶어 순서를 몇 번이나 바꿔가며 .. 2026. 4. 27. blockquote 스타일링과 의미론적 마크업 - border-left, 가상 요소, 의미론적 마크업) blockquote에 스타일을 추가했을 뿐인데, 독자 반응이 달라졌습니다. 인용구인지 본문인지 헷갈린다는 피드백을 받고 나서야 시각적 구분이 글 읽기에 얼마나 직접적인 영향을 주는지 실감했습니다. 스타일링이 단순한 꾸밈이 아니라 정보 전달의 문제라는 걸, 저는 그날 처음으로 제대로 이해했습니다. 그리고 스타일을 잘 입힌 후에도 또 다른 실수가 있다는 걸 나중에야 알게 됐습니다.border-left와 가상 요소로 인용구를 눈에 띄게 만드는 법글 안에서 전문가 발언을 인용했는데 "그게 인용인지 본문인지 헷갈렸다"는 독자 반응을 받은 게 계기였습니다. 여러분도 블로그에 인용구를 넣어봤다가 그냥 밋밋하게 흘러가버린 경험 한 번쯤 있지 않으신가요? 저는 그날 이후 브라우저 기본 스타일에서 벗어나기로 했습니다. 기.. 2026. 4. 27. 상단 고정 알림 바 구현할 때 반드시 챙겨야 할 것들 - position fixed, padding-top, sessionStorage 블로그에 구독 유도 장치를 여러 개 달아봤는데 다 효과가 없었던 경험이 있습니다. 사이드바, 글 하단 CTA, 본문 중간 삽입까지 시도해봤지만 공통적으로 독자 반응이 없었습니다. 그러다 상단 고정 알림 바를 달기 시작했고, 달고 나서야 왜 이게 맞는 위치인지 이해했습니다. 그런데 달고 나서 생기는 문제들이 만만치 않았습니다. 이 글은 그 과정에서 직접 겪은 실수와 해결 방법을 정리한 것입니다.position fixed와 padding-top 보정, 처음엔 왜 제목이 안 보이는지 한참 헤맸다처음 알림 바를 달았을 때 글 제목이 보이지 않는 상황이 생겼습니다. 방문자가 페이지에 들어오면 글 제목 첫 줄이 알림 바에 그대로 가려져 있었습니다. 원인은 간단했습니다. position: fixed 속성을 적용했는데.. 2026. 4. 26. 이전 1 ··· 10 11 12 13 14 15 16 ··· 20 다음
