CSS 스타일시트를 이용해서 스타일을 적용하는 방법에는 대표적으로 세가지 방법이 있습니다. 

• 태그를 이용한 방법: A { ... } / DIV { ... }
• 클래스를 이용한 방법: .class1 { ... }
• 아이디를 이용한 방법: #id { ... }

원소들간의 포함관계를 나타내고 싶을때는 공백을 이용해서 나열하면 되고, 동시에 여러 부류에 스타일을 적용하고 싶을때는 ,(comma)를 이용해서 표현하면 됩니다.

예를 들어, 아래와 같은 CSS 구문을 살펴보면, 

content 라는 아이디를 가진 원소 내부에 entry 클래스 원소 내부의 ol, ul, il 태그의 padding-left 을 25px 로 설정하라는 의미가 됩니다. 

그런데, 경우데 따라 위 방법만으로는 표현하기가 힘든 경우가 있습니다.

가령, 서버측에서 자동으로 생성되어 오는 html문장이면서, 별도의 아이디나 클래스가 없는 경우일텐데요, 대표적으로, 티스토리 본문아래에 포함되는 CCL^[각주:1] 안내문구가 그렇습니다.

본 블로그에 포함되어 있는 html은 아래와 같습니다. (이쁘게 보이도록 일부만 캡춰하였음)

가만히 들여다 보면, fieldset 태그로 묶여 있을뿐 어디에도 클래스나 아이디가 보이질 않습니다. 만약, 이에 포함된 링크에만 특별한 속성값을 할당하고 싶을 경우에는 좀 난감하죠. 

그런데, 한줄기 희망이 보이는데, 그건 바로 바로 rel="license" 라고 표현된 링크의 속성값입니다. 곰곰히 생각해보니, 속성값을 이용해서도 스타일을 할당하는 방법이 있었던게 생각이 나더라구요. 표현법은 아래와 같습니다. 

이 방법을 이용하면, tag 중에서 attribute 값이 value 인 원소들에만 적용되는 스타일을 설정할 수 있습니다. 

다음은 본 블로그에 적용된 스타일입니다. 본문 글에 포함된 링크의 뒤쪽에 화살표()가 보이도록 설정을 하였고, 본문 아래의 부가항목들에서는 보이지 않도록 만들어 보았습니다.

화살표 부분을 보면 첫줄은 .article 클래스 > fieldset 태그 > a 중에서 rel 값이 license 인 원소를 의미하고, 두번째, 세번째 줄은 카테고리글 더보기 부분의 클래스 > a 를 의미합니다. 마지막 줄은 메타사이트 추천버튼 부분인데 여기는 제가 직접 입력한 부분이므로 간단하게 meta_link 라는 클래스를 이용해서 설정했습니다. 

이 결과, 의도데로 해당부분에서는 화살표가 보이지 않게 되었지요. 아주 간단한 팁이긴 합니다만, 알아두면 간혹 요긴하게 쓰일 곳이 있을 것 같아 포스팅 해 둡니다.

다만, 이 기능은 인터넷 익스플로러 6 이전 버전에서는 안된다고 합니다. 

바로 어제 티스토리 Exif 정보출력 플러그인 - CSS로 제어하기 라는 글을 올렸는데요. 아무래도 매번 Exif 정보를 보일지 말지 결정하는 건 넘 귀찮은 일인것 같습니다.

고민한 끝에, 카테고리나 태그 단위로 Exif 정보출력 여부를 설정할 수 있으면 좋겠다 라는 결론에 이르렀습니다. 그래서, 잠깐 짬을 내어 열심히 코딩을 했지요. ( 직업병은 어쩔수가 없나봅니다. 일할때는 일하느라 코딩하고, 쉴때는 블로깅 하느라 코딩하고.. 에휴~)

그래서 성공했습니다. 지금부터 그 방법을 공개합니다.

1. 스타일시트에 아래와 같은 내용을 추가합니다.

/* Style by crazybar.net */
/* 기본적으로 Exif정보가 보여지지 않게 할때 */
.ExifInfo { display: none !important; }

.show_exif .ExifInfo { display:block !important; }
.hide_exif .ExifInfo { display:none !important; }
/* end of Style by crazybar.net */

이 부분에 관한 설명은 생략합니다. 이전글을 참고하세요.

2. </head>를 찾아서 그 앞에 아래 내용을 추가합니다.

<!-- Script by crazybar.net -->
<script type="text/javascript" language="javascript">
<!--
var catWords = new Array("카테고리1", "카테고리2", ... );
var tagWords = new Array("태그1", "태그2", ... );

var targetClass = "show_exif";

var postNum = 0;
var changeFlag = false;

function checkName(words, str){
    for(var i = 0; i < words.length; i++) {
        if(str == words[i]) {
            changeFlag = true;
        }
    }
}

function checkByCategory(catStr) {
    var catNames = catStr.match(/[^\/]+/gi);

    for(var i = 0; i < catNames.length; i++) {
        checkName(catWords, catNames[i]);
    }
}

function checkByTag(tagId) {
    var tag = document.getElementById(tagId);

    if(tag){
        var tagObjs = tag.children;

        for(var i = 0; i < tagObjs.length; i++) {
            if(tagObjs[i].nodeName == "A"){
                checkName(tagWords, tagObjs[i].innerHTML);
            }
        }
    }
}

function changeClass(postId){
    if(changeFlag){
        var postObj = document.getElementById(postId);
        postObj.className = postObj.className + ' ' + targetClass;
        changeFlag  = false;
    }
}
-->
</script>
<!-- End of Script by crazybar.net -->

catWords: Exif 정보를 출력할 카테고리 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
tagWords: Exif 정보를 출력할 태그 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
checkName: 추출한 카테고리나 태그가 catWords나 tagWords에 속하는지를 결정합니다.
checkByCategory: 카테고리 이름을 추출합니다.
checkByTag: 태그이름을 추출합니다.
changeClass: 지정한 조건에 맞는 경우, 포스팅 본문이 속한 DIV의 스타일을 조정하여 Exif 정보가 출력되도록합니다.

3. 다음을 찾아서 아래 내용으로 변경합니다. (포스트-클래스-이름은 스킨에 따라 다름)

<div class="포스트-클래스-이름"> [ ##_article_rep_desc_## ]

<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
var postId = 'post' + (++postNum);
var tagId = 'tag' + postNum;
document.write('<div class="클래스-이름" id="'+ postId +'">');
</script>
<!-- div class="article_post" -->
    

원래 본문을 감싸주는 DIV에는 ID가 없는데, 그것을 붙여주기 위한 부분입니다. ID는 고유해야 하므로, 전역변수를 이용해서 번호를 붙였습니다. 2에서 스타일을 적용시키는데 사용됩니다.

4. 다음을 찾아서 아래 내용으로 변경합니다. (태그-클래스-이름은 스킨에 따라 다름)

<s_tag_label> <div class="태그-클래스-이름">

<s_tag_label>
<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
document.write('<div class="태그-클래스-이름" id="'+ tagId +'">');
</script>
    <!-- div class="article_tag" -->

티스토리에서 넘어오는 태그정보는 링크까지 붙어있는 형태입니다. 그것으로 부터 태그를 뽑아내기 위해 DIV 객체를 제어해야 하기때문에 3과 비슷한 방법으로 해당 부분에 ID를 달아줍니다. 

5. </s_tag_label>을 찾아서 그 아래에 아래 내용을 추가합니다.

<!-- by crazybar -->
<script type="text/javascript" language="javascript">
checkByCategory('');
checkByTag(tagId);
changeClass(postId);
</script>

최종적으로 2에서 작성된 함수들을 호출하여 조건이 맞는 포스팅에 대해서는 Exif정보출력을 보이도록 설정해 주는 부분입니다.

이제 다 되었습니다. 휴~

본 블로그의 경우 오늘 현재, 카테고리는 갤러리와 사진, 카메라 만 Exif가 보이도록 설정되어 있고, 태그는 여행, 나들이, LX3, D300등을 설정해 두었고. 그외에는 보이지 않도록 되어 있습니다. 

다만 개별 포스팅별로 스타일을 직접 제어하는 경우는 예외가 됩니다. 

딱 이렇게 해 놓고 나니 이제 좀 마음이 편하네요.
사실, Exif 정보가 항상 보인다고 해서 문제될건 없습니다만, 불필요한 정보가 내용을 가리는 일이 발생할 수도 있기때문에, 선택적으로 보여주길 바랬던 것입니다.

어쨌던, 필요하다고 느끼셨던 분들에게 도움이 되셨길 기대합니다.

(추가내용)

현재 IE7과 크롬에서는 잘 되는 것을 확인했습니다.