구글 블로그|블로거 글 템플릿을 이용한 버튼|표|텍스트 입력폼|메모|노트 작성하기

이 글에서는 구글 블로거에서 글을 좀 더 세련되고 편하게 작성하기 위한 방법에 대해서 설명합니다. 이를 달성하기 위해서 아래와 같은 순서로 설명합니다.

구글 블로거에서 글을 세련되게 작성하는 방법 개요
구글 블로거 CSS 설정
구글 블로거 글 템플릿 만들기
구글 블로거 글 템플릿 등록

구글 블로거에서 글을 세련되게 작성하는 방법 개요

구글 블로거의 새 글 편집기는 제공하는 기능이 상당히 적은 편입니다. 그래서, 네이버 블로그나 티스토리 블로그를 하시던 분들은 구글 블로거를 이용해서 블로그를 작성하였을 때 불편한 것이 많습니다.

이를 조금이라도 편하게 하기 위해서는 미리 사용할 것들을 CSS로 설정해 놓은 뒤, 글 템플릿에 해당 아이템을 모두 넣어 놓고 새 글 작성 시에 이용할 수 있도록 하는 것입니다.

CSS란

CSS란 Cascading Style Sheets의 약자입니다. 웹 페이지의 표시를 설명하는 데 사용되는 언어입니다. 이를 통해 웹 개발자는 색상, 레이아웃, 글꼴 및 기타 시각적 요소를 포함하여 HTML 및 XML 문서의 스타일을 지정할 수 있습니다.

CSS는 HTML 요소를 선택한 다음 스타일을 적용하여 작동합니다. 스타일은 HTML 요소나 요소 내의 클래스 또는 ID 특성에 직접 적용할 수 있습니다. 이를 통해 대상 스타일 지정이 가능하고 웹 개발자가 여러 페이지에서 일관된 스타일을 만들 수 있습니다.

외부 스타일 시트, 내부 스타일 시트 또는 인라인 스타일 사용을 포함하여 웹 페이지에 CSS를 포함하는 여러 가지 방법이 있습니다. 외부 스타일 시트는 스타일과 콘텐츠를 분리하여 웹 페이지를 보다 쉽게 유지 관리하고 업데이트할 수 있으므로 가장 일반적으로 사용되는 방법입니다.

CSS는 매력적이고 반응이 빠르고 사용자 친화적인 웹 사이트를 만드는 데 필수적인 도구입니다. 언어에 정기적으로 새로운 기능이 추가되면서 지속적으로 발전하고 있습니다. 웹 개발자는 HTML 및 JavaScript와 함께 CSS를 사용하여 사용자의 요구를 충족하는 동적 및 대화형 웹 페이지를 만듭니다.

먼저 CSS 설정을 알아보도록 하겠습니다.

구글 블로거 CSS 설정

구글 블로거에서 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>이 글에서는 에 대해서 설명합니다.&nbsp;</p>
<ul>
<li>설명항목1</li>
<li>설명항목2</li>
</ul>
<h2>제목1</h2>
<hr />
<p>내용은 여기에 적습니다.</p>
<pre class="prettyprint">여기에 코드 삽입
</pre>
<h2>제목2&nbsp;</h2>
<hr />
<p>내용</p>

아래에 위의 항목들이 모두 들어간 html 코드를 작성하였습니다.

<p>이 글에서는 에 대해서 설명합니다.&nbsp;</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&nbsp;</h2>
<hr />
<p>글 내용</p>
<br/>
<table>
<tbody>
<tr>
<td><br />여기는 표를 넣을 수 있습니다. &nbsp;<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 코드 정렬 바로가기

코드를 정렬 하고 나면 아래와 같이 깔끔하게 들여쓰기가 정렬됩니다.

<p>이 글에서는 에 대해서 설명합니다.&nbsp;</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&nbsp;</h2>
<hr />
<p>글 내용</p>
<br />
<table>
    <tbody>
        <tr>
            <td><br />여기는 표를 넣을 수 있습니다. &nbsp;<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 코드를 이 글 템플릿에 넣어주고 저장하면 완료됩니다.

위와 같이 해당 코드를 넣어 주고 "저장"을 눌렀습니다.

이제 저장 완료 메시지를 받으면 완료된 것입니다.

앞으로는 새 글 작성을 누르면 해당 템플릿이 적용된 페이지에서 시작하게 됩니다.

여기에서 글 작성하면서 필요한 것들만 복사해서 사용하시고 나머지는 지우시면 됩니다.

구글 블로거가 불편하기는 하지만 다양한 형태로 최적화 할 수 있으니 하나 하나 적용하면서 계속 블로그를 작성해 보도록 하겠습니다.

구글 블로그|블로거 글 템플릿을 이용한 버튼|표|텍스트 입력폼|메모|노트 작성하기 - CSS 저장

구글 블로거에서 글을 세련되게 작성하는 방법 개요

구글 블로거 CSS 설정

구글 블로거 글 템플릿 만들기

구글 블로거 글 템플릿 등록

Popular Posts

구글 블로그:blogger에서 HTML 정렬하는 유용한 무료 사이트

현금 영수증 재발급 온라인 출력 - 홈텍스 사이트

아파치 카프카 (Apache Kafka) 퀵 스타트(Quickstart) 따라하기 - 테스트 방법

Categories

Footer Copyright

문의하기 양식