“폰트 이쁘게 하려고 이것저것 넣었는데요.”
블로그 글 꾸미기에 진심인 분들이 자주 하는 실수입니다.
글자 색 바꾸고, 배경색 넣고, 폰트 바꾸고… HTML 코드 안에 직접 스타일을 박아넣는 것, 바로 인라인 스타일(Inline Style)입니다.
눈에는 예쁘지만, 검색 엔진에겐 최악의 적입니다.
1. 30초 요약 (덕지덕지 코드)
- CSS (권장): 옷장(CSS 파일)에 옷을 넣어두고 “1번 옷 꺼내 입어”라고 지시함. 깔끔함.
- 인라인 스타일 (비권장): 옷장에 안 넣고, 옷을 몸에 꿰매서 입음.
<p style="font-size: 16px; color: #333; line-height: 1.5; font-family: 'Nanum Gothic';">내용</p>
이렇게 쓰면 글(Content)보다 껍데기(Code)가 더 무거워집니다. 페이지 용량이 커져서 로딩이 느려지죠.
2. 당신이 몰랐던 진실: 유지보수의 지옥
만약 여러분이 인라인 스타일로 글 100개를 썼습니다.
어느 날 “폰트 크기를 16px에서 18px로 바꾸고 싶다”는 생각이 듭니다.
- CSS 사용 시: CSS 파일 딱 한 줄만 고치면 글 100개가 동시에 바뀜. (1초 컷)
- 인라인 스타일 사용 시: 글 100개를 일일이 열어서 수정해야 함. (100시간 걸림. 사실상 불가능)
이게 바로 개발자들이 인라인 스타일을 극혐하는 이유입니다.
3. 실전 활용법: 클래스(Class) 사용하기
스타일을 주고 싶다면 인라인 말고 클래스를 쓰세요.
- 나쁜 예:
<span style="background: yellow;">강조</span> - 좋은 예:
<span class="highlight">강조</span> - CSS 설정: 내 블로그 스킨 편집(CSS)에
.highlight { background: yellow; }라고 한 번만 등록해두세요.
4. 도구로 해결하기 (feat. SEO HTML Cleaner)
“이미 쓴 글에 인라인 스타일이 너무 많은데요?”
걱정 마세요. 청소기로 빨아들이면 됩니다.
👉 SEO HTML Cleaner (태그 청소기) 바로가기
- 에디터에서 쓴 글을 복사해서 붙여넣으세요.
- 인라인 스타일 제거 옵션을 켜고 청소하세요.
style="..."부분이 싹 사라진 깨끗한 코드가 나옵니다.
화장은 지우는 것이 더 중요합니다.
웹페이지도 마찬가지입니다. 불필요한 스타일을 지워야 본질(콘텐츠)이 빛납니다.