CSS 선택자15 CSS 자식 선택자(css3) CSS 자식선택자(Child selector) 자식선택자는 엘리멘트 하위에 엘리먼트를 선택하는 것이다. 방법은 다음과 같다 E > F{font-size:30px;} /*an F element child of an E element( F는 E 의 자식엘리먼트이다*)/ 예로"div#box >div" 이의미는 box라는 아이디를가진 div엘리먼트에 속한 div엘리먼트를 선택하는 것이다. 그러면 div#box div 자손선택자와 타이점은 무엇인가? 자식은 말그대로 아들(child) 그엘레먼트의 바로 하위에만을 의미한다. 하지만 자손은 그하위에 모든 엘리먼트를의미한다. 예를 보자 여기는 바로아래 자식이다 여기는 자시이아닌 손자이다 여기도 자식이아닌 손자(자손)이다. css는 다음과 같다. div#box p{ fo.. 2009. 9. 17. 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. CSS 고급선택자(3) CSS 고급선택자(3) 속성선택자(attribute selector) 태그에서 속성은 가장흔한예로 우리가 여기서 tittle을 예로들수있다. 보통 엘리먼트위로 마우스를 올렸을때 툴팁을 표시하는데(노란박스와 tittle의 값) 속성을 다르게 표시할 수있다 사용법은 엘리먼트[속성엘리먼트]{} a[tittle]{border: 1px dotted #999;} a[tittle]:hover{cursor: help;} 위와같이한다면 점선으로된 1pxdml 테두리 그리고 마우스를 가져갔을때 믈음표모양이 보일것이다. 2009. 8. 30. CSS 고급선택자(2) CSS 고급선택자(2) 인접 형태 선택자(adjacent siblimg selector) h1 + p{font-weight:bold;} 제목 첫번째 문단 두반쩨 문단 인접선택자는 부모를 가지는 엘리먼트중에 가장 앞에 나오는 엘리먼트릴 지정하는것이다.따라서 첫번째 문단만 굵게 표시 된다. 제목 첫번째 문단 두반쩨 문단 2009. 8. 30. CSS 고급선택자 CSS 고급선택자 자식선택자(child seletor) 자식 엘리먼트가 있을 경우 바로밑에 속한 자식엘리먼트가 선택되는 경우이다. 아래와 같은 경우 바같이라는 글자만 굵게 표시된다 #nav > li {font-weight:bold;} 바깥 바깥 안안안안안 바깥 바깥 아래와 같이 표현된다 바깥 바깥 안안안안안 바깥 바깥 하지만 빌어먹을 IE6이하에서는 먹혀들지않는다 전채선택자로 유사하게 흉내낼수 있다 #nav li{font-weight:bold;} #nav li *{font-weight:nomal;} 2009. 8. 30. 이전 1 2 다음