(3) 템플릿 수정: 카테고리 만들기, xml 편집

이 글은 다음 시리즈의 세번째 글입니다.

(1) 구글 블로그 개설하기 
(2) 구글블로그 템플릿 설정(자체/외부)
(3) 템플릿 수정: 카테고리 만들기, xml 편집

원래는 2개만 쓰려고했는데, 하다보니 계속 손이 갑니다.
저는 기본 html은 다룰 수 있고, 간단한 matlab programming 정도 마컴에 들어갈만한 코딩 정도는 가능한 공대졸업생입니다. C도 열심히 노려보면 해석은 가능합니다.
일단, xml 은 현재 전혀 모르는 상태지만, 공부하면서 이 게시글을 작성하게 될 것 같네요.

(3) 템플릿 수정: 카테고리 만들기, xml 편집

구글 블로그에 템플릿을 올려놨더니, 뭔가 외국 파워 블로그같은 느낌이 물씬 나서 기분이 너무 좋았습니다. 저는 외국스타일인듯. 

템플릿을 보니 메뉴라던지, 이것저것 수정해야할 것이 많더라고요.

기본 구글 블로그에는 카테고리가 없는 것도 왕왕있는데, 금방 카테고리를 만들곤 하더라구요. 그래서 어떤방식인가 하고 검색을 해보니 youtube에서 구글 블로그의 레이아웃 설정 프로그램에서 tag label 에 해당하는 것을 검색 링크해서 카테고리를 만드는 것을 확인했습니다. (참고: 동영상 https://www.youtube.com/watch?v=ot5YF2-ba9w,  설명글 https://support.google.com/blogger/answer/44498?hl=en)

1) google 레이아웃에서 카테고리 만들기

- 현재 가지고 있는 템플릿이 google 레이아웃에서 수정이 가능한가 확인해봅니다. 

아무래도 customized template이라 가능성은 희박하다고 생각은 하는데요.

- 해보니 새로운 가젯을 추가하는 방식으로 카테고리 사용은 가능한데, 위쪽 해더에 달린 메뉴를 수정할 수는 없네요. 제가 하고 싶은 것은 해더 밑의 메뉴 명 변경 & #태그로 링크 이동입니다.

*google 레이아웃에서 새로운 가젯 추가로 카테고리 만드는방법

1) 레이아웃에서 가젯추가 클릭

 2) 가젯 중에 태그 선택합니다. 가젯들 종류가 많아서, 나중에 추가하고 싶은건 따로 추가하면 될 것 같습니다.

 3) 태그 (=영어로 label 과 tag가 공통으로 사용됨) , 라벨 가젯 구성을 설정합니다.
    제목을 넣고, 모든 라벨을 선택할지 일부만 선택할지 결정해서 저장합니다.

 4) 그러면, 이렇게 우측에 가젯이 나옵니다.

하지만 저는 일단 이 방법은 아니라서 Header에서 메뉴명을 수정할 수 있는 방법을 찾아봅니다.

2) xml 편집으로 메뉴명 수정 및 태그링크 연결

- 현재 적용된 템플릿은 techworld customized template (Created By Sora Templates and My Blogger Themes) 입니다.

*헤더의 메뉴명 수정하기

1) 일단, 구글 블로그 템플릿의 HTML 편집으로 들어갑니다.

2) HTML 편집을 들어가면, 으어 외계어가 나옵니다. 

   뭐, 이해 못하면 외계어입니다 ㅠㅠ.  

저희가 업로드한 파일 생각나죠?

확장자명이 xml 였으니, xml 언어라고 보면 될 것 같습니다. ㅎㅎ

이 부분 편집을 들어가야 하는데, 하단부에 XML언어에 대한 자세한 설명을 wiki에서 링크해왔는데, 제가 이해한 부분은 이 정도입니다.

• HTML과 같이 <> 로 시작해서 </>로 끝난다는 점.
• &로 시작 ; 로 끝나는 구문도 있다는 점. 
• 객체지향언어들과 같이 class와 같은 같은 항목 구별이 되는 것 같음.   

3) business를 검색해서 메뉴명 바꾸기  

일단 할 수 있는 부분부터 찾읍시다. 에디터 창안에서 Ctrl+F 누르면, 찾기가 나옵니다. 

Business, sport 등 기본 설정되어있는 메뉴 부분을 수정합니다. 

중요한 것은 <li>가 뭔지 모르지만, <li> 로 시작했으면 </li>로 끝나야 한다는점. 

살펴보니 <ul>은 서브메뉴가 나오게 하는 내용이네요. 

<span>은 무슨 기능인지는 모르나, 메인 메뉴에는 양옆으로 <span>, </span>이 있습니다.

<a href="#"> 이부분에 태그를 넣어서 주소를 써주면 메뉴가 작동합니다.

<a href='http://skyfishbae.blogspot.com/search/label/internet'>

수정 적용된 화면입니다. 

가령 2개의 태그가 적용된 링크를 찾고 싶다면, %20을 넣어서 한다고 하네요.

<a href='http://skyfishbae.blogspot.com/search/label/travel%20and%20bicycle'>

참고: Greenlava의 Adding label (category) tabs to navigation bar

4) 다 좋은데, 상단에 [레이블이 internet인 게시물을 표시합니다.] 이 부분이 맘에 안드네요. 이 부분 지워봅니다.

참고: LAST TRAIN 의 구글블로그 '레이블이 ... 인 게시물을 표시합니다.' 없애는 방법

* 템플릿>맞춤설정> 고급 CSS 에 다음 내용을 추가합니다.

.status-msg-wrap{display: none;}

저는 어째서인지 적용이 안됩니다 ㅠㅠ

다른 방법을 찾았습니다. 

참고: NGY님의 글 http://15it.tistory.com/124

* 템플릿 > html편집> Ctrl+F 하고 .status-msg-wrap 찾습니다.

  .status-msg-wrap 부분을 다음과 같이 수정합니다. 

  .status-msg-wrap{display: none;}

>>적용결과, 이번엔 잘됬네요 ^^&

아 오늘도 많이 배웁니다.

좀 블로그 같아졌네요 ^^

By. skyfishBAE

<참고>

1. XML 이란?

출처: wikipedia (https://ko.wikipedia.org/wiki/XML)

XML(Extensible Markup Language)은 W3C에서 다른 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. XML은 SGML의 단순화된 부분집합이지만, 수많은 종류의 데이터를 기술하는 데 적용할 수 있다. XML은 주로 다른 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌다.

마크업 언어: markup language는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

프로세서(processor)와 애플리케이션(application)

프로세서는 마크업을 분석하고 구조화된 정보를 애플리케이션에 넘긴다. 이 명세는 XML 프로세서가 무엇을 해야하고 하지 말아야 하는지 제시하지만, 애플리케이션에 대해서는 다루지 않는다. 이 프로세서(명세가 부르기를)는 흔히 XML parser라 불린다.

마크업(markup)과 내용(content)

XML 문서를 구성하는 문자들은 마크업과 내용으로 나뉘는데, 그 구분은 간단한 문법 규칙으로 이루어진다. 일반적으로 마크업을 구성하는 문자열은 문자 <로 시작하여 문자>로 끝나거나, 문자 &로 시작하여 문자 ;로 끝나며, 마크업이 아닌 문자열은 내용이다. 그러나, CDATA 절에서, 구분자 <![CDATA[와 ]]>는 마크업으로 분류되고, 그들 사이의 텍스트는 내용으로 구분된다. 추가로, 가장 바깥 엘리먼트의 앞과 뒤의 공백(whitespace)은 마크업으로 분류된다.

태그(tag)

<로 시작하여 >로 끝나는 마크업 구조. Tags come in three flavors:

• 시작 태그(start-tag); 예: <section>
• 끝 태그(end-tag); 예: </section>
• 빈 엘리먼트(empty-element) 태그; 예: <line-break />

엘리먼트(element)

문서의 논리 요소로서, 시작 태그로 시작하여 짝이 되는 끝 태그로 끝나거나, 빈 엘리먼트 태그만으로 이루어진다. 시작 태그와 끝 태그 사이의 문자들은(있다면) 엘리먼트의 내용이고, 마크업을 포함할 수 있다. 이 마크업은 자식 엘리먼트(child elements)라 부르는 다른 엘리먼트들을 포함할 수도 있다. 엘리먼트의 예는 <Greeting>Hello, world.</Greeting> (see hello world). 다른 예는 <line-break />.

애트리뷰트(Attribute)

이름/값 짝으로 이루어진 마크업 구조로 시작 태그 또는 빈 엘리먼트 태그 속에 위치한다. 다음 예에서 엘리먼트 img는 src와 alt의 두 애트리뷰트를 갖는다:

<img src="madonna.jpg" alt='Foligno Madonna, by Raphael'/>

다른 예로

<step number="3">Connect A to B.</step>

에서 애트리뷰트 이름은 "number"이고 값은 "3"이다.

XML 선언

XML 문서는 다음과 같이 자신에 대한 정보 일부를 선언하는 것으로 시작할 수 있다:

<?xml version="1.0" encoding="UTF-8" ?>