2011. 4. 20. 23:54ㆍIT/Tistory Tips
티스토리 블로그는 게시물에 CCLCreative Commons License를 표시할 수 있도록 옵션을 제공한다. 그러나 스크립트를 사용하는 이 CCL 표시는 스크립트에 포함된 특정 문자열 때문에 웹 표준 검사를 통과하지 못한다. 그래서 CSS 롤오버 기능으로 CCL을 만들어봤다.
- XHTML 웹 표준을 준수한다.
- CSS 3.0 웹 표준을 준수하지 못한다. (border-radius, box-shadow 속성 사용)
- 글자 색, 이미지 등을 원하는 대로 지정할 수 있다.
뭐, 특징을 잠깐 살펴봐도 쉽게 알 수 있지만, 이미 티스토리에서 지원하는 기능이므로 굳이 CSS로 따로 만들어 적용할 필요는 없는 기능이다. 티스토리 기본 CCL과의 차이는 스크립트를 사용하지 않는다는 것, 이미지나 글자 스타일, 글 상자 스타일을 원하는 대로 바꿀 수 있다는 것, 이미지를 클릭하면 사용 권한에 대한 설명 페이지가 열린다는 것 정도다. '난 CCL도 남달라야 해!' 하는 분에겐 유용할지도...
실제 적용하면 이런 모습이다. 회색 그림에 마우스 커서를 올리면 작은 상자에 CCL 내용이 간단히 설명된다. 그림을 클릭하면 해당 CCL을 간략히 설명하는 페이지가 열린다. CCL 이미지와 사용 권한 설명은 티스토리 것을 빌려 왔다.
CSS를 적용하기에 앞서 CCL이 무엇인지 잠깐 살펴보자. 많은사람이 블로그나 홈페이지에 글을 쓴다. 블로그에 글이 게시되는 순간, 그 글은 저작권을 가진다. 글쓴이가 저작자가 된다. 다른 이가 내 글을 보는 것은 문제가 되지 않는다. 그러나 내 글을 저작권자의 허락 없이 인용하거나 다른 용도로 사용하면 저작권 위반이 된다.
"생각 없이 블로그에 끄적인 글, 여행 중 찍어 올린 풍경사진에 나도 모르게 저작권이 저절로 생성되어있다는 사실, 알고 계셨나요? 굳이 불펌금지라고 적어두지 않아도 누군가 여러분의 콘텐츠를 스크랩해서 자신의 블로그에 올리면 저작권 위반이 됩니다. 내가 만든 콘텐츠를 널리 알리고 싶어서 웹에 올렸다가 본의 아니게 다른 사람들을 범죄자로 만들 수도 있다는 거죠.
CCL은 자신의 창작물이 한 곳에 머물러 있기보다는 보다 많은 분야에서 사용되고 재창작 되면서 문화라는 인류 공동 자산의 일부가 되길 바라는 사람들을 위한 라이선스입니다. 원칙적으로 저작권자에게 그 저작물의 이용에 관한 독점적이고 배타적인 권리를 부여하여 다른 사람의 이용을 금지하는 저작권법과 달리, CCL은 자신(저작권자)이 정한 몇 가지 조건과 이용방법을 지키면 다른 사람들이 자유롭게 해당 저작물을 사용할 수 있도록 허락해줍니다. 그렇다고 저작자의 권리가 모두 사라지는 것이 아닙니다. 법률적으로도 효력이 뒷받침 되고요."출처: Creative Commons Korea [원문 보기]
CCL은 일반 저작권과 약간 다른 느낌의 사용 권한이다. 물론 저작권법의 테두리를 벗어나지 못하지만, 일반 저작권이 금지를 위한 권리라면 CCL은 공유를 위한 권리다. 최소한의 금지로 내 저작물을 타인이 마음놓고 공유할 수 있도록 하는 개념의 저작권이 바로 CCL이다. CCL은 저작자가 명시한 사용 권한을 지킨다면 누구든 저작물을 사용하고 인용할 수 있다.
CCL은 총 6가지로 나뉜다. 기본 요소는 저작자표시(BY), 비영리(NC), 변경금지(ND), 동일조건변경허락(SA)이다. 이 네 가지 요소의 조합으로 6가지 유형이 만들어진다. 상세한 내용은 CCL의 6가지 유형에서 확인할 수 있다.
CCL에 관한 내용은 CreativeCommons와 CCKorea에서 찾아볼 수 있으니 이쯤하고 실제 코드를 살펴보자.
| CCL 적용을 위한 CSS |
|---|
/* CCL */
|
일단 위 CSS 코드를 복사해서 티스토리 관리자 메뉴 - [스킨] - [HTML/CSS 편집] - style.css 맨 아래에 붙여 넣는다.
위 그림처럼 입력하면 된다. 이제 HTML 코드를 확인할 차례다. HTML 코드는 사용 권한 6개 중 자신이 원하는 항목을 선택해서 적용한다. [적용 예]의 CCL 그림에 마우스 커서를 올리면 사용 권한 내용을 확인할 수 있다.
| 1. 저작자표시 CC BY : 가장 자유로움. 저작자만 표시하면 어떤 형태로든 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_yes">YES</span><br /> 컨텐츠 변경 <span class="ccl_yes">YES</span> </span> <a href="http://creativecommons.org/licenses/by/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 YES 컨텐츠 변경 YES 
|
| 2. 저작자표시-변경금지 CC BY-ND : 저작자를 표시하고 원 저작물을 변경하지 않는 범위에서 자유롭게 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_yes">YES</span><br /> 컨텐츠 변경 <span class="ccl_no">NO</span> </span> <a href="http://creativecommons.org/licenses/by-nd/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black03.png" alt="CCL2" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 YES 컨텐츠 변경 NO
|
| 3. 저작자표시-비영리-동일조건변경허락 CC BY-NC-SA : 저작자를 표시하고 비영리 목적으로 사용할 때, 원 저작물과 같은 CCL을 사용하는 때에만 저작물을 수정해서 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_no">NO</span><br /> 컨텐츠 변경 <span class="ccl_yes">YES</span><br /> 동일한 설정 <span class="ccl_yes">YES</span> </span> <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black02.png" alt="CCL2" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black04.png" alt="CCL3" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 NO 컨텐츠 변경 YES 동일한 설정 YES
|
| 4. 저작자표시-동일조건변경허락 CC BY-SA : 저작자를 표시하면 원 저작물과 같은 CCL을 사용하는 경우에 한해서 저작물을 수정해서 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_yes">YES</span><br /> 컨텐츠 변경 <span class="ccl_yes">YES</span><br /> 동일한 설정 <span class="ccl_yes">YES</span> </span> <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black04.png" alt="CCL2" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 YES 컨텐츠 변경 YES 동일한 설정 YES
|
| 5. 저작자표시-비영리 CC BY-NC : 저작자를 표시하면 비영리 목적일 때에 한해 자유롭게 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_no">NO</span><br /> 컨텐츠 변경 <span class="ccl_yes">YES</span> </span> <a href="http://creativecommons.org/licenses/by-nc/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black02.png" alt="CCL2" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 NO 컨텐츠 변경 YES
|
| 6. 저작자표시-비영리-변경금지 CC BY-NC-ND : 가장 제약이 많음. 저작자를 표시하고 비영리 목적으로 사용할 때 저작물 내용을 변경하지 않는 범위 내에서 저작물을 사용할 수 있음. |
|---|
|
<div class="license"> <span class="ccl"> 저작권 표시 <span class="ccl_yes">YES</span><br /> 상업적 이용 <span class="ccl_no">NO</span><br /> 컨텐츠 변경 <span class="ccl_no">NO</span> </span> <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.ko" onclick="window.open(this.href); return false" style="text-decoration:none"> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black01.png" alt="CCL1" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black02.png" alt="CCL2" /> <img src="http://i1.daumcdn.net/cfs.tistory/static/admin/editor/ccl_black03.png" alt="CCL3" /> </a> </div> |
| 적용 예 |
|
저작권 표시 YES
상업적 이용 NO 컨텐츠 변경 NO
|
1~6 중 자신이 원하는 사용 권한을 선택하고 해당하는 HTML 코드를 복사한다. 티스토리 스킨 편집 HTML/CSS 중 skin.html에서 [##_article_rep_desc_##]를 찾는다. 이제 복사한 코드를 [##_article_rep_desc_##] 앞이나 뒤에 붙여 넣는다. 앞에 붙여 넣으면 지금 이 글 맨 위 오른쪽에 보이는 것처럼 글 제목과 본문 사이에 표시된다. 뒤에 붙여 넣으면 본문이 모두 끝난 다음 CCL이 표시된다. 만약 글마다 사용 권한을 다르게 설정하거나 특정한 글에만 사용 권한을 설정하려면 해당 게시물 맨 앞이나 맨 뒤에 복사한 코드를 붙여 넣는다.
CSS를 수정하면 글자 상자의 디자인이나 글꼴을 바꿀 수 있다. 아래의 CSS 설명을 참고 해서 필요한 부분을 수정하자. 특별히 수정하지 말라는 이야기가 없는 부분은 자유롭게 수정할 수 있다.
.license는 CCL을 표시하는 div 요소 전체를 의미한다. text-align:right로 div 요소 내부의 모든 것(CCL 그림)은 오른쪽 정렬 상태가 된다. cursor:help는 그림 위에 마우스 커서를 가져갔을 때 커서에 물음표가 생기는 것이다. position:relative는 상대 위치를 사용하도록 지정한 부분이다. 글자 상자 위치 지정을 위한 부분이니 수정하지 말고 그냥 두자. margin:5px 0은 div 요소 바깥의 상하 여백을 5픽셀, 좌우 여백을 0픽셀로 지정한 부분이다.
.license span.ccl은 class=license인 div 요소 내부의 class=ccl인 span 요소에 대한 스타일 지정 부분이다. span 부분은 평소엔 보이지 않다가 마우스 커서를 올렸을 때만 표시되어야 한다. position:absolute로 절대 위치를 지정하고 margin-left: -999em으로 왼쪽 여백을 과도하게 지정해서 화면에 표시되지 않도록 했다. 이 두 가지는 바꾸지 않고 유지하는 것이 좋다. padding:.5em으로 글자 반 개만큼 내부 여백을 지정했고 background와 border로 배경색 및 테두리 형태를 지정했다. background를 이미지로 지정해도 되고 다른 색으로 바꿔도 된다. 사용 권한의 글자 색을 바꾸려면 color 속성을 사용한다. text-align:left로 글자를 왼쪽 정렬했고, line-height:1.3em으로 줄 간격을 조절했다.
.license:hover span.ccl은 class=license인 div 요소에 마우스 커서를 올렸을 때 class=ccl인 span 요소의 스타일을 지정하는 부분이다. 평소에 보이지 않던 span 요소를 적당한 위치에 가져와야 한다. position:absolute로 절대 위치를 지정하고 right:-1em; bottom:2.5em으로 글자 상자 위치를 지정했다. z-index:99로 페이지에 표시된 다른 항목보다 위에 보이도록 하고 width:100px로 너비를 지정했다. 너비를 지정하는 width, 위치를 지정하는 right, bottom은 입맛에 맞게 수정할 수 있다. border-radius는 테두리를 둥글게 표시하는 옵션으로 IE9, Safari, Chrome, Opera에서 지원한다. Firefox에서도 적용하기 위해 -moz를 사용했고 Safari 4 이하를 위해 -webkit을 추가했다. box-shadow는 글자 상자에 그림자를 표시하는 옵션으로 지원 여부는 border-radius와 같다. IE8 이하는 rgba를 지원하지 않지만, 어차피 box-shadow 자체가 적용되지 않으므로 신경 쓰지 않아도 된다.
.license span.ccl span.ccl_yes와 .license span.ccl span.ccl_no는 CCL 정보 중 YES와 NO의 글자 색이다. 원하는 색으로 바꿀 수 있다.
글자나 글자 상자 등에 다른 스타일을 지정하려면 위 내용을 참고 해서 CSS만 조금 수정하면 된다. 혹시 웹 표준은 무조건 지켜야 한다는 사용자는 CSS에서 border-radius, -moz-border-radius, webkit-border-radius, box-shadow, -moz-box-shadow, -webit-box-shadow 속성을 삭제한다. 또 CSS CCL은 IE7 이상, Chrome, Firefox, Opera, Safari 웹 브라우저에서 적용된다. 지연 없이 바로 표시되는 게 정상이지만, 유독 Firefox에서만 약간의 지연이 생기는 것을 확인했다.
만약 티스토리 CCL 플러그인처럼 rdf 형태로 사용 권한에 대한 정보를 추가하고 싶다면 ccREL이나 쉽게 이해하는 ccREL을 참고한다.
또 다른 방법으로 CCL에서 직접 제공하는 사용 권한 표시도 추가할 수 있다. 라이선스 적용하기 페이지를 방문하면 Creative Commons에서 공식적으로 제공하는 CCL 표시를 추가할 수 있다.