전체 글73 워드프레스 CSS 커스터마이징: functions.php 없이 테마 바꾸는 현실 방법 6가지 워드프레스 CSS 커스터마이징: functions.php 없이 테마 바꾸는 현실 방법 6가지워드프레스 테마를 처음 바꾸려고 할 때 검색하면 제일 먼저 나오는 게 functions.php 수정이다. 그 파일을 열었다가 PHP 코드가 가득한 걸 보고 바로 닫았다. 잘못 건드렸다가 흰 화면이 떴다는 경험담을 너무 많이 읽어서 손이 안 갔다. 마치 시계를 처음 뜯어보는 사람한테 태엽부터 분해하라고 하는 것 같은 느낌이었다. 사실 functions.php 없이도 CSS를 충분히 커스터마이징할 수 있다. 내가 실제로 써본 방법들을 현실적인 순서로 정리했다.첫 번째: 워드프레스 기본 제공 추가 CSS 입력창 쓰기워드프레스 대시보드에서 외모 > 사용자 정의하기를 열면 맨 아래에 추가 CSS 메뉴가 있다. 이 입력창에 .. 2026. 5. 3. 구글 서치콘솔 연동 head 태그 관리: 메타 태그 충돌 없이 인증 코드 삽입하는 방법 5가지 구글 서치콘솔 연동 head 태그 관리: 메타 태그 충돌 없이 인증 코드 삽입하는 방법 5가지구글 서치콘솔을 처음 연동하려고 시도했을 때 생각보다 오래 걸렸다. HTML 메타 태그를 붙여넣으라고 하는데 어디에 붙여야 하는지 정확히 몰랐고, 붙이고 나서 인증 버튼을 눌렀더니 "확인할 수 없습니다"가 떴다. 마치 자물쇠에 열쇠를 꽂았는데 돌아가질 않는 느낌이었다. 원인은 두 가지였다. 위치가 잘못됐거나, 스킨이 렌더링하면서 태그를 변형시키거나. 이 두 가지를 해결하는 방법을 실제로 겪은 순서대로 정리했다.첫 번째: head 태그 안 정확한 위치에 붙이는 것이 전부다구글이 요구하는 인증 메타 태그는 반드시 head 태그 안에 있어야 한다. body 안에 넣으면 구글 봇이 인식을 못 한다. 마치 편지 봉투에 수.. 2026. 5. 2. 공유 버튼 직접 구현 (배경, SDK 분석, 실전 적용) 버튼 하나 없어서 지인이 URL을 손으로 복사해 카카오톡에 붙여넣었다는 얘기를 전해 들었습니다. 그 순간 마찰이라는 게 눈에 보이는 것이 아니라 행동으로 드러난다는 걸 실감했습니다. 플러그인을 먼저 찾아봤지만 블로그 디자인과 이질감이 생겼고, 결국 카카오·네이버·X 공유 버튼을 직접 구현하기로 했습니다.버튼이 없어도 공유는 일어난다, 문제는 마찰이다독자가 URL을 직접 복사해서 붙여넣는 행동을 한다는 건, 공유 의지가 있다는 뜻입니다. 그런데 버튼이 없으면 그 의지가 행동으로 이어지는 중간에 불필요한 단계가 끼어듭니다. 이른바 UX(사용자 경험)에서 말하는 마찰(Friction)의 전형적인 사례입니다. 여기서 마찰이란 사용자가 원하는 행동을 완료하기까지 겪는 불필요한 저항을 의미합니다. 클릭 한 번으로 .. 2026. 5. 1. 네이버 블로그 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. 블로그 프로그레스 바 (scroll 이벤트, requestAnimationFrame, 완독률) 방문자 대부분이 글의 30% 지점에서 이탈하고 있었습니다. 오랜 시간 공들여 쓴 글인데 스크롤 깊이 지표가 그걸 보여줬을 때, 솔직히 좀 허탈했습니다. 글이 문제인지 구조가 문제인지 알 수가 없어서 프로그레스 바를 붙여보기로 했습니다. 상단에 얇은 바 하나 올리는 게 뭐가 어렵겠냐 싶었는데, 실제로 해보니 생각보다 손이 꽤 많이 갔습니다.scroll 이벤트와 requestAnimationFrame의 관계처음 코드를 짤 때 scroll 이벤트 핸들러 안에서 바로 style.width를 수정했습니다. 스크롤하는 순간 화면이 뚝뚝 끊겼고, 콘솔을 열어보니 이벤트가 초당 수십 번씩 발생하고 있었습니다. 여기서 scroll 이벤트란 사용자가 페이지를 스크롤할 때마다 브라우저가 연속으로 발생시키는 신호입니다. 문제.. 2026. 4. 28. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
