블로그꾸미기5 티스토리 카카오 로그인 버튼 CSS 재스타일링: 기본 디자인을 내 브랜드에 맞게 바꾸는 방법 4가지 티스토리 카카오 로그인 버튼 CSS 재스타일링: 기본 디자인을 내 브랜드에 맞게 바꾸는 방법 4가지티스토리 블로그에 댓글 기능을 쓰다 보면 카카오 로그인 버튼이 기본 상태로 떡하니 자리를 차지하고 있다. 노란 배경에 카카오 로고가 박힌 기본 버튼인데, 어떤 스킨에서는 블로그 전체 분위기와 전혀 어울리지 않아 거슬린다. 마치 모노톤으로 정성껏 꾸민 방에 형광 노란 의자 하나가 들어온 느낌이었다. 처음에는 저게 바꿀 수 있는 건지도 몰랐다. 개발자 도구로 요소를 클릭해보다가 클래스 이름을 발견했고, CSS 덮어쓰기로 충분히 스타일을 바꿀 수 있다는 걸 알게 됐다. 첫 번째: 개발자 도구로 카카오 버튼 클래스명 정확히 찾기어떤 요소를 바꾸려면 먼저 그 요소의 이름을 알아야 한다. 마치 사람을 부를 때 이름을 .. 2026. 5. 4. 네이버 블로그 HTML (허용 태그, deprecated, 반응형 한계) 솔직히 저는 네이버 블로그에서도 div와 style 속성이 당연히 된다고 생각했습니다. 티스토리에서 하던 방식 그대로 붙여 넣었다가 저장 직후 싹 사라지는 걸 보고 한동안 멍했습니다. 그 경험 이후로 네이버 블로그의 HTML 허용 구조를 하나씩 직접 실험하며 파악해 나갔는데, 오늘은 그 과정에서 터득한 현실적인 방법들을 공유합니다.저장하자마자 사라진 코드 — 네이버의 XSS 방어 구조네이버 블로그가 div, style, script 태그를 서버 단에서 자동 제거하는 이유는 XSS(Cross-Site Scripting) 방어 때문입니다. XSS란 악의적인 사용자가 웹 페이지에 스크립트를 삽입해 다른 방문자의 브라우저에서 해당 코드를 실행시키는 공격 방식입니다. 쉽게 말해, 누군가 블로그 본문에 악성 Jav.. 2026. 4. 30. 티스토리 스킨 구조 파악 (개발자 도구, CSS 역추적, 치환자) 남의 CSS 코드를 복붙했는데 아무 일도 일어나지 않는 경험, 한 번쯤 해보셨습니까? 저는 #content에 width를 아무리 줘도 사이드바가 꿈쩍도 안 해서 한참을 헤맸습니다. 알고 보니 제 스킨은 #content라는 ID 자체가 없었습니다. 티스토리 스킨 구조를 제대로 파악하지 않으면 이런 일이 반복됩니다. 개발자 도구와 CSS 역추적을 함께 쓰는 방법을 알고 난 뒤로는 구조 파악에 걸리는 시간이 눈에 띄게 줄었습니다.개발자 도구 없이 스킨을 건드리면 생기는 일티스토리 스킨 편집창을 처음 열면 HTML과 CSS가 뒤섞인 코드가 나옵니다. 여기에는 치환자(substitution variable)가 포함되어 있습니다. 치환자란 티스토리가 실제 렌더링 시점에 특정 데이터로 자동 대체해주는 플레이스홀더로,.. 2026. 4. 29. Flexbox 레이아웃 (주축 교차축, flex-shrink, 반응형) 솔직히 저는 float 레이아웃이 잘못됐다는 걸 한참 동안 몰랐습니다. 사이드바가 본문 아래로 밀려나는 현상을 며칠째 붙잡고 있으면서도 clearfix를 빠뜨린 탓인지, 너비 계산이 틀린 건지 갈피를 잡지 못했습니다. 그러다 Flexbox를 처음 써본 날, 부모 요소 하나에 display: flex 한 줄을 추가했더니 자식 요소들이 나란히 붙어버렸습니다. 너무 간단해서 오히려 뭔가 빠진 게 있는 줄 알고 코드를 두세 번 다시 확인했습니다.주축과 교차축, 개념부터 잡아야 실수가 줄어든다Flexbox를 처음 배울 때 가장 먼저 막히는 부분이 주축(main axis)과 교차축(cross axis) 개념입니다. 주축이란 flex 컨테이너 안에서 자식 요소들이 나열되는 기본 방향을 말하고, 교차축은 그 방향에 수.. 2026. 4. 16. CSS 폰트 가독성 (font-size, line-height, letter-spacing) 솔직히 처음에는 제 블로그 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 그런데 제가 직접 모바일로 읽어보니 두 문단도 안 가서 눈이 불편해졌습니다. 문제는 콘텐츠가 아니라 CSS였습니다. font-size, line-height, letter-spacing 설정 몇 가지를 바꾸고 나서야 같은 글이 다르게 느껴졌습니다. 이 경험을 바탕으로 블로그 가독성을 실질적으로 높이는 CSS 설정을 정리했습니다.내용이 좋아도 읽기 불편하면 독자는 떠난다. CSS 몇 줄 바꾸고 나서 체류 시간이 달라지는 걸 느꼈다.font-size와 line-height, 숫자 하나가 읽히는 경험을 바꾼다티스토리 기본 스킨은 font-size가 14px으로 설정되어 있습니다. font-size란 화면에 렌더링되는 글자의 기본 크기.. 2026. 4. 8. 이전 1 다음
