전체 글118 CSS 변수 - 커스텀 프로퍼티, 유지보수, 다크 모드 색상 코드를 Ctrl+F로 하나씩 뒤지며 교체하다가 결국 배포 후에 버그를 발견한 적 있으신지요. 저는 있습니다. 그것도 클라이언트 블로그에서요. 그 사건 이후 CSS 변수를 모든 스킨 작업에 기본으로 도입하기 시작했습니다. 써보기 전과 후의 체감 차이가 생각보다 컸습니다.그런데 사실 이 이야기를 하기 전에 먼저 짚고 싶은 게 있습니다. 그 버그는 단순히 색상 코드를 놓쳐서 생긴 문제가 아니었습니다. 근본적으로는 같은 값이 코드 곳곳에 흩어져 있던 구조 자체가 문제였습니다. CSS 변수는 그 구조적 문제를 해결하는 도구입니다. 색상 관리 편의성만으로 설명하면 반쪽짜리 이해가 됩니다. 저는 이 구분을 제대로 하는 데도 꽤 시간이 걸렸습니다.커스텀 프로퍼티, 실제로 어떻게 동작하는가CSS 변수는 공식 명칭으.. 2026. 4. 16. Flexbox를 늦게 알아버린 사람의 이야기 솔직히 저는 float 레이아웃이 잘못됐다는 걸 한참 동안 몰랐습니다. 사이드바가 본문 아래로 밀려나는 현상을 며칠째 붙잡고 있으면서도 clearfix를 빠뜨린 탓인지, 너비 계산이 틀린 건지 갈피를 잡지 못했습니다. 지금 돌아보면 그 며칠이 꽤 소모적인 시간이었는데, 문제는 기술적인 이해 부족이 아니라 "이 방식 자체가 맞는가"라는 질문을 너무 늦게 던졌다는 데 있었습니다.그러다 Flexbox를 처음 써본 날, 부모 요소 하나에 display: flex 한 줄을 추가했더니 자식 요소들이 나란히 붙어버렸습니다. 너무 간단해서 오히려 뭔가 빠진 게 있는 줄 알고 코드를 두세 번 다시 확인했습니다. float 시절의 저는 clearfix, 너비 계산, overflow 처리까지 머릿속에 함께 굴리면서 레이아웃.. 2026. 4. 16. float 수십 줄 버리고 CSS Grid 다섯 줄로 끝낸 날 float 코드 수십 줄을 다 버리고 CSS 다섯 줄로 끝낸 날, 솔직히 허탈했습니다. 그 전날 밤을 새웠거든요. 그리고 동시에 약간 화가 났습니다. 왜 아무도 처음부터 이걸 알려주지 않았을까 싶었습니다. 티스토리에 카드형 레이아웃을 넣고 싶다면 CSS Grid가 거의 유일한 정답에 가깝습니다. 단, 코드를 복붙하기 전에 반드시 확인해야 할 게 있습니다.반응형 카드 그리드, 코드보다 스킨 구조가 먼저입니다CSS Grid를 처음 제대로 써본 건 티스토리 리스트형 스킨을 카드형으로 바꾸려고 했을 때였습니다. float로 2열 레이아웃을 만들었는데, 카드 높이가 조금만 달라지면 레이아웃 전체가 어긋났습니다. clearfix를 추가하고, 음수 마진도 써보고, 온갖 방법을 시도했는데 결국 근본적인 해결이 안 됐습.. 2026. 4. 16. CSS 파일 3,000줄에서 원하는 곳 찾는 법, F12 하나면 됩니다 티스토리 스킨 CSS 파일을 열었더니 3,000줄이 넘어서 그냥 닫아버린 적 있으신가요? 저도 있습니다. 제목 폰트를 바꾸려고 Ctrl+F로 "title"을 검색했더니 수십 개가 튀어나왔고, 어느 게 내가 바꾸려는 제목인지 알 수가 없었습니다. 하나씩 바꾸고 저장하고 확인하고 되돌리는 작업을 몇 시간 동안 반복했습니다. F12를 제대로 알고 나서 그 시간이 거의 사라졌습니다.돌이켜보면 그때 제가 했던 방식은 눈을 감고 찾는 것과 다름없었습니다. 원하는 곳이 어딘지 모른 채 전체를 뒤지는 거죠. F12는 그 과정을 완전히 뒤집어놓습니다.코드 위치를 모를 때의 막막함스킨 편집을 처음 시작하면 반드시 막히는 지점이 있습니다. "어디를 고쳐야 하는지는 아는데, 코드가 어디에 있는지 모른다"는 상황입니다. CSS.. 2026. 4. 15. HTML/CSS 독학, 어디서 시작해야 하는가 처음 HTML을 배워보겠다고 결심했던 날, 저는 이틀을 유튜브 영상 목록 스크롤에 날렸습니다. 조회수 높은 강의를 클릭했다가 닫고, 또 다른 걸 클릭했다가 닫는 걸 반복했습니다. 지금 돌이켜보면 그건 배우기를 망설이는 게 아니었습니다. 잘못된 방법으로 시작할까봐 두려워하는 상태였습니다. 비전공자가 HTML/CSS를 독학할 때 가장 먼저 막히는 건 개념이 아닙니다. "어디서 시작하느냐"입니다. 직접 겪어보고 정리한 순서와 무료 학습 사이트, 그리고 중간에 포기하지 않는 방법을 공유합니다. 일단 치고 보는 것, 그게 시작이었습니다저는 결국 W3Schools에서 태그를 하나씩 따라 치는 것으로 시작했습니다. 머리로 먼저 이해하려고 하지 않고, 눈에 보이는 코드를 그냥 손으로 입력하는 방식이었습니다. 그렇게 했.. 2026. 4. 15. 스마트폰에서 글씨가 사라졌다 나타나는 현상, 원인은 폰트였습니다 스마트폰으로 블로그를 열었을 때 텍스트가 2초 가까이 아예 안 보이다가 갑자기 뜨는 현상을 경험한 적 있으신가요? 저는 한동안 모바일 인터넷 속도 탓을 했습니다. Wi-Fi 연결 상태가 좋을 때도 같은 증상이 반복됐고, 그제야 "이건 네트워크 문제가 아닐 수 있다"는 생각이 들었습니다. PageSpeed Insights에서 구글 폰트 링크가 "렌더링 차단 리소스"로 잡히는 걸 보고 나서야 원인이 다른 곳에 있다는 걸 알았습니다. HTML 설정 두 줄을 바꾸는 것으로 체감이 달라졌습니다.사실 이 문제를 처음 발견했을 때 꽤 허탈했습니다. 폰트 설정 두 줄 문제로 방문자들이 빈 화면을 보고 있었다는 게 믿기지 않았거든요. 하지만 그게 현실이었습니다. 그래서 이 경험을 그냥 지나치지 않고 정리하기로 했습니다... 2026. 4. 15. 이전 1 ··· 13 14 15 16 17 18 19 20 다음
