구글 블로그 CSS 코드 추가 / 변경 (테마 디자이너, HTML 편집)

구글 블로그(Blogger)에서 CSS 코드를 어떻게 추가·변경하는지 소개하겠습니다. 아래의 검은색 박스 안에 있는 CSS 코드를 추가해야 한다고 가정해봅시다.

먼저 테스트 CSS 코드 전체를 복사합니다.

🍀/* ... */ 이 부분은 코드에 대한 설명이니 삭제해도 됩니다.

/* 테스트 CSS 코드 */
body {
  background-color: aliceblue; /* 배경색을 앨리스블루로 설정 */
}

복사한 CSS 코드를 [방법 1] 또는 [방법 2]를 통해서 구글 블로그에 넣어줍니다.

방법1Blogger 테마 디자이너를 사용해서

'Blogger > 테마 > 맞춤설정 > 고급 > CSS 추가'로 이동해서 위에서 복사한 코드를 붙여넣기(Ctrl + V)합니다.
🍀아래의 동영상을 참고하세요.

Blogger 테마 디자이너(Customizer)의 디자인이 변경되었지만, 방법 자체는 같습니다.

방법2HTML 편집을 해서

확인 사항 (2020.08.04)

'Blogger > 테마 > HTML 편집'의 경로를 통해서 직접 코드를 변경하는 경우에는 'Blogger > 테마 > 백업' 기능을 이용해서 xml 파일을 사전에 다운로드해 두고, 변경 후에 다시 다운로드합니다. 그리고 변경 전과 후를 비교해서 실제로 자신이 의도한 부분만 변경되었는 지를 확인하세요.

'Blogger > 테마 > HTML 편집'으로 이동해서 입력 커서를 편집 영역 안에 둔채, 찾기 단축키 Ctrl + F를 누릅니다. 그리고 「]]></b:skin>」를 입력하고 엔터! 그리고 위에서 복사한 코드를 「]]></b:skin>」의 윗 부분에 붙여넣기합니다.

🍀아래의 동영상을 참고하세요.

⚠️HTML 편집하기 전!에 꼭 해야하는 건 아니지만 혹시 모를 실수를 대비해 백업을 합니다. 동영상에서 'HTML 편집' 버튼을 누를 때 맨 위에 있는 '백업' 버튼 보이시죠? 그 버튼으로 편집 작업 전에 미리 xml 파일을 다운로드해둡니다. 이 xml 파일로 원래대로 되돌릴 수 있는데, '복원' 버튼을 클릭해서 미리 다운로드해둔 xml 파일을 업로드하면 원상 복구됩니다. 백업은 간단한 일이고 해두면 안심이니 하는게 좋다고 봅니다. 여기에서 등장하는 xml은 테마 디자이너, 레이아웃 등에서 설정한 모든 내용들이 기록되어 있는 파일입니다. 일종의 설계서라고 생각하세요. Blogger 서버는 이 설계서를 보고 웹사이트(블로그)를 만듭니다. 참고로 엄밀히 말하면 'HTML 편집'이 아니라 'XHTML 편집'이라는 용어가 더 적합합니다.

방법 1과 2는 무슨 차이가 있나?

방법 1로 작업하면 결과적으로 방법 2처럼 됩니다. 방법 1로 작업한 뒤 'Blogger > 테마 > HTML 편집' 경로를 따라 직접 가서 코드를 확인해보면 무슨 말인지 알게 됩니다. 방법 1로도 충분히 CSS 코드를 추가·변경할 수 있고 게다가 더 안전한 방법입니다. Blogger를 잘 이해하고 있거나 코딩에 익숙하다면 방법 2로 하는 것도 좋겠죠. 단, 방법 2로 작업하려면 앞서도 언급했지만 백업하는 습관을 들이도록 합니다.

방법 1이든 2든 CSS에 대해 이미 알거나 조금 공부한다면 구글 블로그를 좀더 취향에 맞게 커스터마이징할 수 있는 기회가 생깁니다. 비단 구글 블로그만 그런게 아니라 다른 블로그 플랫폼도 마찬가지입니다. 아무리 훌륭하고 유연성에 뛰어난 도구를 제공하는 블로그 플랫폼을 사용한다 하더라도 정해진 틀 안에서의 자율성과 확장성에는 당연히 한계가 있습니다. 그래서 막상 처음에는 맘에 들어도 사용하다 보면 조금씩 맘에 안드는 구석이 보이기 시작하고 바꾸고 싶다는 생각이 꾸물꾸물 올라와 바꾸려면 약간의 프로그래밍 지식이 필요한 경우가 간혹 있을 수 있습니다.

그 때, CSS 공부는 여기(한국어 지원)에서 해보세요. 설명 그리고 예제까지 잘 되어 있어 도움이 될거라 생각합니다.

하지만! 블로그를 꾸미는 것은 적당히 가장 중요한 건 물론 블로그 글(콘텐츠)의 질이라는 거 변함이 없겠죠?