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