블로그디자인4 워드프레스 CSS 커스터마이징: functions.php 없이 테마 바꾸는 현실 방법 6가지 워드프레스 CSS 커스터마이징: functions.php 없이 테마 바꾸는 현실 방법 6가지워드프레스 테마를 처음 바꾸려고 할 때 검색하면 제일 먼저 나오는 게 functions.php 수정이다. 그 파일을 열었다가 PHP 코드가 가득한 걸 보고 바로 닫았다. 잘못 건드렸다가 흰 화면이 떴다는 경험담을 너무 많이 읽어서 손이 안 갔다. 마치 시계를 처음 뜯어보는 사람한테 태엽부터 분해하라고 하는 것 같은 느낌이었다. 사실 functions.php 없이도 CSS를 충분히 커스터마이징할 수 있다. 내가 실제로 써본 방법들을 현실적인 순서로 정리했다.첫 번째: 워드프레스 기본 제공 추가 CSS 입력창 쓰기워드프레스 대시보드에서 외모 > 사용자 정의하기를 열면 맨 아래에 추가 CSS 메뉴가 있다. 이 입력창에 .. 2026. 5. 3. CSS Counter (counter-reset, 자동번호, 가상요소) 솔직히 저는 꽤 오랫동안 순위 번호를 HTML에 직접 손으로 입력했습니다. 번호 하나 바꾸려고 태그를 하나씩 열고 닫는 게 당연한 줄 알았거든요. CSS Counter를 알게 된 건 실수를 반복하고 나서였는데, 알고 보니 이미 CSS 안에 자동 번호 기능이 내장되어 있었습니다. 이 글은 그 기능을 어떻게 써먹었는지, 그리고 실제로 써보니 어떤 점이 좋고 어떤 점은 주의해야 하는지에 대한 이야기입니다.하드코딩 번호가 무너지던 날TOP 10 추천 글을 처음 발행했을 때 저는 모든 순위 번호를 1, 2 형태로 직접 HTML에 박아 넣었습니다. 그 당시에는 별 생각이 없었는데, 문제는 글을 올린 다음 날 생겼습니다. 3위와 4위 항목을 바꿔야 하는 상황이 생긴 거죠.텍스트만 옮기면 끝날 것 같았지만, 번호 태그.. 2026. 4. 17. CSS 변수 (커스텀 프로퍼티, 유지보수, 다크 모드) 색상 코드를 Ctrl+F로 하나씩 뒤지며 교체하다가 결국 배포 후에 버그를 발견한 적 있으신지요. 저는 있습니다. 그것도 클라이언트 블로그에서요. CSS 변수(Custom Properties)는 그 사건 이후 제가 모든 스킨 작업에 기본으로 도입한 도구입니다. 써보기 전과 후의 체감 차이가 생각보다 컸습니다.커스텀 프로퍼티, 실제로 어떻게 동작하는가CSS 변수는 공식 명칭으로 커스텀 프로퍼티(Custom Properties)라고 부릅니다. 커스텀 프로퍼티란 개발자가 직접 이름을 정해 값을 저장하고, 필요한 곳 어디서든 꺼내 쓸 수 있는 CSS 고유의 변수 시스템을 의미합니다. 변수 이름 앞에 하이픈 두 개(--)를 붙이고, :root 선택자 안에 선언하면 페이지 전체 어디서나 접근할 수 있습니다. 값을 .. 2026. 4. 16. CSS Grid로 티스토리 카드형 레이아웃 (반응형, 스킨충돌, 매거진) float 코드 수십 줄을 다 버리고 CSS 다섯 줄로 끝낸 날, 솔직히 허탈했습니다. 그 전날 밤을 새웠거든요. 티스토리에 카드형 레이아웃을 넣고 싶다면 CSS Grid가 거의 유일한 정답에 가깝습니다. 단, 코드를 복붙하기 전에 반드시 확인해야 할 게 있습니다.반응형 카드 그리드, 코드보다 스킨 구조가 먼저입니다CSS Grid를 처음 제대로 써본 건 티스토리 리스트형 스킨을 카드형으로 바꾸려고 했을 때였습니다. float로 2열 레이아웃을 만들었는데, 카드 높이가 조금만 달라지면 레이아웃 전체가 어긋났습니다. clearfix를 추가하고, 음수 마진도 써보고, 온갖 방법을 시도했는데 결국 근본적인 해결이 안 됐습니다. 그때 Grid로 갈아탔고, display: grid에 repeat(2, 1fr) 한 .. 2026. 4. 16. 이전 1 다음
