구글 블로그(blogger) 템플릿 변수 정의 (variable definitions)

그림1

블로거 템플릿을 편집할 때 스킨 부분을 클릭하면 가장 먼저 보이는 것이 바로 'variable definitions' 입니다. 'variable definitions'은 우리 말로는 '변수 정의', 또는 '변수 설정' 등으로 표현할 수 있습니다.

그림2

쉽게 말하면, 필요할 때마다 꺼내쓸 수 있도록, 몇가지 값(value)들을 미리 설정해놓는다는 것입니다. 그 동안 블로거를 하면서 이 부분은 거의 건드리질 않았는데, 이번에 폰트 설정하면서 공부를 해보니 꽤 유용한 기능임을 알 수 있었습니다.

먼저, 이 기능을 활용할 수 있으려면, 각각의 단어들이 무엇을 의미하는지를 알아야 할 텐데요.

name : name은 해당 변수의 고유한 이름, 또는 ID 입니다. 변수 이름에는 빈 공간(스페이스바)을 입력할 수 없습니다. 아래에서 다시 설명하겠지만, 변수를 꺼내 쓸 때 이 name을 이용합니다.

description : 해당 변수에 대한 간단한 설명입니다. description은 일종의 "display name"으로, 여기에 입력한 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

예1 :

 <Variable name="HTML1.background.color" description="쿵쿵따" type="color" default="#fb5e53" value="transparent"/>  

그림3

type : type은 변수의 유형입니다. color나 font, length, string(문자열), automatic 등으로 설정할 수 있습니다. color나 font 유형은 템플릿 디자이너를 통해서 수정할 수 있는 유형입니다. 나머지 유형의 변수는 HTML 편집 모드를 통해서만 수정할 수 있습니다.

default : 해당 변수에 대한 템플릿의 기본(default) 값(value)입니다. 템플릿 디자이너의 고급 설정 화면에서 '고급 변경사항 적용 취소'를 누르면 이 기본(default) 값으로 돌아갑니다. <예1-그림3>에서, 색상의 기본(default) 값이 "#fb5e53" 으로 설정되어 있으므로, 하단의 '쿵쿵따의 고급 변경사항 적용 취소' 버튼을 누르면 <그림4>에서처럼 default 값인 "#fb5e53"이 출력되게 됩니다.

그림4

value : 해당 변수의 현재 값(value)입니다. 현재의 템플릿이 어떤 값을 갖게 하려면, 바로 이 value 값에 주어져야 합니다.


이렇게 5가지로 정의된 변수(variables)들은 그룹으로도 묶을 수 있습니다.

예2 :

   <Group description="내가 만든 메뉴" selector="#HTML2">  
    <Variable name="HTML2Font" description="짜장면" type="font"  
      default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>  
    <Variable name="HTML2Fontcolor" description="짱뽕" type="color" default="#666666" value="#FFFFFF"/>  
   </Group>  

<Group> ... </Group> 태그에서,

description : 개별 변수에서와 마찬가지로 <Group> 태그의 description도 해당 그룹에 대한 설명이며, 여기에 입력된 텍스트는 템플릿 디자이너의 고급 설정에 표시됩니다.

그림5

selector : CSS에서의 선택자(selector)와 같은 개념입니다. 템플릿 디자이너에서 [고급]의 하위메뉴를 클릭하면 하단 화면에 해당 요소가 붉은 점선 하일라이트로 보여지게 되는데, 어떤 요소가 하일라이트될지를 결정하는 것이 바로 <Group> 태그의 selector 입니다.


이렇게 지정해둔 변수들은 템플릿 디자이너에서뿐만 아니라, 다른 요소들의 스타일을 설정할 때도 활용할 수 있습니다.

컬러나 폰트를 요소마다 일일이 지정하게 되면, 템플릿을 변경할 때마다 모든 요소들을 일일이 다 수정해야 합니다. 그러나, 컬러나 폰트 값을 변수로 지정하면, 변수만 변경하면 이 변수와 연동되어 있는 다른 요소들의 값을 같이 수정할 수 있습니다. 활용하기에 따라서, 매우 편리하게 쓰일 수 있는 기능입니다.

그림6

예를 들어, 어떤 위젯의 폰트와 컬러를 설정할 때 <예3>에서 처럼 폰트와 컬러 값을 직접 설정할 수도 있겠지만,

예3 :

 #위젯id {  
 font:italic bold 12px Georgia, serif;  
 color: #2580a2;  
 }  

폰트와 컬러 값이 템플릿의 다른 요소들의 값과 크게 다르지 않다면, <예4>에서처럼 변수로 지정할 수 있을 것입니다.

예4:

 #위젯id {  
 font: $(body.font);  
 color: $(link.color);  
 }  
   

변수 정의(variable definitions)에 정의된 값을 지정할 때는,

$(name)

<예4>에서 처럼, $과 괄호를 입렵하고 괄호 안에 원하는 변수의 name 을 지정해주면 됩니다.


좀 더 직관적인 예를 들어보겠습니다.

 <Variable name="baseball" description="Link Color" type="color" default="#2198a6" value="#2580a2"/>  

변수가 이렇게 설정되어 있고,

  #위젯id {   
  color: $(baseball);   
  }   

이런식으로 위젯의 컬러 값으로 변수를 끌어다썼다면, 복잡해 보이지만 위젯의 컬러 값으로 선택되는 것은 결국 value의 값, 즉 #2580a2 입니다.



! 해외 블로거의 글을 참고하여 작성했습니다.
Template Variables, The Blogger Guide
How to Make Custom Templates Support Blogger Template Designer, Blogger Illustrated

링크목록, 태그 가젯 좌측의 list style 보이지 않게 설정하기

블로거에서 기본으로 제공되는 가젯들 중에는 목록 태그(ul, li)로 이루어진 가젯들이 있습니다. '링크 목록' 가젯이나 '목록' 가젯, '태그' 가젯 등이 그러한 예들인데요.

'깔끔' 템플릿과 '여행' 템플릿에서 이 가젯들은 목록 옆에 점( · )을 표시합니다. 이를 list style이라고 하며, list style은 점외에 숫자나 알파벳 등으로도 표현할 수 있습니다.

먄약 디자인 문제 때문에 이 점들을 없애고 싶다면, list style을 none으로 설정하면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 }  

위의 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 자리에,
또는 [대시보드 → 템플릿 → HTML편집] 모드에서

 ]]></b:skin>  

코드 바로 앞에 삽입하면 됩니다.

! 참고.

참고로, 위의 코드는 점( · )을 없애주지만, 점이 있던 자리의 빈 공간까지 처리해주지는 않습니다.

점이 있던 자리의 빈 공간 너비까지 설정하려면, padding-left 속성을 추가해주면 됩니다.

 #위젯id ul {  
 list-style-type:none;  
 padding-left:10px;  
 }  

padding-left는 왼쪽 가장자리와 목록 사이의 간격을 설정해줍니다. 10px 대신 자신이 원하는 간격을 입력합니다.


코드 적용의 예와 결과 :

 #TextList1 ul {  
 list-style-type:none;  
 padding-left:5px;  
 }  

구글 블로그(blogger) 태그 목록 꾸미기 #1

블로거에서 태그 가젯을 추가한 후 표시 방법을 '목록'으로 설정하면, 라벨(태그)을 목록 형식으로 볼 수 있습니다. 아래에 소개되는 코드는 태그 목록에 마우스 커서를 갖다대면 태그가 부드럽게 우측으로 이동하는, 간단한 동적 효과를 내주는 코드입니다. CSS의 동적인 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 통해 확인하시기 바랍니다.

데모 보기

 #Label1 li a {  
 padding-left:0px;  
 -moz-transition: all .2s ease-in-out;  
 -ms-transition: all .2s ease-in-out;  
 -webkit-transition: all .2s ease-in-out;  
 -o-transition: all .2s ease-in-out;  
 transition: all .2s ease-in-out;  
 }  
   
 #Label1 li a:hover {  
 text-decoration:none;  
 padding-left:15px;  
 }  

코드 설명

태그 가젯은 복수 생성이 가능하므로, widget id는 반드시 Label1이 아닐 수도 있습니다. 코드를 입력하실 때, widget id 자리에는 원하는 태그 가젯의 widget id를 입력해야 합니다.

코드 적용 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가], 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞의 자리입니다.

! 코드 적용 전 템플릿을 반드시 백업해두시기 바랍니다.
! 백업한 템플릿으로 테스트용 블로그에서 충분한 테스트를 마친 후 적용하시기 바랍니다.
! 다음 브라우저에서 작동되는 것을 확인하였습니다 : 익스플로러(IE10), 파이어폭스, 크롬

구글 블로그(blogger) 링크 목록 위젯 버그 해결 방법

블로거의 링크 목록 위젯은 현재 버그가 있는 상태이고, 이 버그는 Blogger 팀에서 직접 운영하는 Known Issues for Blogger 블로그에서도 공지가 되어 있습니다.

저도 이 버그 때문에 링크 목록을 추가하지 못해서 고생을 한 적이 있는데요. 링크 목록에서 입력이 불가능해지는 버그가 나타날 경우, URL을 키보드로 직접 입력하면 추가/수정/저장 이 가능해집니다.

구글 블로그(blogger) 본문 이미지 호버 효과 #1

블로거 본문 이미지에 마우스 커서를 갖다대면, 그림자가 생기거나 형태가 변형되는 간단한 호버 효과의 몇가지 예입니다.

동적인 효과는 그림이나 글로는 설명하기가 어려우므로, 데모 블로그를 참고하시기 바랍니다.

데모 보기


본문 이미지 호버 효과 데모 1 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 border-radius: 50%;  
 }  

본문 이미지 호버 효과 데모 2 적용 코드

 .post-body img {  
 border:0;  
 padding:6px;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 }  

본문 이미지 호버 효과 데모 3 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-top-right-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }  

본문 이미지 호버 효과 데모 4 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }  

다른 CSS 스타일 설정과 마찬가지로, 코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가], 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞의 자리입니다.

그림1

! 코드 적용시 한가지 주의해야할 점은 기존 템플릿에 적용되어 있는 본문 이미지의 스타일 설정입니다. 블로그에서 기본으로 제공하고 있는 '깔끔', '풍경', '세련', '무늬', '초현실', '여행' 템플릿의 경우, 템플릿에 따라서 패딩이나, 그림자 등 간단한 스타일 설정이 되어 있는 경우가 있습니다.

 .post-body img  

그런 경우, 위의 본문 이미지 스타일 설정 코드를 찾아서 패딩, 그림자 등 겹치는 부분이나 문제가 될 부분을 삭제하여야 합니다.

! 테스트용 블로그에서 백업한 템플릿으로 충분한 테스트를 마친 후 코드를 적용하시기 바랍니다.


! 코드 내용을 이해하는데 도움이 될 만한 글.
CSS border-radius 이해하기
CSS box-shadow 이해하기

구글 블로그(blogger) 태그 클라우드 꾸미기 #2

태그 클라우드 꾸미기#1에 간단한 transition 호버 효과를 추가해봤습니다. transition 효과는 그림이나 글로는 설명하기 힘든 부분이 있으므로, 데모 블로그를 먼저 보시기 바랍니다.

데모 보기

 .label-size * {   
 color:#2580a2;  
 padding: 3px;   
 margin: 2px;   
 font-size:11px;   
 border:1px solid #2580a2;   
 border-radius:0px;   
 display:block;   
 float:left;   
 text-decoration:none;   
 background:#ffffff;   
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }   
   
 .label-size *:hover {   
 text-decoration:none;   
 background:#000000;  
 color:#dbdbdb;  
 }  

transition 효과만 추가한 것이므로, 기본적인 설정 방법은 #1의 방법과 같습니다. 추가된 부분에 대해서만 따로 설명을 드리면,

그림1

<그림1>에서 보시는 바와 같이, 박스 안의 폰트 색상은 [맞춤설정 → 고급] 의 '링크 색상'과 '방문한 링크 색상'으로 설정합니다. 이 부분을 제외한 나머지는 코드에서 직접 본인의 템플릿에 맞게 수정하시면 됩니다.

그림2

코드는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 에, 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞에 붙여넣으시면 됩니다.

당분간 댓글을 일반 댓글로 전환합니다.

현재 블로거 유저들 사이에서는 구글+ 댓글과 관련하여 꽤 많은 문제점들이 보고되고 있습니다. 그 중 한가지는 댓글이 블로그 소유자에게 공지되지 않는다는 것입니다. 즉, 댓글이 달려도 운영자가 댓글이 달렸는지를 확인할 수 없다는 것인데요.

'구글+ 댓글은 블로거의 기능을 향상시키는 것이 아니라,
블로거들을 구글+로 유도하려는 의도' 라는 어느 해외 블로거의 의견

오늘 블로그의 글들을 확인해보다가 저에게 공지되지 않은 댓글들을 꽤 많이 발견했습니다. 블로그 특성상 저에게는 다른 블로거분들과의 피드백이 상당히 중요합니다. 처음에는 크게 문제가 되지 않았는데, 글이 많아지면서 댓글을 확인할 수 없다는 부분이 큰 단점으로 다가오네요. 이러한 부분이 보완될 때까지 당분간 댓글을 일반 댓글로 전환하여 운영하겠습니다.


! 기존에 작성해주신 구글플러스 댓글들은 그대로 유지 보관되며, 댓글 제어 권한은 댓글 작성자가 가지고 있습니다. 원하실 때 언제든 자신의 구글플러스 페이지에서 수정/삭제하실 수 있습니다. 일반 댓글에서는 익명으로도 댓글을 남기실 수 있도록 설정해두었습니다. 필요한 내용, 지적할 내용이 있다면 언제든 댓글을 남겨주세요.

구글 블로그(blogger) 인용 상자 꾸미기

블로거에서 인용 상자의 class id는 'blockquote'입니다. 고로 인용 상자의 스타일을 설정하려면 다음의 코드를

 .post blockquote {  
 원하는 스타일을 직접 입력  
 }  

[대시보드 → 템플릿 → 맞춤설정 →  고급 → CSS추가] 에 삽입해주거나, 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞에 직접 삽입해주면 됩니다. 물론, 저 상태 그대로 삽입해선 안되고, 코드 중간의 '원하는 스타일을 직접 입력' 부분에는 스타일 설정 코드가 들어가야 합니다.

어떻게 꾸미느냐는 블로거의 자유이고 또 가능한 스타일이 너무도 많기 때문에 일일이 말씀드릴 수는 없습니다만, 기존 블로거 유저들이 공유하고 있는 인용상자 스타일은 구글에서 'blogger blockquote css' 'blogger blockquote style' 등으로 검색하여 쉽게 찾을 수 있습니다. 예로써 활용하실 수 있도록 몇가지 샘플들을 아래에 첨부합니다. (괜찮은 디자인의 인용상자 스타일을 보게되면, 따로 모아서 나중에 다시 포스팅하도록 하겠습니다.)

! 이 글에는 스타일 설정이 적용되어 있으므로, RSS 피드로만 보실 경우 아래의 스타일 설정이 나타나지 않을 수 있습니다.

인용상자에 마우스를 올렸을 때 점진적으로 색상을 변화시켜 동적인 효과를 주었다.

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 padding: 15px;  
 border: 1px solid #dbdbdb;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
 .post blockquote:hover {  
 background: #000000;  
 color: #C1C1C1;  
 }   

인용상자에 마우스를 올렸을 때 그림자가 생성되도록 하였다.

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 padding: 15px;  
 border: 1px solid #dbdbdb;  
 -moz-transition: all .3s ease-in-out;  
 -ms-transition: all .3s ease-in-out;  
 -webkit-transition: all .3s ease-in-out;  
 transition: all .3s ease-in-out;  
 }  
   
 .post blockquote:hover {  
 box-shadow: 10px 10px 10px #2580a2;  
 }   

"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인

 .post blockquote {   
 width: 75%;  
 margin:auto;  
 border-left: 4px solid #ccc;  
 color: #a5a4a4;  
 font-style: italic;  
 padding-left: 15px;   
 }  

"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인

 .post blockquote {   
 width:75%;   
 margin: auto;  
 padding: .5em 1em;  
 border-left: 5px solid #fce27c;  
 background-color: #f6ebc1;   
 }  

"문제를 해결하는 힘은 새로운 정보를 얻는 데서 오는 것이 아니라, 이미 오래 전부터 알고 있던 것을 체계적으로 정리하는 데서 온다." - 비트겐슈타인

 .post blockquote {   
 width:65%;   
 margin: auto;  
 background: url(이미지 주소) no-repeat;     
 color: #a5a4a4;  
 font-style:italic;  
 padding: 30px;  
 }  

구글 블로그(blogger)에서 조건 태그를 이용하여 페이지별로 위젯 설정하기

블로거의 조건태그를 이용하면, 데모 블로그에서처럼 위젯의 표시 여부를 페이지에 따라 달리할 수 있습니다.

데모보기

지난번에 관리자만 볼 수 있는 가젯 만들기 라는 글에서도 말씀을 드렸는데요. 템플릿을 HTML편집 모드에서 보시면 위젯은 아래와 같은 구조로 되어 있습니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>

그리고, 어떤 위젯을 조건에 따라서 작동시키고자 할 때 조건 태그가 들어가는 자리는 '<b:includable id='main'>'과 '</b:includable>' 사이입니다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
내용
</b:if>
</b:includable>
</b:widget>

또는,

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<b:if cond='조건'>
조건이 참일 경우 표시할 내용
<b:else/>
조건이 참이 아닌 경우 표시할 내용
</b:if>
</b:includable>
</b:widget>

'조건'에는 참이나 거짓으로 평가될 수 있는 모든 항목을 넣을 수 있으며, 조건 태그를 사용하여 컨텐츠를 표시할 수 있는 위치도 있고 그렇지 않은 위치도 있습니다.

! 참고. 레이아웃용 Widget 태그 (구글 도움말)

구글 도움말의 설명과 예가 충분하지 않기 때문에 어떤 조건들이 가능한지 전부 알 수는 없지만, 위젯 설정과 관련하여 해외 블로거들 사이에 많이 공유되고 있는 조건 태그는 주로 9가지였습니다.

! 참고. 구글 블로그(blogger)의 조건 태그

그리고 이 9가지를 테스트용 블로그에서 직접 테스트를 해보았을 때 작동하는 조건 태그는 아래의 7가지였습니다.(나머지 2개는 제가 적용을 잘못해서 작동하지 않은 것일 수도 있습니다.)

1. Home Page

<b:if cond='data:blog.url == data:blog.homepageUrl'>

홈 페이지에서만 나타난다

2. Index Pages

<b:if cond='data:blog.pageType == &quot;index&quot;'>

홈 페이지와 레이블 검색 페이지, 그리고 블로그 보관함의 년 단위 페이지에서 나타난다.

3. Post Page, 또는 Item Page (각각의 개별 포스트)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

포스트(아이템) 페이지, 즉 개별 포스트의 본문을 읽을 때만 나타난다.

4. Label-Search Pages

<b:if cond='data:blog.searchLabel'>

라벨 검색 페이지에서만 나타난다.

5. Static Page(s)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

페이지 탭의 페이지에서만 나타난다. (블로거 대시보드 페이지 메뉴를 통해서 생성한 '새 페이지'를 static page라고 합니다.)

6. Archive Pages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

블로그 보관함의 월단위 페이지를 조회할 때 나타난다.

7. Specific Page

<b:if cond='data:blog.url == &quot;URL주소&quot;'>

특정 URL에서만 나타난다. .com 과 .kr 과 상관없이 똑똑하게 나타난다.


참고로, 위의 조건 태그들을 각각 역의 조건으로 바꿀 수도 있습니다. 예를 들어,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

이 조건 태그는 홈페이지에서만 표시한다는 조건태그이지만, 코드 중간의 "=="를 "!="로 바꿔주면

<b:if cond='data:blog.url != data:blog.homepageUrl'>

이 조건 태그는 '홈페이지가 아닐 경우에만 표시한다'가 됩니다. (해당 조건이 거짓일 경우 표시한다.)


자, 이제 직접 적용을 해보겠습니다.

그림1

일단, 테스트용 블로그에서 별다른 내용 없는 HTML/Javascript 가젯을 생성한 후

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

이를 HTML편집 모드에서 확인해보았더니 위젯의 코드는 위와 같은 모습이었습니다. 말씀드렸던 바와 같이, 위젯 코드의 시작 지점에는 '<b:includable id='main'>'이 보이고 종료 지점에는 '</b:includable>'라는 코드가 보입니다.

이 위젯을 가령 홈페이지에서만 표시하고자 한다면, 위에서 열거한 조건들 중 첫번째 조건 태그를 삽입하면 되겠죠.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

즉, 이런 모습이 됩니다.

그림2

+
여기까지가 해외 블로거들 사이에서 조건 태그와 관련하여 주로 공유되는 내용입니다. 사실상 거의 그대로 번역하여 설명을 드린 것인데요. 위의 내용도 물론 맞습니다. 그런데, 위의 내용을 그대로 적용했을 때 한가지 문제점이 있었습니다. 바로, 스타일 설정입니다. 위젯에 공통적으로 적용되어 있는 스타일 설정 때문에 위젯이 사라져도 간격이나 악센트(경계선) 등은 사라지지 않았습니다.

이는 위의 예에서처럼 하얀 바탕색에 경계선이 없는 경우에는 잘 나타나지 않는데요. 다른 템플릿을 적용해서 보여드리겠습니다.

그림3. 동일한 테스트용 블로그를 이번에는 색상과 경계가 뚜렷한 '세련' 템플릿으로 적용시켜 보았다.

<그림3>을 보시면, 위젯은 사라졌지만 간격이나 선, 공간은 그대로 남아있습니다. 이 문제를 해결하기 위해서는 표시되지 않을 때의 스타일 설정을 별도로 해줘야 합니다.

참고로, 어떤 요소를 표시되지 않도록 설정해주는 css의 태그는

display: none;

입니다.  즉, 자신이 원하지 않는 조건에서는 이 스타일 설정이 적용되도록 만들어주어야 하는데, 다음과 같이 입력함으로써 이를 적용시킬 수 있습니다.

<b:widget id='HTML1' locked='false' title='별내용없는위젯' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
  #HTML1 {
  display:none;
  }
</style>
</b:if>
</b:includable>
</b:widget>

이해를 돕기 위해 그림을 추가합니다.

그림4

그림5

<그림4>와 같은 방법으로 코드를 적용해주었더니, 위젯이 깔끔하게 사라지는 것을 볼 수 있었습니다.

조건 태그를 사용하거나 스타일을 설정하는데 어떤 정해진 방법이 있는 것은 아닙니다. 데모 블로그의 경우에는 else 태그 대신 거짓(!=) 조건을 사용했습니다. 하나의 예로써 참고하실 수 있도록 코드와 설명을 아래에 첨부하겠습니다.

<b:widget id='Text2' locked='false' title='본문을 읽을 때만 표시되는 위젯' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
  #Text2 {
  display:none;
  }
</style>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
  #Text2 {
  margin-top:0px;
  }
</style>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

그림6

! 테스트용 블로그에서 충분한 테스트를 통해 내용을 이해한 후 적용하시기 바랍니다. 적용 전 템플릿을 백업해두는 것은 기본입니다~!


정말 힘들게 작성했는데 +1 안눌러주면 완전 섭함요.

관리자만 볼 수 있는 가젯 만들기

블로거의 가젯들은 내용이 저마다 다 다르지만, 잘 살펴보면 다음과 같은 구조로 되어 있음을 알 수 있다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
내용
</b:includable>
</b:widget>

만약 자신의 블로거에 관리자만 볼 수 있는 가젯을 만들고 싶다면, '<b:includable id='main'>' 바로 뒤와 '</b:includable>' 바로 앞을 div나 span으로 묶어서 class='item-control blog-admin' 으로 지정해주면 된다.

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<div class='item-control blog-admin'>
내용
</div>
</b:includable>
</b:widget>

또는

<b:widget id='위젯id' locked='**' title='위젯 타이틀' type='**'>
<b:includable id='main'>
<span class='item-control blog-admin'>
내용
</span>
</b:includable>
</b:widget>

끝 ~ !

구글 블로그(blogger) 본문 요약 및 이미지 썸네일 처리하기

아래는 데모 블로그에서처럼 홈에서 본문을 요약 처리하고 이미지가 있는 경우 이미지를 썸네일로 보여주는 자바스크립트 코드입니다.

데모 보기

 <script type='text/javascript'>  
 summary_noimg = 600;  
 summary_img = 600;  
 img_thumb_height = 250;  
 img_thumb_width = 350;  
 </script>  
 <script type='text/javascript'>  
 //<![CDATA[  
 function removeHtmlTag(strx,chop)  
 {  
 if(strx.indexOf("<")!=-1)  
 {  
 var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}  
 chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}  
 function createSummaryAndThumb(pID){  
 var div = document.getElementById(pID);  
 var imgtag = "";  
 var img = div.getElementsByTagName("img");  
 var summ = summary_noimg;  
 if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img [0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';  
 summ = summary_img;  
 }  
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';  
 div.innerHTML = summary;  
 }  
 //]]>  
 </script>  

코드의 일부 내용들은 자신의 스타일에 맞게 변경이 가능합니다.

 summary_noimg = 600;  

포스트에 이미지가 존재하지 않을 때 요약 페이지에 표시하게 될 글자 수

 summary_img = 600;  

포스트에 이미지가 존재할 때 요약 페이지에 표시하게 될 글자 수

 img_thumb_height = 250;  

요약 페이지에 표시될 썸네일 이미지의 높이(height)

 img_thumb_width = 350;  

요약 페이지에 표시될 썸네일 이미지의 너비(width)

 <span style="float:left; padding:0px 10px 5px 0px;">  

썸네일과 요약 텍스트 사이의 간격을 조절하고 싶다면, 여기서 패딩 부분 조정하면 됩니다.

자신의 스타일에 맞게 코드를 변경했다면, [대시보드 → 템플릿 → HTML편집] 으로 들어가서 검색으로 </head> 태그를 찾은 후 </head> 바로 위에 해당 코드를 복사하여 붙여넣기합니다.

그리고나서,

 <data:post.body/>  

이 코드를 조건 태그로 바꿔주어야 합니다.

• 기본 템플릿(구식 템플릿)
• 동적뷰 템플릿
• 어디선가 다운받은 템플릿

위 세가지 템플릿이 아닌, 블로거에서 제공하는 '깔금', '풍경', '세련', '무늬', '초현실', '여행' 템플릿을 수정하여 쓰고 있을 경우, Ctrl+F로 이 코드를 찾으면, 총 3개가 발견됩니다.

이 중 첫번째는 모바일 영역이니 건들지 마시고, 두번째에 보이는

 <data:post.body/>  

코드를 아래의 코드로 대체해줍니다.

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  
 <b:if cond='data:blog.pageType != &quot;item&quot;'>  
 <div expr:id='&quot;summary&quot; + data:post.id'>  
 <data:post.body/>  
 </div>  
 <script type='text/javascript'>createSummaryAndThumb   
 (&quot;summary<data:post.id/>&quot;);</script>  
 <div class='readmore-wrap'>  
 <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text- align:right;'>  
 <a expr:href='data:post.url'>더 보기&#187;</a>  
 </span>  
 </div>  
 </b:if>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <data:post.body/>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
 <data:post.body/>  
 </b:if>  

모두 완료되면, '템플릿 저장'을 클릭해 줍니다.


코드의 출처는 mytutorialscafe.com 이라는 해외 블로그입니다. 코드 적용 전에는 반드시 백업을 해두시고, 또 테스트용 블로그에서 충분한 테스트를 해본 후 사용하시기 바랍니다.

구글 블로그(blogger) 이미지 업로드시 크기 조정하기

블로거에서 이미지를 업로드한 후 이미지를 클릭하면, 해당 이미지를 '작게', '중간', '크게', 'X 라지', '원본 크기' 로 설정할 수 있습니다.

만약, 이 다섯가지 설정 중 마음에 드는 크기가 없다면, HTML 모드에서 코드를 약간 수정해줌으로써 이미지를 원하는 크기로 설정할 수 있습니다.

이미지를 올린 후 글쓰기의 HTML 모드로 들어가면, 이미지는 다음과 같은 코드로 표시됩니다.

여기서 주목할 부분은 이미지의 주소 중 's1600'이라는 부분입니다. 이 s1600은 이미지의 최대 너비(width)를 의미합니다(높이는 너비에 따라 자동 변경). 예를 들어, 너비가 500px인 이미지의 s주소를 's400'으로 입력해주면, 이미지는 400px로 자동 축소됩니다. 이 s주소는

• 큰 이미지를 블로그에서 작게 표시할 때
• 이미지의 크기를 '작게', '중간', '크게', 'X 라지', '원본 크기' 외에 자신이 원하는 크기로 지정하고자 할 때
• 블로그의 이미지를 외부에 원하는 사이즈로 링크하고자 할 때

 특히 유용하게 쓰일 수 있습니다.

! 이미지를 원본 보다 작게 표시하려면 단순히 s를 줄이면 되지만, 이미지를 원본 보다 크게 표현하려면 <img> 태그에 width="***"를 추가적으로 입력해주어야 합니다.


s주소는 또한, 포토샵이나 기타 이미지 편집기 등에서 제공하는 잘라내기(crop) 기능을 지원합니다. s주소로 이미지의 사이즈를 줄인후 옆에 '-c'라고 입력하면, 이미지는 해당 사이즈의 정사각형 이미지로 표현되면서 동시에 정사각형을 벗어난 부분은 버려지게 됩니다. 위의 이미지에 크롭핑 주소를 적용한 예를 직접 보시기 바랍니다.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtpoSjTURvQomLPnJwYxoN37CHfA-h04Pn62GMAj6w6cdKon4CLFOJZT5bWOpUAgjUhLPGooT0enA_ZFlDn6b5d7SiHg5-_Vk_OFITGCi2ej-8XoN8STo-0oNJgRlR3xvHqXQQt7ojKE/s200-c/car.jpg

또, s주소에 '-d'라는 옵션을 추가하면 다운로드로 연결되는 주소를 만들 수 있습니다. 아래 '-d' 옵션이 추가된 주소를 한번 클릭해보시기 바랍니다.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtpoSjTURvQomLPnJwYxoN37CHfA-h04Pn62GMAj6w6cdKon4CLFOJZT5bWOpUAgjUhLPGooT0enA_ZFlDn6b5d7SiHg5-_Vk_OFITGCi2ej-8XoN8STo-0oNJgRlR3xvHqXQQt7ojKE/s1600-d/car.jpg

'-d' 옵션은 이미지 배포를 목적으로 하는 블로그에서 유용하게 쓰일 수 있겠죠.


※ 이미지를 개별적으로 설정하지 않고, 템플릿상에서 최대 크기를 제한하려면 다음의 글을 참고하시기 바랍니다.

이미지의 최대 폭 제한하기

블로거 일반 템플릿에서 동적뷰 전환하기

"사랑과 죽음은 별개가 아니라 같은 것의 앞뒷면이다."

일본의 오츠이치라는 소설가의 명언을 본 따서 이렇게 말씀드리겠습니다.

"일반 템플릿과 동적뷰는 별개가 아니라 같은 것의 앞뒷면이다."

--- 이상 헛소리 ! ---



일반 템플릿 블로거의 주소 뒤에 '/view' 를 추가하면 해당 블로그 컨텐츠를 동적뷰로도 볼 수 있습니다.

http://블로그주소/view

예를 들어, 저의 블로그는 일반 템플릿 블로그이죠. 그러나, 제 블로그 주소에 아래처럼 '/view' 라고만 입력 해주면,

http://ielselog.blogspot.kr/view/

블로그가 동적뷰로 전환되는 모습을 볼 수 있습니다.

이같은 방식으로 동적뷰로 전환될 때 기본(default) 뷰는 sidebar 뷰입니다. 즉, 위의 주소로 들어가면 주소가

http://ielselog.blogspot.kr/view/sidebar

로 변경되는 것을 보실 수 있습니다. 원하는 뷰를 설정하고 싶다면, '/view' 대신 '/view/magazine', '/view/classic' 이런 식으로 특정 뷰 값을 입력해주면 되겠죠.

일반 템플릿을 사용하는 분들은 페이지 탭 메뉴나 사이드바 메뉴에 동적뷰 전환 버튼이나 링크 등을 추가함으로써, 블로그를 좀 더 다채롭고 동적으로 꾸밀 수 있지 않을까 싶습니다.


PS. 아무래도 제가 글 제목을 잘못 지은 것 같습니다. 글 제목 때문에 동적뷰 관련 질문을 주시는 분들이 많네요. 이 글은 그러니까 음.. 일반 템플릿 사용시 일반 템플릿을 그대로 사용하면서, 블로그의 글들을 동적뷰로도 볼 수 있게 하는 방법에 대해 적어본 것입니다. 블로그/템플릿 전체를 동적뷰로 전환시키는 것이 아니므로, 혼동하지 않으셨으면 좋겠습니다.

구글플러스 댓글에서 일반 댓글로 되돌리기

구글 블로그의 댓글을 구글플러스 댓글로 전환하면 구글플러스와의 연동성은 강화되지만, 블로그 운영자의 댓글 제어 권한은 약해집니다. 예를 들어, 구글플러스 댓글에서는 일반 댓글과는 달리 댓글 승인 기능이 없으며, 공격적인 댓글을 삭제할 수도 없습니다. 스팸 댓글이라든가 악플 등은 여과없이 그냥 보여지게 되는데요.

이러한 이유들 또는 다른 이유 때문에 댓글을 구글플러스 댓글에서 일반 댓글로 전환하려면, 일반 댓글에서 구글플러스 댓글로 전환할 때와 반대의 방법으로, 단순히 대시보드 Google+ 항목에서 '이 블로그에서 Google+ 댓글 사용'을 해제하면 됩니다. 

동적뷰 타이틀에 이미지 삽입하기 #2

그림1

지난번에 동적뷰 타이틀에 이미지를 삽입하는 방법에 대해서 제가 두가지 방법을 알고 있다고 말씀을 드리면서, 첫번째 방법을 알려드렸습니다.

동적뷰 타이틀에 이미지 삽입하기 #1

오늘은 두번째 방법입니다. 첫번째 방법은 코드 수정을 거의 필요로 하지 않는 대신 원하는 크기의 이미지를 올릴 수는 없었습니다. 오늘 소개하는 방법을 이용하면, 원하는 크기의 이미지를 올릴 수 있습니다.

동적뷰의 텝 페이지를 드롭다운 메뉴로 변경시키기

그림1

그림2

동적뷰에서 탭 페이지는 <그림1>에서 처럼 헤더 아래 검은 바에 가로로 표시됩니다.
아래의 코드는 탭 페이지를 <그림2>와 같이 드롭다운 메뉴로 바꿔줍니다.

 #header.header .header-drawer #pages.tabs ul li{  
 margin: 100000px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이며, 코드의 출처는 해외 블로거 southernspeakers 입니다.

참고로, 드롭다운 메뉴 최상단에는 <그림2>에서 보시는 바와 같이 'Pages'라고 표시됩니다. 이 문구를 원하는 문구로 바꿀 수 있지 않을까 싶어서 테스트용 블로그에서 여러 방식으로 시도해보았습나다만, 방법을 찾을 수 없었습니다.


! 내용수정

'Pages' 바꾸는 방법에 대해 +Hui-Su Jeong 님께서 댓글로 링크를 남겨 주셨네요. 아래에 해당 코드를 추가하였습니다.

 #pages span:first-child{  
 font-size: 0px !important;  
 }  
 #pages .menu-heading:before, .ss{  
 content: "목록";  
 font-size: 15px !important;  
 }  

코드 삽입 위치는 마찬가지로 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 삽입하실 때 '목록' 대신 원하는 글자를 입력하시면 됩니다.

블로거 모바일 템플릿에 위젯 추가하기

그림1

HTML 편집에서 위젯의 코드는 아래와 같은 형식으로 이루어져 있는데요.

 <b:widget id='가젯ID' locked='false' title='가젯타이틀' type='가젯 유형'>  

특정 위젯을 모바일 템플릿에서 표시되도록 설정하려면, 코드 중간에

mobile='yes'

라는 구문을 추가하면 됩니다.

위의 코드에 삽입한다면,

  <b:widget id='가젯ID' locked='false' mobile='yes' title='가젯타이틀' type='가젯 유형'>   

이런 모습이 되겠죠.

이 mobile='조건' 이란 속성은 'yes'란 값 외에

mobile='no'     -    모바일에서 표시되지 않도록 설정

또는,

mobile='only'   -    모바일에서만 표시되도록 설정

라는 값으로도 설정할 수 있습니다.


시험 삼아서 제 테스트용 블로그의 위젯에 mobile='yes'라는 구문을 추가해봤습니다.

그림2

이렇게 구문을 추가하고,

그림3

모바일 템플릿을 사용자 지정으로 설정해주었더니,

그림4

위젯이 원하는 대로 출력되었습니다.

블로거 포스트 이미지에 투명 효과 주기

CSS transition의 opacity 속성을 이용하여 블로거 포스트 이미지에 마우스를 갖다대면 약간의 투명효과를 주는, 간단한 코드를 소개합니다.

CSS의 동적인 효과를 말로 설명하는데에는 한계가 있으므로, 데모를 먼저 보시기 바랍니다.

데모

두 가지 방식이 가능합니다.

하나는 데모 사이트에서처럼 이미지에 마우스 커서를 올리면 이미지가 일정 % 투명하게 변화는 방식이고, (아래 그림에서 그림2 에서 그림1로 변화)

다른 하나는 역으로, 처음부터 일정 % 투명처리된 이미지를 먼저 보여준 후 독자가 마우스를 갖다대면 정상이미지로 전환하는 방식입니다. (그림1에서 그림2로 변화)

그림1

그림2

첫번째 방식, 즉 [그림2 → 그림1]로 변화를 주는 코드는 아래와 같습니다.

 .post-body img {  
 opacity:1.0;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:0.7;  
 }  

<코드 출처 stramaxon >

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. 투명 정도를 설정하고 싶다면 'opacity:0.7;' 이라고 적힌 부분을 조정하시기 바랍니다.

두번째 방식, 즉 [그림1 → 그림2] 로 변화를 주려면 같은 위치에 아래의 코드를 대신 입력합니다.

 .post-body img {  
 opacity:0.7;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:1.0;  
 }  

<코드 출처 stramaxon >

CSS의 overflow 사용 예제

overflow는 영역을 벗어난 컨텐츠를 어떻게 보여줄 것인가를 설정하는 속성이다.

overflow 사용 예제

 div  
 {  
 overflow:visible;  
 }  

overflow의 값 :

1. visible

visible 사용의 예

영역에서 벗어난 부분을 자르거나 숨기지 말고 그대로 보여준다.

2. hidden

hidden 사용의 예

잘린 부분을 보여주지 않는다.

3. scroll

scroll 사용의 예

잘리든 잘리지 않든 스크롤로 처리한다. 위 그림에서 잘린 세로 영역 뿐만 아니라, 잘리지 않은 가로 영역에도 스크롤이 생긴 것에 주목.

4. auto

auto 사용의 예

벗어난 부분이 있으면 자동으로 스크롤을 생성한다.

5. inherit

상위의 단계에서 설정된 값을 물려받는다.

CSS의 transition을 이용한 링크 색상의 부드러운 전환

그림1

지금 제 블로그에서 탭 메뉴에 마우스 커서를 올려보시면, 검은색에서 청색으로의 색상 전환이나 흰색 화살표의 움직임이 마우스를 올리자마자 즉각적으로 이루어지는 것이 아니라 (비록 짧은 시간이긴 하지만) 점진적으로 이루어지는 것을 보실 수 있습니다.

이는 CSS의 transition이라는 속성을 이용했기 때문인데요. CSS의 transition을 이용하면 모양이나 색상의 변화를 시간을 두고, 마치 애니메이션처럼 부드럽게 할 수 있습니다.

이 블로그는 제가 여러가지 코드들을 배우고, 또 테스트 해보는 공간이기도 하므로, 저 탭 메뉴가 1년 뒤에도 그대로 있으리라는 보장이 없습니다. 훗날 템플릿이 바뀐 상태에서 이 글을 보는 분들을 위해 예가 될 수 있는 다른 페이지를 링크해두겠습니다.

transition 적용의 예 :
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
http://everhooddesign.com/node/39
http://css3.bradshawenterprises.com/transitions/

그림2

블로그나 웹사이트에서 색상 전환을 가장 쉽게 접하는 경로 중 하나가 바로 링크 위에 마우스 커서를 올리는 경우인데요. 아래의 코드는 transition 속성을 이용하여 블로거에서 텍스트 링크에 마우스커서를 올렸을 때, 색상 전환을 부드럽게 만들어 줍니다.

 a { color:#2580a2;   
  -moz-transition:color .2s ease;   
  -o-transition:color .2s ease;   
  -ms-transition:color .2s ease;   
  -webkit-transition:color .2s ease;   
  transition:color .2s ease;   
  } a:hover { color:#666666; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

첫번째 줄의 색상(2580a2)은 링크에 마우스를 올리기 전의 색상이고, 마지막 줄의 색상(666666)은 링크에 마우스를 올렸을 때의 색상입니다. 자신이 원하는 색상으로 대체해 줍니다.

CSS의 transition 속성은 잘 공부해두면, 블로거를 동적으로 만드는데 상당히 유용할 것 같습니다. 저는 CSS 마스터까지는 필요 없고, 내가 삽입하는 코드들이 어떤 의미를 가지고 있고 어떻게 변형이나 편집이 가능한가 정도를 이해할 수 있을 정도면 만족합니다. 그런 의미에서 위의 코드들을 조금 뜯어보자면,

앞의 -moz-니 -o-니 하는 단어들은 특정 브라우저에서 transition 속성이 작동하도록 지원해주는 접두사입니다. 여기에 대해서는 CSS 브라우저 지원 접두사들 이라는 글에서 정리를 해두었습니다.

transition:color는 색상의 전환을 지정하는 속성이고, 우리가 재량적으로 설정할 수 있는 부분은 앞에서 언급한 색상, 그리고 '.2s', 'ease'라고 적혀있는 부분입니다.

'.2s'는 변화가 몇초에 걸쳐 일어날지를 설정하는 부분입니다. 10s(10s는 10초), 5.5s, 1.5s, .5s, .25s 등등 자신이 원하는 속도로 설정할 수 있습니다.

'ease'는 변화가 어떤 형식으로 이루어질지를 설정하는 값입니다. ease 외에 linear, ease-in, ease-out, ease-in-out 등으로 대체할 수 있으며, 값에 따라서 처음부터 끝까지 같은 속도로 변할 지 아니면 처음엔 느리게 변하다가 뒤에는 빠르게 변할지 등등으로 설정할 수 있습니다. 이에 대한 설명과 예는 아래의 링크에서 자세히 살펴보시기 바랍니다.

http://htmlcss.kr/?s=transition
http://htmlcss.kr/css3/transition/transition-timing-function/