본문 바로가기

CSS340

CSS :tager 동적 유사 클래스 CSS :tager 동적유사클래스 (css3) 사용자가 클릭할 경우의 원본의 부분을 강조하기 위한 재미있는 새로운 방법. 필요한것은 클릭해야하니 링크, 그리고 효과가 지정될 엘리먼트, 그리소 css 설정이다. 예를들어보자 클릭하게되면 지장된곳의 상태가 css에서 지정한것으로 바뀐다.예제를 보자 먼저 여기를클릭하시오 다음 여기를클릭하시오 먼저 여기 배경색이 빠뀜 폰트크기가 바뀜 css는 다음과 같이 #first:target{ background: #ffff7e; } #second:target{ font-size:25px;} 첫번쪠 지정한 곳은 배경색이바뀐다. 두번째 지정한곳은 크기가 바뀐다. 이런 target 은 한페이지내에 링크를 걸어둘경우 선택되었을떄 특별히 주목받도록 변경시킬때 사용된다. 직접예제를 .. 2009. 9. 22.
CSS :nth-last-child 유사클래스(css3) CSS :nth-last-child 유사클래스 이외.. :nth-child를 봤다면 :nth-last-child 도 어렵지않다. 아니똑같다.LAST가 붙은 만큼 뒤에서 세어주면 된다. 간다한은 예 li:nth-last-child(2n){ font-size:20px;} /*뒤에서 꺼꾸로 짝수번쨰 폰트사이즈 20px*/ 나머지 ㅁ유사한~유사클래스를 마저 보자 :only-child :only-child이건 only 붙은 만큼 유일한 자식이 있을경우만 선택된다,예로 div:only-child라 했을 경우 이건 유일하니 선택됨 첫째 자식 또한명 자식 이다보니 선택안됨 :last-child :first-child의 반대이다.:first-child는 자식 첫번째 껄 선택한다.반대로 :last-child는 마지막 자식.. 2009. 9. 18.
CSS :nth-child 유사클래스(css3) CSS :nth-child 유사클래스 순차적 자식선택자이다. 자식선택자중 li라던가 table의 tr태그에 쓰이게 되는데 예제를 보자 홀수 짝수 홀수 짝수 이표는 홀수의 번쨰의 경우 표의 색깔을 #FF9999 로 한경우이다. 이렇게 할경우 소스는 다음과 같다. 홀수 짝수 홀수 짝수 .odd{background-color:#ff9999;} .even{background-color:#ffcccc;} 이와칸이 별도로 클래스를 지정해주고 그에 맞게 색을 지정하게 해주어야한다. 표나, 리스트의 행열이 적으면 간편하나 길면 일일이 클래스 지정해주기가 귀찮아 진다.특히 통계자료에 쓰일 표같은 경우는 더욱 그렇다. 이같은 점을 쉽게 사용할 수 있도록 하는 방법이 :nth-child를 이용하는것이다.사용방법은 다음과 같.. 2009. 9. 18.
CSS 간접 선택자(css3) CSS 간접 선택자(General selector) 간접 선택자는 엘리먼트 뒤에 나오는 모든 엘리먼트를 지정할때 사용한다. E ~ F{font-size:20px;} /*F element preceded by an E element (E 엘리먼트가 F엘리먼트보다 앞에있다.*/ h1 ~ p{} 이렇게 지정하면 h1 뒤에 p엘리먼트가 선택된다 하지만 다른 엘리먼트에 종속되어있는 엘리먼트는 선택되지 않는다.예제를 보자. 앞서있는 엘리먼트 어쩌고 저쩌고 어쩌고 여긴선택안됨 저쩌고 h1 ~ p{font-size:20px;} 결과는 다음과 같이 된다 앞서있는 엘리먼트 어쩌고 저쩌고 여긴선택안됨 어쩌고 저쩌고 위와 같이 div엘리먼트안에 p 엘리먼트는 선택되지않는다. 2009. 9. 17.
CSS 인접 선택자(css3) CSS 인접 선택자(Adjacent selector) 인접선택자는 엘리먼트 바로다음에 오는 엘리먼트를 지정하는 방법이다. 사용방법은 다음과 같다. E + F{font-size:30px;} /*F element immediately preceded by an E element (F엘리먼트 다음 바로 붙어오는 E엘리먼트*/ 예를 들어html이 다음과 같을 경우 기준이요 선택되는것은 여기 여기는 선탣안됨 여기도 선탣안됨 h1 + p{font-size:30px;} /*"선택되는것은 여기" 이 텍스트의 폰트크기가 30px이 된다.*/ h1 다음에 오는 엘리먼트 첫번쨰 엘리먼트p만 폰트의 크기가 30px이 된다. 2009. 9. 17.
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 브라우저별 지원여부 사용하는 브라우저를 선택한후에 아래에 가서 테스트 http://www.css3.info/selectors-test/ 2009. 9. 16.
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.
CSS3 지원여부 IE7, 파이어폭스3 CSS3에 대해 이둘은 지원이 미흡하다. 자식 선택자, 인접 선택자, 속성 선택자는 모두지원 단 IE7의 경우 약간의 버그가 있다. 이둘은 유사클래스가 몇개 지원 안된다. 파이어폭스3의 경우 * :nth-child() * :nth-last-child() * :first-of-type * :last-of-type * :only-of-type * :nth-of-type() * :nth-last-of-type() IE7는 아래 둘말곤 유사글래스 모두 지원 안됨. * :first-letter * :first-line 2008. 10. 24.
브라우저의 CSS3 지원 여부 확인 포탈 싸이트에서 CSS3 검색시 다음과 같이 확인할 수 있다. CSS Selectors CSS 선택자지원 확인서비스 사이트, 테스트 안내.http://www.css3.info/selectors-test/들어가면 뜨는 내용 일부 CSS SelectorsIs your browser compatible?After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is.. 2008. 10. 24.