분류 전체보기73 CSS 폰트 가독성 (font-size, line-height, letter-spacing) 솔직히 처음에는 제 블로그 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 그런데 제가 직접 모바일로 읽어보니 두 문단도 안 가서 눈이 불편해졌습니다. 문제는 콘텐츠가 아니라 CSS였습니다. font-size, line-height, letter-spacing 설정 몇 가지를 바꾸고 나서야 같은 글이 다르게 느껴졌습니다. 이 경험을 바탕으로 블로그 가독성을 실질적으로 높이는 CSS 설정을 정리했습니다.내용이 좋아도 읽기 불편하면 독자는 떠난다. CSS 몇 줄 바꾸고 나서 체류 시간이 달라지는 걸 느꼈다.font-size와 line-height, 숫자 하나가 읽히는 경험을 바꾼다티스토리 기본 스킨은 font-size가 14px으로 설정되어 있습니다. font-size란 화면에 렌더링되는 글자의 기본 크기.. 2026. 4. 8. Media Query로 모바일 최적화 (반응형 CSS, 브레이크포인트, 애드센스) 티스토리 블로그에 애드센스 광고를 붙이고 나서 PC로 보면 멀쩡한데 모바일로 열면 광고가 화면 밖으로 삐져나와 있었다.가로 스크롤이 생기고 레이아웃이 무너지는 거다. 처음엔 애드센스 설정 문제인 줄 알고 광고 코드를 이리저리 바꿔봤다. 원인은 거기 있지 않았다. CSS에서 화면 크기에 따라 반응하는 설정을 제대로 안 해뒀던 게 문제였다. 그게 Media Query다.Media Query로 모바일 최적화 (반응형 CSS, 브레이크포인트, 애드센스)티스토리에 애드센스 광고를 처음 붙이고 나서, PC에서는 레이아웃이 멀쩡한데 스마트폰으로 보니 화면 오른쪽이 잘려나가는 걸 발견했습니다. 가로 스크롤이 생긴 겁니다. 원인을 찾는 데만 한참이 걸렸고, 그 과정에서 Media Query가 블로그 운영에서 얼마나 근본.. 2026. 4. 7. HTML 주석 활용법 (구역 표시, 임시 비활성화, 할 일 목록) 한 달 전에 내가 만든 HTML 파일을 다시 열었을 때 무슨 생각으로 이걸 짰는지 도무지 기억이 안 났다. div가 왜 이렇게 중첩되어 있는지, 이 클래스 이름은 왜 이렇게 지었는지. 내가 짠 코드인데 남이 짠 것처럼 낯설었다. 그날 이후로 주석을 제대로 달기 시작했다. 티스토리 스킨을 수정하다가 한 달 전에 짰던 코드를 다시 열어본 적 있으신가요. 저는 그 순간 "이 div는 왜 여기 있지?"를 속으로 수십 번 되뇌었습니다. HTML 주석(comment)은 브라우저가 읽지 않는 메모 공간인데, 이걸 제대로 쓰면 코드 관리 방식 자체가 달라집니다. 직접 겪고 나서야 그 차이를 실감했습니다. 주석 없이 짠 코드가 한 달 뒤 낯선 이유처음 티스토리 스킨을 손댈 때 저는 주석을 전혀 달지 않았습니다. 제가 직.. 2026. 4. 7. 메타 태그 SEO (meta title, meta description, OG 태그) 솔직히 저는 블로그를 꽤 오래 운영하면서도 검색 결과에 뜨는 설명 줄이 어디서 오는지 몰랐습니다. 구글이 알아서 본문에서 적당히 뽑아주는 줄만 알았는데, 어느 날 제 글을 직접 검색해보고 나서 생각이 완전히 바뀌었습니다. 설명 줄에 본문 중간의 접속사 덩어리가 그대로 나와 있었고, 그 글이 무슨 내용인지 전혀 알 수 없었습니다. 그때부터 메타 태그를 직접 챙기기 시작했습니다.검색 결과를 바꾸는 meta title과 meta description혹시 내 블로그 글을 직접 검색해서 결과 화면을 유심히 본 적 있으신가요? 파란 제목과 그 아래 설명 줄, 이 두 가지가 독자가 클릭할지 말지를 결정합니다. 그런데 이걸 직접 설정하지 않으면 구글이 본문에서 임의로 발췌합니다. 제 경험상 이게 생각보다 훨씬 엉뚱한 .. 2026. 4. 7. 블로그 이미지 최적화 (alt 텍스트, WebP 변환, lazy loading) 솔직히 저는 블로그 이미지가 SEO에 이렇게 큰 영향을 줄 줄 몰랐습니다. 키워드 배치에 공들이고, 내부링크 구조도 꼼꼼히 짰는데 검색 노출이 기대만큼 오르지 않았습니다. 결국 문제는 제가 신경도 쓰지 않던 이미지였습니다. 직접 겪어보고 나서야, 이미지 최적화가 선택이 아니라 기본기라는 걸 뼈저리게 느꼈습니다.alt 텍스트와 파일명, 구글 로봇이 읽는 것들처음에 저는 이미지를 올릴 때 alt 속성을 거의 비워뒀습니다. 귀찮기도 했고, 솔직히 그게 뭔 차이를 만드나 싶었습니다. 그런데 alt 속성(Alternative Text)이란 이미지를 눈으로 볼 수 없는 환경, 즉 구글 크롤러나 스크린 리더가 이미지를 인식하기 위해 읽는 텍스트 정보입니다. 구글 봇은 이미지를 시각적으로 판단하지 못하고 alt 텍스트.. 2026. 4. 6. H 태그 사용법 (구조적 오류, 헤딩 위계, SEO 최적화) H1을 한 포스팅에 네 번 썼습니다. 강조하고 싶은 문장마다 H1을 붙였고, 그게 문제라는 생각은 전혀 없었습니다. 소스 보기 버튼을 처음 눌러봤을 때 제 글이 얼마나 구조적으로 엉망이었는지 한눈에 보였습니다. 그날부터 H 태그가 다르게 보이기 시작했습니다.H 태그를 글자 크기 조절 도구로 쓰고 있진 않으신가요?블로그를 처음 만들었을 때 저는 H 태그가 단순히 글꼴 크기를 바꾸는 수단이라고 생각했습니다. H1을 쓰면 크게, H3를 쓰면 조금 작게. 그 이상의 의미는 몰랐습니다. 강조하고 싶은 문장이 생기면 망설임 없이 H1을 붙였고, 한 포스팅에 H1이 네 개 들어간 글도 있었습니다.그런데 헤딩 태그(Heading Element)는 디자인 도구가 아닙니다. 헤딩 태그란 HTML 문서에서 콘텐츠의 계층 구.. 2026. 4. 6. 이전 1 ··· 9 10 11 12 13 다음
