구글 블로그 CSS 추가 방법

구글 블로그에서 HTML로 작성한 구조를 꾸미기 위해 CSS 스타일을 추가할 수 있습니다. 이 CSS를 추가하여 구글 블로그의 레이아웃 및 디자인을 변경할 수 있습니다. CSS를 추가하는 방법에는 크게 2 가지 방법이 있습니다.

첫 번째 방법은 HTML 보기에 CSS를 추가하는 것이고, 두 번째 방법은 테마 맞춤설정으로 CSS를 추가하는 것입니다. 이 두 가지 방법 이외에도 CSS 추가 방법이 더 있지만, 블로거 초보 사용자를 위한 CSS를 추가할 수 있는 쉬운 방법에 대해 살펴보겠습니다.

첫 번째 방법. HTML 보기

구글 블로거 글쓰기 에디터는 작성 모드를 'HTML 보기'로 변경할 수 있습니다. 'HTML 보기' 모드에 CSS를 추가할 수 있습니다.

HTML 보기에서 자주 사용하는 CSS 스타일 작성 방법에 대해 살펴보겠습니다.

그 다음 <style> 태그 안에 CSS를 작성합니다.

<style>
  p { text-align: center; }
  div { clear: both; }
  a { display: block; padding: 1em 0; }
</style>

또는 style 속성으로도 CSS를 추가할 수 있습니다. 방법은 다음과 같습니다.

HTML 태그 안에 style 속성을 작성합니다.

<p style=" "> </p>
<div style=" "><a style=" "> <img /> </a></div>

따옴표 안에 CSS 스타일을 추가합니다.

<p style="text-align: center;"></p>
<div style="clear: both;"><a style="display: block; padding: 1em 0;"> <img/></a></div>

TIP
만약 CSS 스타일이 적용되지 않을 경우 !important로 우선순위를 지정해줄 수 있습니다. 예를 들어 가운데 정렬이 되지 않는다면 다음과 같이 할 수 있습니다. style="text-align: center !important;"

테마 맞춤설정을 활용하면 HTML을 직접 편집하지 않고 CSS 코드를 쉽게 추가할 수 있습니다.

1. 블로거 홈 화면 왼쪽 메뉴에서 '테마' > '맞춤설정' 클릭합니다.

2. 왼쪽 탭에서 '고급' > 'CSS 추가' 클릭합니다.

3. CSS 코드를 추가하고 오른쪽 하단에서 '저장'을 클릭합니다.

위 과정을 모두 거치면 블로그에 자동으로 CSS가 추가됩니다. 추가한 CSS 코드를 확인하는 방법은 다음과 같습니다.

CSS 수정과 편집이 모두 가능합니다. 그러나 HTML과 CSS 사용에 능숙한 전문가라면 이 곳에서 편집을 할 수 있지만, 구글 블로거 초보 사용자에겐 권장되지 않는 방법입니다.