글 혹은 그림의 출처가 문제있다면 수정 및 삭제하겠습니다. 우측의 Tags 와 검색기능을 이용하여 편하게 찾을 수 있습니다.
Please check buttons on the right like Tags and language options if can't read this blog (*mobile not support)
위 사이트를 가면 BlogId를 넣으라고 나오며 이를 넣고 실행을 하면 기본동작을 확인가능하다.
이외 옵션을 넣고 동작확인이 가능하다.
BlogID 란
Google 내부에서 사용하는 ID로 처음에 나의 ID으로 착각했는데, 아니며 검색을 해도, 물어보라는식이였다.
하지만, 쉽게 알아내는 방법은 알아냈다. 로그인을 한 후 게시판글을 수정을 하거나 글을 쓰면, 자신의 BlogID와 Post ID를
상위 주소에서 쉽게 확인이 가능하며, 전체게시판을 가면 상위 주소도 확인가능하다.
사실 나에게는 다 필요는 없는거 같지만, 기본지식을 알아 두고만 있고, 추후 APP을 만든다면, 그때
다시 생각을 해보기로 했다.
3. Google Apps script
Google에서는 Web Interface로 다양한 Apps을 제공을 해주고 있다. 예를 들면, Doc, Sheets 기타등등
이 안에서 이 App의 Form을 변경하거나, Doc 안에서 Script를 넣어 동작시킬 수 있다고한다.
이 Script은 추후 편이성을 위해서 많이 이용될 것 같다.
본인도, Javascript을 잘 모르지만, Google을 통해 원하는 기능을 검색을 하면 풍부한 예제가 있기에, 어렵지 않게 구현하리라고 본다.
1.3 Blog에서 작은 Image 및 ICON 만드는 법
GIF/JPG/기타 등등 의 Image 파일 없이 쉽게 문자로만 Image를 만들수가 있다.
ICON을 쉽게 만드는 법
URL 중에 data:image/png 이런구조로된 것이 궁금하여 검색했는데, 아래 사이트에서 해답을 얻었다.
위 방식으로 할 경우, 그림파일을 문자로 base64로 Encoding하여 보여주며, 별도의 그림파일은 필요없고, 문자정보만 있으면 된다.
해상도가 낮으면 빠른 로딩을 가능하나, 버전이 낮은 브라우저는 지원이 불가능 (자세한 설명은 아래 사이트 참조)
Gadget이란, 구글 블로그는 블로그 안에 각 기능을 추가하기 쉽게 Gadget 형태로 각 기능을 가진 모듈로 레이아웃에서 제공한다.
HTML 편집에서의 Gadget (widget)
HTML 편집에서 Gadget의 구성을 자세히 살펴보면 b:widget 태그로 구성이 되어 있으며, 이는 id와 각각의 설정(widget-setting) 을 제공한다.
그리고, 세부조절을 위해서 widget 태그 내부에 div 태그로 다시 한번 포장이 되어있어 이를 변경이 되어 있어, style 태그 or Javascript 와 연결시켜 제어 및 디자인을 변경이 가능하다.
b:widget // Gadget 시작 id 확인 가능 , style 태그 적용
b:widget-setting // 설정 부분
b:includable id='main' // Gadget Body 구성
보통 div 태그와 같이 연동 없으면 추가 : style 태그 와 javascript 연동 가능
b: 로 구성된 script로 구성이 됨 : 자체 script 제공
b:includable
b:widget // Gadget 종료
div 태그가 없다면 추가 하여 넣어도 좋고, 본인의 맘대로 구성을 하여도 좋다.
내가 보기에는 중요한 것은 id를 넣어 줄 수 있는 태그의 구성인 것 같다.
id를 이용하여 style을 적용하고, 또한 다른 태그 id를 이용하여 부분적으로 Javascript과 연동하여 세부조절도 가능하다.
동적으로 하지 않을 거라면, style 태그 설정은 Head 태그 안에서 모두 처리를 하자.
템플릿->HTML편집 에서 간단히 TEST Program을 만들어 보자.
HTML편집에서는 Gadget을 widget이라고 하겠으며, 이를 다음과 같이 수정을 해보자.
widget의 style을 개별 적용
아래소스에서 style tag 안에 widget의 id name을 알아서 그에 맞게 widget의 디자인을 변경을 해보자.
#Label1,2,3은 내가 강제로 추가한 widget id name이며 이의 Style을 변경을 하자.(아래소스참고)
...
가젯 즉 widget의 구성
..
....
widget 과 javascript 적용
아래 소스에서 widget에 이제 Javascript를 적용하기 위해서 div에 id (LabelCon)를 강제로 부여하고 , 각각의 필요한 부분을 수정한다.
....
.....
구글 Jquery 적용 및 블로그 메뉴 변경
구글의 Jquery을 이용하여 widget을 control 해보고, style 태그과 함께 같이 수정했으며, widget의 margin control은 원래 Google 사이트와 비교하여,
블로그 디자인을 변경하였다. Google 사이트 소스분석이 너무 많아 필요한 부분만 일단 내 블로그에 적용하여 맞게 구현을 하였다. 만약 아래의 소스가 라인별로 숫자와 함께 보이지 않는다면, https의 지원문제로 이부분 보안을 해제해주자.
우선 레이아웃을 설정 및 변경하기 전에 본인이 원하는 전체 블로그를 생각을 하고, 다른 블로그를 참조하여 필요한 부분들을
가져와서 이를 보완한다.
Google 사이트
처음 Blogspot의 Gadget 수정을 시작 시도 한 것은, 전부 아래의 사이트 때문이며, 이 과정에서 당연스럽게 Google의 자연스러운 메뉴 선택 방식과 디자인 맘에 들었으나, 템플릿에 존재하지 않아, 위와 같이 잘 알지도 못하는 Javascript과 style tag까지 공부하기 시작했다. 나중에 보니, 구글은 ajax라고 해야하나 Jquery라고 해야하나 library로 이용해서 자연스럽게 이를 구현했으며, 나또한 이를 이용했다. CSS는 구글의 것이 너무 복잡하여 그냥 구글것을 참조했으나, 이제 알고 있는 지식으로 나만의 것을 구현하였다.
Blog에 C/C++ or Java or HTML or 기타 소스를 넣으면, 문제가 발생하는데, 특히 HTML의 경우 특수문자 (< >) 로 인하여 발생한다.
상위 소스를 넣을 경우 경우에 따라 라인마다 숫자표시 (Numbering) 이나, 라인의 강조 (Highlight) 등을 부가적인 기능을 바라는 사람이 많다.
이런 기능을 사용해주는 Javascript / CSS File 들이 존재하며 이를 이용하여 소스를 볼수가 있다.
하지만 기본적으로 거의 전부 pre tag를 이용하는 방법이며 이곳에서 세부기능은 css와 Javascirpt이 해결해주는 것 같다.
Hightlight , Line numbering 역시 Javascript이 전부 해결해주는 것 같다.
우선 가장 기본적인 Pre Tag를 이용한 간단한 소스 넣기를 부터 실행을 해보자.
다만, CSS or Style을 변경을 해주고 이를 적용하는 것이 좋다.
google prettify라는 것이 존재하며, 다양한 CSS파일을 쉽게 얻을 수 있으며,
SyntaxHighlighter 간단한 기능을 제공을 하고 있다.
하지만, HTML이 제대로 동작하지 않으며, pre tag처럼 특수문자를 변경을 해줘야하다.
이를 id="htmlXmp"를 넣어 동작가능하게 한 것 같은데 보기도 그리 좋지 않다
아래와 같이 head안에 넣고 pre tag와 함께 class="prettyprint" 함께 사용언어를 id or prettyprint 한 칸 띠고 넣는다.
Test program은 각 언어지원을 위해 sources 안에 있는 javascript들을 설정해주는 것 같다.
위의 test program들을 보고 사용하지 않을 생각이다.
사용방법
본인이 원하는 *.css 와 *.min.css 를 정하고 아래의 script를 실행하면 동작.
//Google prettify 사용을 위해서 아래와 같이 CSS File *.css / *.min.css 와 Javascript run_prettify.js 선언
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.css" rel="stylesheet" type="text/css"> </link>
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/vibrant-ink.min.css" rel="stylesheet" type="text/css"> </link>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> </script>
// 소스 표현
<pre class="prettyprint linenums:1 "> // Line Numbering을 1부터 시작
.......
<pre >
소스표현-사용예제 (미동작시 상위사이트 확인)
// Define our Function
function checkMeaningOfLife ( decimal, success ) {
if ( parseInt(decimal,10) === 42 ) {
window.console.log(success);
}
};
// Define our Variables
var str = 'The meaning of life is true',
decimal = 42.00;
// Fire our Function
checkMeaningOfLife(decimal,success);
Google's Prettify 기반으로 한 좀 더 나아진 SyntaxHighlighter이 존재하며, 설정도 더 편한 것 같아, 이 것으로 설정해보기로 했으나, 단점은 Google's Prettify 거의 유사하다.
현재 이 페이지에서는 2번 과 3번이 동시 실행시 3번이 2번에 영향을 주는 것 같으며, 둘 중 하나가 제대로 표현이 안되는 현상이 발생
만약 사용한다면 둘중 하나만 사용하도록 해야함 3번의 Google prettify만 적용 ( 역시나 HTML 쪽이 좀 문제)
사용방법
선언을 해주고, 원하는 설정변경해주면 되지만 현재 Jquery.min.js는 나의 경우는 다른 곳에서도 사용 중이므로 주의하자
// Define our Function
function checkMeaningOfLife ( decimal, success ) {
if ( parseInt(decimal,10) === 42 ) {
window.console.log(success);
}
};
// Define our Variables
var str = 'The meaning of life is true',
decimal = 42.00;
// Fire our Function
checkMeaningOfLife(decimal,success);
마지막으로 많이 사용되어지는 SyntaxHighlighter를 보겠지만 보안이 취약하다고하니 주의하자.
HTML 및 각종 언어 C, Java, 등을 쉽게 보여주며, 사용방법 및 설정이 용이하여 많이 사용되어지며
사용방법 역시 상위와 거의 동일하지만 다양한 기능 및 설정 제공을 해주는게 다르다
...........START // 만약 아래의 글이 안보이면 문제발생
.............END
SyntaxHighlighter 세부설정
사용방법은 pre tag 넣고, class="brush: xhtml; first-line: 10; highlight: [2, 4, 6] " 으로 brush aliases 기본으로 넣고, 설정옵션변경을 원하면, 세미콜론과 함께 추가
config과 defaults 의 설정내용이 나오며, 개별 default 값 확인가능.
bloggerMode: 블로거에서 사용하면 필수라고 적혀있음.
stripBrs : BR Tag 넣으면 이기능을 무시
smart-tabs: pre tag가 간혹 두개로 자동을 분리가 되었을때 혹은 나누어 쓸때 사용
