서론
이 블로그에 사용하고 있는 카테고리별로 다른 css 적용하는 방법입니다.
최신 티스토리에서 인덱스페이지가 있어서 좋긴한데 저의 블로그 경우 글 제목과 날짜, 카테고리만 나옵니다. 글의 내용이나 대표이미지가 없어 믹믹한 모양이 보여져서 만들게 된 것입니다. 영어 카테고리면 쉽게 사용이 되지만 그것이 아닐경우에는 몇번을 생각 했지만 자바스크립트를 사용 해야 겠네요.
우선 카테고리가 영어일 경우 사용하면 되는 방식
<s_index_article_rep><!-- 인덱스 페이지 -->
<div class="list_content">
<a href="/58">티스토리 카테고리별 css적용하기</a>
<span class='date'>2018. 1. 5. 00:42</span>
<span class='웹문서'>웹문서</span>
</div>
</s_index_article_rep><!-- /인덱스 페이지 -->위의 예제에서 카테고리의 치환자는 웹문서입니다. 이 치환자를 클래스(class)로 하면 됩니다.
즉)
<span class='웹문서'>웹문서</span>이제 알아볼 부분은 카테고리가 한글일 경우입니다.(영어 외의 경우)
이 부분은 솔찍히 한글 css선택자를 적어도 사용이 가능합니다. (크롬만 테스트 했음)
하지만 css선택자를 영어로 하는것이 나중을 위해서 또는 알지 못하는 다른 에러를 위해서 또는 간지(?)를 위해 영어로 적어 보겠습니다. 간지는 농담이고요. 사실 저도 잘 모르겠습니다. 영어 이외에는 적을려고 생각 해 본적이 없으니까요.
인터넷을 찾아보니
- 모든 자연어를 선택자 이름으로 사용할 수 있지만 영문 대소문자와 숫자의 조합을 권장합니다.
- 선택자 이름으로 특수문자를 사용할 수 없지만 언더스코어(_)와 하이픈(-)은 사용할 수 있습니다.
- 숫자로 시작할 수 없습니다.
이렇다는 군요.
서론이 길었습니다. 결국 한글을 사용해도 무방하지만 권장하지는 않는 다는 것이군요. 그러면 한글 카테고리에 영어 클래스를 적어 보도록 하겠습니다.
카테고리 한글을 영어로 변경사용하는 방식 및 강조
function createlist(N){
var G='';
N2 = N.substr(1);
for (var i=0;i<=g.length-1;i++){
if (N2==g[i]) {G="<span class=WWs><i class='icon icon-fire'></i></span>";};
};
return G;
};
function createlistClass(sC) {
var sS='';
if (sC=='참고') {sS='Etc';}
else if (sC=='여행') {sS='Travel';}
else if (sC=='취미') {sS='hobby';}
else if (sC=='Html-Css') {sS='htmlcss';}
else {sS='Library';};
return sS;
};제가 사용하는 것입니다. 부끄럽지만 간단하게 설명 드리자면,
createlist, createlistClass함수를 선언하고 받는 값으로 각각
<script type='text/javascript'>
//<![CDATA[
var g = new Array('3','14','28','33', '53', '55', '56'); //강조 createlist 외부 data (파일 list.js)
var s='2018. 1. 5. 00:42';
s=s.substr( 0, 10 ); // 날짜 출력 2000.00.00 12:00 -> 2000.00.00
var Gs=createlist ('/58');
var sSt=createlistClass ('웹문서');
document.write(Gs+" <a href='/58'>티스토리 카테고리별 css적용하기</a> <span class='date'>("
+ s + " - </span><span class='content-info-category'><span class='"
+ sSt +"'>웹문서</span>)</span>");
//]]>
</script>createlist는 /58를 입력받아 g의 배열과 비교하여 아이콘을 리스트 앞에 배치 합니다.
createlistClass는 웹문서를 입력 받아 각각의 비교(if)하고 sS값을 리턴 합니다.
간단하죠. 부끄럽습니다.
이제 위의 자바스크립트에 선언한 클래스를 css파일에 만들어 놓기만 하면 됩니다.
/* 카테고리별 스타일 지정 */
.content-info-category .Library {}
.content-info-category .htmlcss {}
.content-info-category .hobby {}
.content-info-category .Travel {}
.content-info-category .Etc {}스타일은 자유롭게...
마무리
사실 이 포스트를 적을까 말까 고민도 많이 했지만 몇달이 지나서 잃어버리는 저때문에 기록삼아 적어 놓습니다. 저처럼 머리 나쁜 사람들에게는 조금이나마 도움이 되었으면 하기도 했고요.
