전체 글73 모바일 HTML 표 최적화 (반응형, data-label, 접근성) 처음 블로그에 비교표를 올렸을 때 내 눈엔 깔끔하게 보였다. 데스크탑 화면에서 컬럼이 딱딱 맞아 떨어지고, 텍스트도 잘 들어가 있었다. 뿌듯한 마음으로 저장하고 나서 핸드폰으로 확인했는데, 표가 화면 밖으로 반쯤 튀어나와 있었다. 마치 옷장에 양복을 넣으려는데 소매가 문 밖으로 빠져나온 것 같은 기분이었다. 억지로 접어 넣어도 다음날 보면 또 삐져나와 있는 그 느낌.문제는 HTML 표 자체가 모바일 우선 시대 이전에 설계된 요소라는 데 있다. 기본 동작이 "내 열 너비만큼 공간이 있어야 한다"는 것이라서, 화면이 좁으면 그냥 삐져나와 버린다. 내가 잘못 만든 게 아니라 애초에 그렇게 만들어진 것인데, 그걸 나중에야 알았다.그 이후로 표를 만들 때마다 모바일 뷰를 먼저 확인하는 버릇이 생겼다. 데스크탑에서.. 2026. 4. 11. 티스토리 목차 만들기 (앵커링크, 체류시간, SEO) 처음 티스토리 블로그를 시작했을 때 나는 목차라는 개념 자체를 별로 심각하게 생각하지 않았다. 글을 쓰면 당연히 읽어야 하는 거 아닌가, 위에서 아래로 죽 내려가면 되는 거 아닌가 하고. 마치 골목 맛집에 처음 갔을 때 메뉴판 없이 주인아주머니가 그냥 "오늘 건 이거예요" 하면 그냥 시키는 것처럼. 선택지가 없으니 고민도 없고, 불편한지도 몰랐다.그런데 어느 날 내 글의 평균 체류 시간이 40초대라는 걸 구글 서치 콘솔에서 확인했다. 분명 2000자가 넘는 글인데 40초면 사람들이 첫 두 단락만 보고 나가는 거다. 그때부터 '왜 안 읽고 나가지?'를 진지하게 고민하기 시작했고, 거기서 목차라는 게 얼마나 중요한지 깨달았다.목차는 독자에게 "이 글에 당신이 찾는 게 있어요"라고 먼저 말해주는 역할을 한다... 2026. 4. 11. 애드센스 광고 배치 (광고 위치, 광고 밀도, CSS 구현) 애드센스를 블로그에 달고 나서 처음 한 달 동안 CTR이 0.3%도 안 나왔다. 트래픽이 문제인가, 글이 문제인가 싶었는데 알고 보니 광고 위치가 문제였다. 광고가 아예 보이지 않는 곳에 처박혀 있거나, 페이지 맨 아래에 혼자 덩그러니 있거나. 글을 다 읽고 나면 이미 독자가 뒤로 가기를 눌러버린 다음이다.CSS로 광고 위치를 제대로 잡기 시작하고 나서부터 CTR이 조금씩 달라졌다. 광고를 늘린 게 아니라 위치를 바꿨을 뿐이다.또한 독자 대부분은 거기까지 스크롤하지 않았습니다. 광고 위치를 바꾸면서 상황이 달라지기 시작했고, 그 과정에서 배치 전략이 얼마나 중요한지 몸으로 배웠습니다.이 글에서는 내가 직접 써보면서 "이게 맞다"고 느낀 광고 배치 전략 네 가지를 정리한다. 광고 위치: 독자 시선이 멈추는.. 2026. 4. 10. CSS 눈 피로 줄이기 (색상 설정, 줄 길이, 다크모드) 한참 모니터를 들여다보다가 퇴근하면서 눈이 뻑뻑하고 화면이 잔상처럼 남는 느낌, 한 번쯤 겪어봤을 거다. 나는 그게 당연한 줄 알았다. 컴퓨터를 많이 써서 그런 거라고. 그런데 어느 날 CSS를 조금 손봤더니 같은 시간을 봐도 눈이 덜 피로한 걸 느꼈다. 모니터가 바뀐 것도, 안경을 새로 맞춘 것도 아니었는데.그 뒤로 화면이 눈에 주는 피로감이 설정에 따라 달라진다는 걸 체감했다. 오늘은 내가 직접 써보고 "이건 확실히 다르다"고 느낀 CSS 설정 다섯 가지와, 그걸 다크모드까지 연결하는 방법을 정리한다.배경색, 글자색, 줄 길이 — 숫자로 보는 색상 설정배경색을 순수 흰색인 #ffffff 대신 #faf9f6으로 바꾸는 것은 단순한 취향 문제가 아닙니다. 이 차이는 광도(Luminance) 값의 차이로 .. 2026. 4. 10. CSS 강조 박스 (박스 모델, 박스 유형, 다크모드) 처음 CSS를 시작했을 때, 박스 하나 만드는 데 왜 이렇게 헤매는지 몰랐다. border를 넣고, 배경을 바꾸고, padding이 왜 이렇게 튀어나오지? 하면서 새로고침만 수십 번 눌렀다. 그러다 어느 순간 깨달았다. 박스는 그냥 사각형이 아니라 독자에게 신호를 보내는 도구라는 걸. 그 뒤로 박스를 만드는 방식이 달라졌다.이 글에서는 내가 블로그와 토이 프로젝트에서 실제로 써먹으며 "이건 진짜 쓸 만하다"고 느낀 7가지 강조 박스를 정리했다. 코드만 던지는 게 아니라, 각각 어떤 상황에서 왜 써야 하는지까지 담았다.박스 모델: 수치 뒤에 숨어 있는 구조의 진실CSS에서 강조 박스를 만들 때 가장 먼저 맞닥뜨리는 개념이 박스 모델(Box Model)입니다. 여기서 박스 모델이란 HTML 요소 하나가 화면.. 2026. 4. 9. CTA 버튼 디자인 (버튼 유형, 접근성, hover) 버튼 하나를 바꿨을 뿐인데 클릭이 생겼습니다. 저도 처음엔 그 차이가 버튼에서 나온다는 걸 몰랐습니다. 배경색에 텍스트만 얹으면 된다고 생각했으니까요. CTA 버튼은 디자인 유형마다 작동하는 맥락이 다르고, hover 피드백과 접근성까지 함께 설계해야 비로소 제 역할을 합니다.버튼 유형별 설계 전략처음 블로그에 CTA(Call to Action) 버튼을 달았을 때, 버튼 배경은 연한 파란색이었고 텍스트는 회색이었습니다. 여기서 CTA란 사용자에게 특정 행동을 유도하는 요소로, "지금 구매하기"나 "더 알아보기" 같은 버튼이 대표적입니다. 당연히 클릭이 없었습니다. 나중에 보니 버튼이 있는 건지 없는 건지 구분이 안 될 정도였으니까요.Solid 버튼으로 교체하면서 배경을 진한 파란색으로, 텍스트는 흰색으로.. 2026. 4. 8. 이전 1 ··· 8 9 10 11 12 13 다음
