본문 바로가기

속성선택자2

CSS (CSS3) 속성선택자 (attribute selector) CSS (CSS3) 속성선택자 (attribute selector) CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다. 티스토리 네이버 다음 네이트 드림위즈 야후 구글 이번엔 CSS를 보자 정의 한것 [attr] : 속성값을 가지는경우 [attr=" "] : 속성값이 정확히 일치 [attr~=" "] : 속성값이공백으로 구분한 경우 [attr|=" "] 속성값이 하이픈으로 구분한 경우 아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우 [attr$=" "]주어진값으로 끝나는경우 [attr*=" "] 속성값이 일부일치한다면 적용 아래는 적용한 예제다 /*title .. 2011. 12. 30.
CSS 링크 유형별 스타일 지정(css3) CSS 링크 유형별 스타일 지정 유형별 스타일 지정에 대한 설명은 속성선택자(포스팅참고)가 사용되는 만큼 IE6등 몇몇 브라우저에 적용안된다. 명심하고 보자 유형별로 스타일을 지정해준다 이말은 각각 링크가 나올때마다 변경하기 귀찮으니 유사한 경우 이렇게 해라고 처리해주는것이다.아래예를보자 #example a{ background:url(test.gif) } 이와같은 것을 여러번 변경하기 귀찮다. 클래스로 지정해서 비슷한경우를 처리해줘도 되지만 이것도 일일이 클래스 부여라는 문제가있다. 속성선택자를 이용해보자 a[href^="http:"]{ background:url(test.gif) }/*일반적으로 http:로 시작하는 외부링크일때 배경이미지를 test.gif로 잡아준다.*/ a[href^="http:/.. 2009. 9. 6.