태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... } IT 이야기/블로그 & HTML2009/03/30 21:57
CSS 스타일시트를 이용해서 스타일을 적용하는 방법에는 대표적으로 세가지 방법이 있습니다.
- 태그를 이용한 방법: A { ... } / DIV { ... }
- 클래스를 이용한 방법: .class1 { ... }
- 아이디를 이용한 방법: #id { ... }
원소들간의 포함관계를 나타내고 싶을때는 공백을 이용해서 나열하면 되고, 동시에 여러 부류에 스타일을 적용하고 싶을때는 ,(comma)를 이용해서 표현하면 됩니다.
예를 들어, 아래와 같은 CSS 구문을 살펴보면,
content 라는 아이디를 가진 원소 내부에 entry 클래스 원소 내부의 ol, ul, il 태그의 padding-left 을 25px 로 설정하라는 의미가 됩니다.
그런데, 경우데 따라 위 방법만으로는 표현하기가 힘든 경우가 있습니다.
가령, 서버측에서 자동으로 생성되어 오는 html문장이면서, 별도의 아이디나 클래스가 없는 경우일텐데요, 대표적으로, 티스토리 본문아래에 포함되는 CCL1 안내문구가 그렇습니다.
본 블로그에 포함되어 있는 html은 아래와 같습니다. (이쁘게 보이도록 일부만 캡춰하였음)
가만히 들여다 보면, fieldset 태그로 묶여 있을뿐 어디에도 클래스나 아이디가 보이질 않습니다. 만약, 이에 포함된 링크에만 특별한 속성값을 할당하고 싶을 경우에는 좀 난감하죠.
그런데, 한줄기 희망이 보이는데, 그건 바로 바로 rel="license" 라고 표현된 링크의 속성값입니다. 곰곰히 생각해보니, 속성값을 이용해서도 스타일을 할당하는 방법이 있었던게 생각이 나더라구요. 표현법은 아래와 같습니다.
tag[attribute=value] { ... }
이 방법을 이용하면, tag 중에서 attribute 값이 value 인 원소들에만 적용되는 스타일을 설정할 수 있습니다.
다음은 본 블로그에 적용된 스타일입니다. 본문 글에 포함된 링크의 뒤쪽에 화살표(
)가 보이도록 설정을 하였고, 본문 아래의 부가항목들에서는 보이지 않도록 만들어 보았습니다.
화살표 부분을 보면 첫줄은 .article 클래스 > fieldset 태그 > a 중에서 rel 값이 license 인 원소를 의미하고, 두번째, 세번째 줄은 카테고리글 더보기 부분의 클래스 > a 를 의미합니다. 마지막 줄은 메타사이트 추천버튼 부분인데 여기는 제가 직접 입력한 부분이므로 간단하게 meta_link 라는 클래스를 이용해서 설정했습니다.
이 결과, 의도데로 해당부분에서는 화살표가 보이지 않게 되었지요. 아주 간단한 팁이긴 합니다만, 알아두면 간혹 요긴하게 쓰일 곳이 있을 것 같아 포스팅 해 둡니다.
다만, 이 기능은 인터넷 익스플로러 6 이전 버전에서는 안된다고 합니다.
- Creative Commons License [본문으로]
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 새 파비콘(favicon)과 블로그이미지, 대표이미지 (6) | 2009/04/09 |
|---|---|
| max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기 (17) | 2009/04/01 |
| 태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... } (2) | 2009/03/30 |
| 한RSS 디렉토리 등록 (2) | 2009/03/27 |
| 내 블로그가 추천블로그 + 다음 블로그 지표보기 (12) | 2009/03/12 |
| 딜리셔스(delicious.com)의 Link Rolls 이용해서 즐겨찾기를 관리해 보자 (2) | 2009/02/25 |
댓글을 달아 주세요
오~ 정말 잘 정리해주셨네요.
잘 보고 갑니다. ^^
최대한 쉽게 작성해 본건데.. 이리 말씀해 주시니 기분이 좋네요.. ㅎㅎ
감사합니다. ^^