Wireframe :: tistory

속성에 따른 CSS 적용

CSS를 적용할 때 동적으로 변경되는 UI를 지정하는 방법이 있습니다. 다름아닌 :hover 속성을 이용하는 것인데요. IE6에서는 A 엘레먼트에 대해서만 지원이 되었습니다. 즉 <a> 태그를 사용해서 하이퍼링크를 걸어놓은 텍스트에 마우스 커서가 올라가면 a:hover 에서 정의한 스타일이 적용이 되는 방식이지요. 매우 오래전부터 사용되었던 테크닉이고 이제는 거의 기본적으로 쓰이고 있는 부분인 만큼 아주 일반적인 내용이라고 볼 수 있습니다.

IE 계열 브라우저에서 그간 성실히(?) 지원하지 않은 탓이긴하지만 사실 이 :hover 속성도 A 엘레먼트 외에 모든 엘레먼트에 적용이 가능한 속성입니다. (비 IE 계열 브라우저 사용자들은 알고 계실지도 모르지만 말이지요) 이러한 개념을 CSS에서는 '유사 클래스'라고 하는데요, 자바스크립트로 일일이 클래스를 바꿔줘야 하는 성가신 일이 CSS 설정을 통해서 아주 쉽게 적용이 되는 장점이 있습니다. 우리가 많이 볼 수 있는 게시판의 글 목록에서 마우스가 위치한 행의 색만 바뀌는 것도 이 유사 클래스를 사용하면 자바스크립트 없이도 구현이 가능한 것이지요.

오늘 이야기하고자 하는 것은 이런 유사 클래스가 아닌 속성에 따른 선택자를 사용하는 방법입니다. 예를 들자면 여러분의 블로그에서 링크를 걸 때, 새 창으로 띄우는 경우가 있고, 페이지를 바로 전환하는 경우가 있을 수 있습니다. 이 경우에 두 가지 링크를 다른 색으로 표시한다거나, 새 창으로 띄우는 링크에 한해서만 링크 뒤에 새 창 아이콘을 표시하는 것을 CSS로만 설정이 가능할까요? 혹은 블로그 내의 다른 글로 링크를 거는 경우와 다른 사이트로 링크를 거는 경우에 대해 서로 다른 스타일을 지정하는 것이 CSS 설정 만으로 가능할까요?

속성 선택자 (Attribute Selector)

위에서 언급한 경우에 대해서 CSS2 규격에서는 속성 선택자라는 개념으로 소개하고 있습니다. 여기에서 속성은 인라인 태그에서 명시되는 속성을 말합니다. 

<a href="http://wireframe.tistory.com/" target="_blank" title="wireframe" >LINK </a>

위의 예시에서 href, target, title 과 같은 것들이 해당 엘레먼트의 속성입니다. 이러한 속성을 통해 일반적인 엘레먼트와 해당 속성에 대한 엘레먼트를 구분할 수 있습니다.

다음은 몇 가지 속성 선택자를 사용하는 방법입니다.

• a {color:red;} - 속성이 따로 정의되지 않은 A 엘레먼트는 빨간 글씨를 사용합니다.

• a[title] {color:pink;} - title속성이 정의된 A 엘레먼트는 title이 어떤 값이든 간에 핑크색 글씨를 사용합니다.

• a[target=_blank] {color:blue} - 새 창으로 뜨는 A 엘레먼트는 파란색 글씨를 사용합니다.

대충 감이 오시나요? 다음은 조금 더 재미있는 케이스를 만들 수 있는 것들입니다.

• a[href^=mailto] {color:yellow;} - 메일 주소로 연결되는 링크는 노란색으로 표시합니다.

• a[href~=google] {color:green} - 링크되는 주소중에 'google'이라는 단어가 들어있는 경우 녹색으로 표시합니다.

• a[href|=google] {color:mistyrose} - 링크되는 주소중에 하이픈으로 구분되는 단어에 google 이 있으면 연분홍으로 표시합니다. 즉 google-labs 라는 속성값이 있을 때, [href~=google]에는 검출되지 않지만 [href|=google]에는 적용이 됩니다.

이렇게 속성 선택자를 잘 활용하면, 서버사이드 스크립트나 자바스크립트를 사용하지 않고도 유연하고 다양한 스타일을 활용할 수 있다니, 좀 배워볼 가치가 있지 않나 싶기도 합니다.

이올린에 북마크하기(0) 이올린에 추천하기(0)