이 글에서는 구글 블로거에서 글을 좀 더 세련되고 편하게 작성하기 위한 방법에 대해서 설명합니다. 이를 달성하기 위해서 아래와 같은 순서로 설명합니다.
- 구글 블로거에서 글을 세련되게 작성하는 방법 개요
- 구글 블로거 CSS 설정
- 구글 블로거 글 템플릿 만들기
- 구글 블로거 글 템플릿 등록
구글 블로거에서 글을 세련되게 작성하는 방법 개요
구글 블로거의 새 글 편집기는 제공하는 기능이 상당히 적은 편입니다. 그래서, 네이버 블로그나 티스토리 블로그를 하시던 분들은 구글 블로거를 이용해서 블로그를 작성하였을 때 불편한 것이 많습니다.
이를 조금이라도 편하게 하기 위해서는 미리 사용할 것들을 CSS로 설정해 놓은 뒤, 글 템플릿에 해당 아이템을 모두 넣어 놓고 새 글 작성 시에 이용할 수 있도록 하는 것입니다.
CSS란
CSS란 Cascading Style Sheets의 약자입니다. 웹 페이지의 표시를 설명하는 데 사용되는 언어입니다. 이를 통해 웹 개발자는 색상, 레이아웃, 글꼴 및 기타 시각적 요소를 포함하여 HTML 및 XML 문서의 스타일을 지정할 수 있습니다.
CSS는 HTML 요소를 선택한 다음 스타일을 적용하여 작동합니다. 스타일은 HTML 요소나 요소 내의 클래스 또는 ID 특성에 직접 적용할 수 있습니다. 이를 통해 대상 스타일 지정이 가능하고 웹 개발자가 여러 페이지에서 일관된 스타일을 만들 수 있습니다.
외부 스타일 시트, 내부 스타일 시트 또는 인라인 스타일 사용을 포함하여 웹 페이지에 CSS를 포함하는 여러 가지 방법이 있습니다. 외부 스타일 시트는 스타일과 콘텐츠를 분리하여 웹 페이지를 보다 쉽게 유지 관리하고 업데이트할 수 있으므로 가장 일반적으로 사용되는 방법입니다.
CSS는 매력적이고 반응이 빠르고 사용자 친화적인 웹 사이트를 만드는 데 필수적인 도구입니다. 언어에 정기적으로 새로운 기능이 추가되면서 지속적으로 발전하고 있습니다. 웹 개발자는 HTML 및 JavaScript와 함께 CSS를 사용하여 사용자의 요구를 충족하는 동적 및 대화형 웹 페이지를 만듭니다.
먼저 CSS 설정을 알아보도록 하겠습니다.
구글 블로거 CSS 설정
구글 블로거에서 CSS 설정을 하기 위해서는 먼저 블로거에 로그인 합니다.
로그인 후 레이아웃을 클릭하면 우측에 레이아웃이 나타나며, 제일 우측 상단 부분에 "테마 디자이너"라는 항목이 나타납니다. 이를 클릭해서 테마 고급설정으로 들어갈 수 있습니다.
을 클릭하여 저장을 완료합니다. .my_note_blue {
position:relative;
background:#E0ECF8;
width:300px;
max-width: 100%;
text-align: center;
padding: 12px;
color:black;
}
.my_note_blue:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color: #FFFFFF #FFFFFF #0054FF #0054FF;
background: #0054FF;
display:block; width:0;
}
.my_note_yellow {
position: relative;
background-color: #ffc;
padding: 2rem;
text-align: center;
max-width: 200px;
}
.my_note_yellow::before {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 5px;
width: 50%;
top: 80%;
max-width: 200px;
box-shadow: 0px 13px 10px black;
rotate: 4deg;
}
table {
table-layout: auto;
width: 100%;
}
td {
width: 1em;
}
.table-wrapper {
overflow: auto;
}
textarea {
resize: both;
width: 100%;
}
.main{
margin-right: auto;
margin-left: auto;
}
.myButtonGreen {
background-color:#44c767;
-webkit-border-radius:28px;
-moz-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
&:hover {
background-color:#5cbf2a;
}
&:active {
position:relative;
top:1px;
}
}
.myButtonRed {
box-shadow:inset 0px 1px 0px 0px #f5978e;
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
background-color:#f24537;
border-radius:6px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;
}
.myButtonRed:hover {
background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
background-color:#c62d1f;
}
.myButtonRed:active {
position:relative;
top:1px;
}만약 본인의 블로그 헤더 CSS에 table/textarea가 없다면 이 내용들도 함께 만들기 위해 해당 내용도 CSS에 추가하시는 것이 좋습니다.
테이블과 텍스트 입력 폼은 아래와 같습니다.
table {
table-layout: auto;
width: 100%;
}
td {
width: 1em;
}
textarea {
resize: both;
width: 100%;
}위의 항목들이 자신의 블로그의 헤더에 들어있는지 확인하기 위해서는 "테마" > "HTML 편집"에서 검색해 보시면 확인하실 수 있습니다.
구글 블로거 글 템플릿 만들기
이제 각 항목에 대해서 템플릿을 만들어서 넣어 보도록 하겠습니다.
글 템플릿에 들어갈 항목은 다음과 같습니다.
- 1칸짜리 테이블
- 텍스트 입력 폼
- 노란색 메모
- 파란색 메모
- 녹색 버튼
- 빨간색 버튼
<p>이 글에서는 에 대해서 설명합니다. </p> <ul> <li>설명항목1</li> <li>설명항목2</li> </ul> <h2>제목1</h2> <hr /> <p>내용은 여기에 적습니다.</p> <pre class="prettyprint">여기에 코드 삽입 </pre> <h2>제목2 </h2> <hr /> <p>내용</p>
아래에 위의 항목들이 모두 들어간 html 코드를 작성하였습니다.
<p>이 글에서는 에 대해서 설명합니다. </p> <ul> <li>설명항목1</li> <li>설명항목2</li> </ul> <h2>제목1</h2> <hr /> <p>내용은 여기에 적습니다.</p> <pre class="prettyprint">여기에 코드 삽입 </pre> <br/> <p>글 내용</p> <br/> <h2>제목2 </h2> <hr /> <p>글 내용</p> <br/> <table> <tbody> <tr> <td><br />여기는 표를 넣을 수 있습니다. <br /><br /></td> </tr> </tbody> </table> <br/> <p>글 내용</p> <br/> <a class="myButtonGreen" href="https://eeddyit.blogspot.com">녹색 버튼 페이지 바로가기</a> <br/> <p>글 내용</p> <br/> <a class="myButtonRed" href="https://eeddyit.blogspot.com">빨강 버튼 페이지 바로가기</a> <br/> <p>글 내용</p> <br/> <div class="my_note_blue"> <p>파란색 배경 노트 입니다. 내용</p> </div> <br/> <p>글 내용</p> <br/> <div class="my_note_yellow"> <p>노란색 배경 노트 입니다. 내용</p> </div> <br/> <p>글 내용</p> <br/> <textarea style="height: 98px; width: 485px;"> 여기에는 입력할 수 있는 내용을 넣을 수 있습니다. </textarea> <br/> <p>글 내용</p> <br/> <p>글 내용</p>
이렇게 코드를 만들었는데, 코드가 정렬이 되어있지 않아서 보기 불편합니다. 이럴 때, 다음의 링크로 가서 html 코드를 정렬합니다.
코드를 정렬 하고 나면 아래와 같이 깔끔하게 들여쓰기가 정렬됩니다.
<p>이 글에서는 에 대해서 설명합니다. </p>
<ul>
<li>설명항목1</li>
<li>설명항목2</li>
</ul>
<h2>제목1</h2>
<hr />
<p>내용은 여기에 적습니다.</p>
<pre class="prettyprint">여기에 코드 삽입
</pre>
<br />
<p>글 내용</p>
<br />
<h2>제목2 </h2>
<hr />
<p>글 내용</p>
<br />
<table>
<tbody>
<tr>
<td><br />여기는 표를 넣을 수 있습니다. <br /><br /></td>
</tr>
</tbody>
</table>
<br />
<p>글 내용</p>
<br />
<a class="myButtonGreen" href="https://eeddyit.blogspot.com">녹색 버튼 페이지 바로가기</a>
<br />
<p>글 내용</p>
<br />
<a class="myButtonRed" href="https://eeddyit.blogspot.com">빨강 버튼 페이지 바로가기</a>
<br />
<p>글 내용</p>
<br />
<div class="my_note_blue">
<p>파란색 배경 노트 입니다. 내용</p>
</div>
<br />
<p>글 내용</p>
<br />
<div class="my_note_yellow">
<p>노란색 배경 노트 입니다. 내용</p>
</div>
<br />
<p>글 내용</p>
<br />
<textarea style="height: 98px; width: 485px;"> 여기에는 입력할 수 있는 내용을 넣을 수 있습니다.
</textarea>
<br />
<p>글 내용</p>
<br />
<p>글 내용</p>이제 글 템플릿 코드가 완성되었습니다. 위의 코드를 새 글 작성에서 HTML로 넣어서 정상적으로 나타나는지 확인합니다. 확인하면 아래와 같은 형태로 잘 나타나는 것을 확인할 수 있습니다.
이제 완성된 템플릿과 정렬한 코드를 가지고 글 템플릿에 등록하겠습니다.
구글 블로거 글 템플릿 등록
구글 블로거에 로그인하면 왼쪽 메인 메뉴에 설정이 있습니다. 이 설정을 누르시고 아래로 스크롤을 해보면 "글 템플릿"이라는 항목이 나타납니다.
위에서 만든 HTML 코드를 이 글 템플릿에 넣어주고 저장하면 완료됩니다.
위와 같이 해당 코드를 넣어 주고 "저장"을 눌렀습니다.
이제 저장 완료 메시지를 받으면 완료된 것입니다.
앞으로는 새 글 작성을 누르면 해당 템플릿이 적용된 페이지에서 시작하게 됩니다.
여기에서 글 작성하면서 필요한 것들만 복사해서 사용하시고 나머지는 지우시면 됩니다.
구글 블로거가 불편하기는 하지만 다양한 형태로 최적화 할 수 있으니 하나 하나 적용하면서 계속 블로그를 작성해 보도록 하겠습니다.
.png)
