티스토리CSS5 티스토리, 카카오 로그인 버튼 CSS - 기본 디자인을 내 브랜드에 맞게 바꾸는 방법 티스토리 블로그에 댓글 기능을 붙여두고 한동안 그냥 방치했다. 노란 카카오 버튼이 거기 있다는 걸 알면서도 딱히 건드릴 생각을 못 했다. 그러다 어느 날 블로그 디자인을 전체적으로 어두운 톤으로 다듬고 나서야 그 버튼이 눈에 확 들어왔다. 모노톤으로 정성껏 맞춘 공간에 형광 노란 의자 하나가 덩그러니 놓인 느낌이었다. 처음에는 저게 바꿀 수 있는 건지조차 몰랐다. 개발자 도구로 요소를 클릭해보다가 클래스명을 발견했고, 그때부터 CSS 덮어쓰기를 시도하기 시작했다.솔직히 처음 시도에서는 제대로 동작하지 않았다. 클래스명은 찾았는데 스타일이 반만 먹히고 나머지는 카카오 기본 스타일이 남아 있었다. 왜 이런지 이해하는 데도 시간이 걸렸다. 결국 CSS 우선순위 문제였다. 이 경험이 나중에 다른 스킨 수정 작업.. 2026. 5. 4. 뷰포트 단위(vw/vh/dvh)로 반응형 광고 컨테이너 완성하기 미디어 쿼리 없이 반응형 레이아웃을 만들 수 있다면 믿어지십니까? 저도 처음엔 반신반의했습니다. 그런데 광고 컨테이너에 width: 90vw를 입력한 순간, 몇 주 동안 붙잡고 있던 문제가 두 줄로 해결됐습니다. 뷰포트 단위가 단순히 "화면 크기에 맞추는 단위" 정도로 알려져 있지만, 실제로는 광고 렌더링 품질과 모바일 사용자 경험을 직접 좌우하는 핵심 CSS 속성입니다. 그 두 줄이 몇 주짜리 문제를 해결했을 때, 저는 기쁘기보다 허탈했습니다. 더 일찍 알았더라면 하는 생각이 먼저 들었기 때문입니다.vw로 광고 컨테이너 문제 해결하기고정값으로 광고 컨테이너 너비를 설정하던 시절이 있었습니다. 데스크탑에서는 멀쩡해 보였는데, 작은 화면에서 광고가 오른쪽으로 삐져나오거나 가로 스크롤이 생겼습니다. max-.. 2026. 4. 25. CSS 이미지 오버레이 - 구현 방식, 접근성 JavaScript 없이 이미지 위에 설명을 띄울 수 있다는 말, 처음엔 반신반의했습니다. 포트폴리오 페이지를 만들면서 mouseenter 이벤트 리스너를 카드마다 붙이던 저도 결국 CSS :hover 한 줄로 갈아탔고, 코드가 절반 이하로 줄었습니다. 그런데 직접 써보고 나서 느낀 건, 구현 방법을 배우는 것보다 그 전에 생각해야 할 것들이 더 많다는 점이었습니다. 효과가 화려할수록 그 뒤에 숨어 있는 문제가 더 많았습니다.opacity, translateY, clip-path: 세 방식의 실질적인 차이가장 흔하게 쓰이는 방법은 position:absolute와 opacity를 조합하는 방식입니다. 컨테이너에 position:relative를 주고, 오버레이를 absolute로 얹은 뒤 :hover 시.. 2026. 4. 21. float 수십 줄 버리고 CSS Grid 다섯 줄로 끝낸 날 float 코드 수십 줄을 다 버리고 CSS 다섯 줄로 끝낸 날, 솔직히 허탈했습니다. 그 전날 밤을 새웠거든요. 그리고 동시에 약간 화가 났습니다. 왜 아무도 처음부터 이걸 알려주지 않았을까 싶었습니다. 티스토리에 카드형 레이아웃을 넣고 싶다면 CSS Grid가 거의 유일한 정답에 가깝습니다. 단, 코드를 복붙하기 전에 반드시 확인해야 할 게 있습니다.반응형 카드 그리드, 코드보다 스킨 구조가 먼저입니다CSS Grid를 처음 제대로 써본 건 티스토리 리스트형 스킨을 카드형으로 바꾸려고 했을 때였습니다. float로 2열 레이아웃을 만들었는데, 카드 높이가 조금만 달라지면 레이아웃 전체가 어긋났습니다. clearfix를 추가하고, 음수 마진도 써보고, 온갖 방법을 시도했는데 결국 근본적인 해결이 안 됐습.. 2026. 4. 16. 블로그 이미지 정렬 (figure태그, alt텍스트, box-shadow) 끼워 넣는 것과 제대로 다루는 것은 다른 일이다이미지를 열심히 넣었는데 왜 검색에서 아무도 안 올까. 나도 한동안 그 질문을 안고 살았다. 티스토리 에디터의 가운데 정렬 버튼만 수년째 눌러오면서, 이미지를 "끼워 넣는 것"과 "제대로 다루는 것"이 완전히 다른 일이라는 걸 몰랐던 거다. HTML과 CSS로 이미지를 직접 제어하기 시작하면서 구글 이미지 검색 유입이 생겼고, 블로그 전체 디자인도 달라졌다.처음에는 내용이 좋으면 이미지가 어디 있든 상관없지 않나 싶었다. 그런데 어느 날 내 글을 남이 보는 눈으로 처음부터 다시 읽어봤다. 이미지가 본문 한가운데 덩그러니 있고, 그 아래 텍스트가 이어지는데 이미지가 무슨 내용인지 설명이 없었다. 그냥 이미지 하나가 텍스트 사이에 끼어있는 느낌. 마치 책 본문 .. 2026. 4. 13. 이전 1 다음
