“HTML이 쌩얼이라면, CSS는 메이크업입니다.”
아무리 내용(HTML)이 좋아도, 디자인(CSS)이 구리면 사람들은 읽지 않습니다.
반대로 디자인만 화려하고 내용이 없으면? 그것도 문제입니다.
하지만 블로거라면 최소한 기본적인 CSS는 알아야 똥손을 탈출하고 가독성을 높일 수 있습니다.
1. 30초 요약 (옷 입히기)
- HTML: 구조 (뼈대). “여기에 제목이 있다. 여기에 이미지가 있다.”
- CSS: 표현 (피부). “제목은 파란색으로 해라. 이미지는 가운데 정렬해라.”
CSS는 선택자 { 속성: 값; } 형태로 이루어집니다.
* h1 { color: red; } -> 모든 제목(h1)을 빨간색으로 바꿔라.
2. 당신이 몰랐던 진실: 계단식(Cascading) 규칙
CSS의 C가 Cascading(폭포수처럼 떨어지는)이란 뜻입니다.
이게 무슨 말이냐면, “가장 마지막에 명령한 놈이 이긴다”는 규칙입니다.
- 위에서 “제목을 파란색으로 해!”라고 함.
- 아래에서 “제목을 빨간색으로 해!”라고 함.
- 결과: 빨간색. (나중에 말한 게 우선권 가짐)
여러분이 스킨을 수정했는데 반영이 안 된다면? 어딘가에서 다른 CSS가 덮어씌우고(Override) 있기 때문입니다. 이럴 땐 !important라는 강제 명령어를 쓰기도 하지만, 남용하면 족보가 꼬입니다.
3. 실전 활용법: 가독성 높이는 3대장
블로그에서 건드려야 할 CSS는 딱 3가지입니다.
- line-height (줄 간격): 이게 좁으면 글이 답답해 보입니다.
1.6~1.8정도가 읽기 편합니다. - font-size (글자 크기): 모바일 시대입니다.
16px이상은 되어야 눈이 안 아픕니다. (요즘은 17~18px도 많이 씀) - margin/padding (여백): 문단 사이를 띄워주세요. 여백의 미가 있어야 체류 시간이 늡니다.
4. 도구로 해결하기 (feat. SEO HTML Cleaner)
“CSS 모르는데 글 예쁘게 못 쓰나요?”
HTML Cleaner로 뼈대만 깨끗하게 잡으면, 나머지는 티스토리/워드프레스 스킨의 CSS가 알아서 입혀줍니다.
👉 SEO HTML Cleaner (태그 청소기) 바로가기
- 여러분이 할 일은 ‘구조(HTML)’를 명확히 하는 것입니다.
- 디자인은 스페셜리스트(스킨 제작자)에게 맡기세요.
- 괜히 어설프게 색깔 넣지 말고, 깔끔한 H태그만 잘 써도 디자인 점수 80점 먹고 들어갑니다.
디자인은 더하는 것이 아니라 빼는 것입니다.
화려한 효과를 빼고, 독자가 글에만 집중할 수 있게 정돈하는 것. 그게 최고의 CSS 전략입니다.