구글 블로그 CSS 추가 방법

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

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

목차

1. 첫 번째 방법. HTML 보기
2. 두 번째 방법. 테마 맞춤설정

 

첫 번째 방법. HTML 보기

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

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

1. 먼저 <style> 태그를 작성합니다.
   

   <style>
   
   </style>

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

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

 

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

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

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

2. 따옴표 안에 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 코드를 확인하는 방법은 다음과 같습니다.

1. 블로거 홈 > 테마 > 맞춤설정 우측 더 보기 > HTML 편집를 클릭합니다.
2. 블로거 테마 편집기 페이지입니다. 마우스로 편집기 안의 아무곳이나 클릭하여 포커스 해줍니다.
3. 문서 내 검색(Ctrl + F)으로 ]]><b:skin>을 검색합니다.
4. ]]><b:skin> 바로 위쪽에서 추가한 CSS 코드를 확인할 수 있습니다.

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