전체 글73 CSS 별점 위젯 (HTML 구조, 형제 선택자, 반 별 구현) 리뷰 글을 꾸준히 올리다 보면 한 번쯤 이런 생각이 드실 겁니다. "별점 하나 넣고 싶은데, 플러그인 쓰기엔 너무 무겁고 스타일은 또 따로 놀고." 저도 그 고민을 꽤 오래 했습니다. 결국 JavaScript 없이 CSS만으로 별점 위젯을 직접 만들어 붙였고, 그 과정에서 배운 것들을 정리해 봤습니다.HTML 구조: 왜 별을 거꾸로 써야 할까요처음 이 방법을 접했을 때 가장 당황했던 부분이 바로 HTML 마크업 구조였습니다. 별을 5번부터 1번 순서로 역순 배치한다는 게 직관과 정반대라서, 저도 처음엔 "이게 맞나?" 싶어 순서를 몇 번이나 바꿔가며 테스트했습니다.핵심은 CSS의 일반 형제 결합자(General Sibling Combinator, ~)에 있습니다. 여기서 ~ 선택자란 같은 부모를 가진 형.. 2026. 4. 27. blockquote 스타일링 (border-left, 가상 요소, 의미론적 마크업) blockquote에 CSS 한 줄을 추가했을 뿐인데, 독자 반응이 달라졌습니다. 인용구인지 본문인지 헷갈린다는 피드백을 받고 나서야 시각적 구분이 글 읽기에 얼마나 직접적인 영향을 주는지 실감했습니다. 스타일링이 단순한 꾸밈이 아니라 정보 전달의 문제라는 걸, 저는 그날 처음으로 제대로 이해했습니다.border-left와 가상 요소로 인용구를 눈에 띄게 만드는 법글 안에서 전문가 발언을 인용했는데 "그게 인용인지 본문인지 헷갈렸다"는 독자 반응을 받은 게 계기였습니다. 여러분도 블로그에 인용구를 넣어봤다가 그냥 밋밋하게 흘러가버린 경험 한 번쯤 있지 않으신가요? 저는 그날 이후 브라우저 기본 스타일에서 벗어나기로 했습니다.제일 먼저 시도한 게 border-left였습니다. border-left란 요소의.. 2026. 4. 27. 티스토리 상단 알림 바 (position fixed, padding-top, sessionStorage) 블로그에 구독 유도 장치를 여러 개 달아봤는데 다 효과가 없었던 경험이 있습니다. 사이드바, 글 하단 CTA, 본문 중간 삽입까지 시도해봤지만 공통적으로 독자 반응이 없었습니다. 그러다 상단 고정 알림 바를 달기 시작했고, 달고 나서야 왜 이게 맞는 위치인지 이해했습니다. 이 글은 그 과정에서 직접 겪은 실수와 해결 방법을 정리한 것입니다.position fixed와 padding-top 보정처음 알림 바를 달았을 때 글 제목이 보이지 않는 상황이 생겼습니다. 방문자가 페이지에 들어오면 글 제목 첫 줄이 알림 바에 그대로 가려져 있었습니다. 원인은 간단했습니다. position: fixed 속성을 적용했는데 body에 padding-top 보정을 하지 않은 것이었습니다.position: fixed란 해당.. 2026. 4. 26. Core Web Vitals 개선기 (CLS, LCP, INP) CLS 수치 0.31. 구글 서치 콘솔에서 경고 메일을 받았을 때 저도 처음엔 이게 뭔 숫자인지 몰랐습니다. 페이지가 로드되면서 뭔가 살짝 밀리는 느낌은 늘 있었는데, 그게 구글한테 측정되고 있었다는 걸 그날 처음 알았습니다. 직접 수정해가며 깨달은 것들을 순서대로 정리했습니다.CLS를 잡는 데 이미지 태그 하나가 이렇게 중요할 줄 몰랐습니다CLS(Cumulative Layout Shift)란 페이지가 로드되는 동안 화면의 요소들이 얼마나 많이, 얼마나 크게 움직이는지를 수치로 나타낸 지표입니다. 쉽게 말해 "로딩 중에 화면이 얼마나 덜컹거리는가"를 측정하는 값인데, 구글은 0.1 이하를 좋음 기준으로 정의하고 있습니다(출처: Google Web.dev).저는 PageSpeed Insights로 원인을 .. 2026. 4. 26. 인피드 광고 최적화 (CSS 스타일, 배너 블라인드니스, CLS) 광고가 콘텐츠처럼 보일수록 클릭률이 올라간다는 말, 반은 맞고 반은 위험합니다. 저는 블로그 리디자인을 하면서 이 문제를 처음 직접 맞닥뜨렸고, 단순히 CSS 몇 줄을 고치는 작업이 생각보다 훨씬 복잡한 문제와 연결돼 있다는 걸 깨달았습니다. 인피드 광고 스타일을 맞추는 일은 기술의 문제이기도 하고, 동시에 독자와의 신뢰에 관한 문제이기도 합니다.CSS 스타일 통일로 배너 블라인드니스 극복하기배너 블라인드니스(Banner Blindness)란, 사용자가 광고처럼 생긴 영역을 무의식적으로 회피하는 현상을 말합니다. 쉽게 말해, 광고 냄새가 나는 순간 눈이 먼저 피한다는 겁니다. 사용자 경험 연구 기관인 Nielsen Norman Group의 연구 결과에 따르면, 이 회피 반응은 학습된 행동으로 의식적인 판.. 2026. 4. 25. 뷰포트 단위 (vw 광고, vh 모바일, dvh 전환) 미디어 쿼리 없이 반응형 레이아웃을 만들 수 있다면 믿어지십니까? 저도 처음엔 반신반의했습니다. 그런데 광고 컨테이너에 width: 90vw를 입력한 순간, 몇 주 동안 붙잡고 있던 문제가 두 줄로 해결됐습니다. 뷰포트 단위(Viewport Unit)가 단순히 "화면 크기에 맞추는 단위" 정도로 알려져 있지만, 실제로는 광고 렌더링 품질과 모바일 사용자 경험을 직접 좌우하는 핵심 CSS 속성입니다.vw로 광고 컨테이너 문제 해결하기width: 728px로 고정값을 주던 시절이 있었습니다. 데스크탑에서는 멀쩡해 보였는데, 700px 이하 화면에서 광고가 오른쪽으로 삐져나오거나 가로 스크롤이 생겼습니다. max-width를 추가해봤지만 부모 컨테이너를 벗어나는 경우는 막지 못했습니다. 솔직히 이건 예상 밖이.. 2026. 4. 25. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
