블로그스팟 HTML CSS 수정 제대로 하는 법. 코드 위험 없이 테마를 편집하고, 글 상단사이드바 가젯을 배치하는 구조 원리까지 단계별 안내합니다.
블로그스팟(Blogger)에서 테마 편집과 디자인 커스터마이징은 블로그를 차별화하고 방문자 경험을 높이는 효과적인 방법입니다. 하지만 테마 구조와 HTML/CSS 원리를 이해하지 않고 수정하면, 가젯 초기화나 레이아웃 깨짐 문제가 발생할 수 있습니다.
이번 글에서는 블로그스팟에 안전하게 CSS를 추가하는 방법과 글 상단 및 사이드바 가젯 배치 원리를 정리했습니다. 블로그스팟 입문자나 이전 사용자라면 반드시 숙지해야 할 핵심 내용입니다.
1. 블로그 스팟에서 CSS 편집 방법
블로그스팟에서 디자인을 수정하려면 ‘HTML 편집’과 ‘레이아웃 메뉴’ 방식을 이해해야 합니다. HTML 편집은 완전한 제어가 가능하지만 위험성이 있고, 레이아웃 메뉴는 안전하지만 구조 수정에 한계가 있습니다.
HTML 편집 vs 레이아웃 메뉴 차이
| 항목 | HTML 편집 | 레이아웃 메뉴 |
|---|---|---|
| 구조 변경 | 코드 직접 수정, 완전 제어 | 시각적 위치 이동만 가능 |
| 위험성 | 가젯 초기화 및 레이아웃 깨짐 위험 | 매우 안전함 |
CSS 적용 실무 팁
- 전역 스타일:
head영역 내style블록에 작성하세요. - 인라인 스타일: 특정 요소에만
style="..."속성을 부여하지만, 유지보수를 위해 지양하는 것이 좋습니다.
2. 글 상단 가젯과 사이드바 가젯 배치 방법
블로그스팟은 가젯 영역을 b:section 태그로 정의합니다. 이 태그가 위치한 곳에만 레이아웃 메뉴에서 가젯을 추가할 수 있습니다.
b:section 코드 구조 예시
b:section id='post-top' class='post-top' showaddelement='yes' maxwidgets='5'/
- showaddelement=’yes’: 레이아웃 메뉴에 ‘가젯 추가’ 버튼이 활성화됩니다.
- maxwidgets: 해당 영역에 담을 수 있는 가젯의 최대 개수입니다.
글 상단 가젯이 지원되지 않는 테마라면, 본문 위쪽에 이 코드를 직접 삽입하여 영역을 생성할 수 있습니다.
3. 메인 페이지와 라벨 페이지의 Blog1 위젯 활용
블로그스팟은 카테고리 페이지가 별도로 존재하지 않습니다. 대신 Blog1 위젯이 URL 파라미터(라벨 필터)에 따라 다른 글들을 필터링하여 보여주는 구조입니다.
- 라벨 기반 필터:
/search/label/라벨명주소로 접속하면 해당 글만 자동 노출됩니다. - 페이지 글 수 조절:
data:blog.pageSize또는 URL 뒤에?max-results=5를 붙여 제어 가능합니다.
질문 1: 블로그스팟에서 CSS를 안전하게 수정하려면 어떻게 해야 하나요?
가능하면 테마의 HTML 편집기에서 style 블록 안에 코드를 모아서 관리하세요. 직접 스타일을 입히는 인라인 방식은 나중에 수정하기 매우 번거롭습니다. 또한 수정 전 반드시 ‘테마 백업’을 수행하는 습관을 들이세요.
질문 2: 글 상단에 광고나 공지 가젯을 넣고 싶은데 메뉴가 보이지 않습니다. 해결 방법은?
사용 중인 테마의 본문(main) 위쪽에 b:section 영역이 없기 때문입니다. HTML 편집 창에서 본문 위 영역에 직접 b:section 코드를 삽입하면 레이아웃 메뉴에 ‘가젯 추가’ 버튼이 생성됩니다.
질문 3: 특정 카테고리(라벨) 페이지만 디자인을 다르게 할 수 있나요?
완전히 다른 구조를 갖기는 어렵지만, 조건부 태그(b:if cond=’data:blog.searchLabel’)를 사용하면 특정 라벨 페이지에서만 특정 CSS나 가젯이 나타나도록 제어할 수 있습니다.
2025.12.24 데일리허브