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 정보출력 플러그인을 공개했습니다. 본 블로그에서도 그 내용을 소개했었죠.

그런데, 몇가지 미흡한 부분이 있는데, 그 중 하나가 블로그상의 모든 사진에 일괄적용된다는 겁니다. 경우에 따라서는 선택적으로 보여주고 싶을 수도 있는데 말이죠. 

그래서, 스타일 시트를 이용해서 Exif정보가 보여지는 상태를 제어해볼까 합니다. 

준비

먼저 정해야 할 것은, 보여지는 상태와 감춰지는 상태중 어떤것을 기본으로 하느냐 입니다.  이를 결정하면 그 여부에 따라서 블로그 스킨의 스타일시트의 맨 아래에 아래 내용을 추가합니다. 
( 스타일 편집은 관리자 > 스킨 > HTML/CSS 편집 을 클릭한 후에, 아랫쪽 텍스트박스입니다. 자세한 사항은 티스토리 메뉴얼 참조 )

[1]
/* 기본적으로 Exif정보가 보여지지 않게 할때만 아랫줄 추가 */
.ExifInfo { display: none !important; }

[2]
/* Exif 정보출력 플러그인 제어 */
.show_exif .ExifInfo { display:block !important; }
.hide_exif .ExifInfo { display:none !important; }

이때, 기본으로 감춰지게 할때만 [1], [2] 모두 추가하고, 그렇지 않을 경우는 [2]만 추가합니다.

적용

일단 정상적으로 글을 작성하시면 됩니다. 그러면, 기본설정데로 Exif정보가 보여지거나 감춰집니다. 그리고, 기본설정과 반대로 하고 싶은 부분에 대해서만 위 스타일을 적용시켜주면 됩니다. 

가령 기본적으로 감춰놓았지만, Exif 정보를 보여주고 싶은 부분이 있다면, 그 부분 앞뒤에 아래와 같이 스타일을 적용시켜주면 됩니다. 

<!-- (1) 이부분에 있는 사진은 Exif 정보가 감춰짐 -->

<div class="show_exif">

<!-- (2) 이부분에 있는 사진은 Exif 정보가 출력됨 -->

</div>

<!-- (3) 이부분에 있는 사진은 Exif 정보가 감춰짐 -->

만약 포스팅 단위로 적용하려면, (1)과 (3)부분은 무시하면 되고, (2)부분이 작성한 본문이 되겠죠. 글을 다 쓴 후에 앞뒤에다가 위처럼 태그를 추가해 주면 되겠죠.

태그를 추가하려면, 편집모드를 HTML로 바꿔야 하는데, 편집창 우측상단에 HTML이라는 체크박스를 이용하면 됩니다.

확인

본 블로그는 기본적으로 보여지도록 설정해 두었습니다만, 아래 두 사진을 확인해 보시면 정보가 감춰지기도 하고, 보이기도 하는 두 경우를 다 확인하실 수 있습니다.

좀 귀찮을 수도 있긴 합니다만, 습관을 들이면 그리 어렵지 않으리라 생각됩니다. 사실 제일 좋은건 티스토리에서 플러그인의 기능을 개선해 주는 것이겠지만, 궁극적으로 사진단위로 조절을 하는 것은 이미지블럭에 정보표시선택여부를 추가해야 하는 거라서 금방 될것 같지는 않네요.

암튼, 필요하신 분 계시면 도움이 되셨길... 

참고로, 본 내용은 IE7과 크롬에서 확인하였습니다. 

테터데스크 사용중에 보면 썸네일 크기를 조정하기가 쉽지 않다. 보통은 가로나 세로 기준 하나만 적용해서 이미지 크기를 조정하게 되므로 사진의 위아래나 좌우가 잘리기 마련이다.

이때 사용하면 좋은 CSS 스타일이 바로 max-width와 max-height.
영어단어에서 유추할 수 있듯이, 최대 높이와 최대 너비를 지정해 주는 구문인데, 이를 이용하면 이미지의 최대 크기가 제약되므로, 화면상의 이미지는 내가 지정해둔 공간 안으로 쏙 들어오게 된다.



참고로 아래는 현재 사용중인 CSS중 일부이다...

.TD_recent .TD_thumblist .TD_thumbimg .TD_thumbnail img { 
        max-width:200px; max-height:200px; 
}