본문 바로가기

CSS 선택자15

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.
CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3 선택자(selectors) - 유사클래스(pseudo-class) Part3 :first-letter :first-line 텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자 The moment Alice appeared, she was appeal...... The executioner's argument was, that you couldn't cut.. The executioner's argument was, that you couldn't... 위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다. p { /*기본설정*/ font-size.. 2011. 12. 29.
CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2 선택자(selectors) - 유사클래스(pseudo-class) Part2 :empty 공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다. div크기만 정해줬고 배경색을 지정했다. div{width:100px; height:100px;} div:empty{ background:#000;} :root 문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다. :only-child 유일자식으로 자식이 하나밖에 없을때 유용하다. 첫번째 자식이고 두번째 자식이므로 적용안됨 자식하나뿐임 아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다. li:only-child {color: #F00;} :only-of-ty.. 2011. 12. 29.
CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1 선택자(selectors) - 유사클래스(pseudo-class) Part1 너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조 CSS 링크 스타일 기초 순서는 LoVe:HAte 를 상기 하자 CSS :tager 동적 유사 클래스 :traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html :focus 유사클래스 엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자 위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다. CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover fo.. 2011. 12. 29.
CSS 선택자(selectors) - 조합 선택자 CSS 선택자(selectors) - 조합 선택자최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅 일단 예제 html을 올린다 CSS선택자 맛있는반찬 맛있게 먹어봅시다 으히히 매운꽃게탕 라면밥 카레라이스 그런데 달랑3개뿐 지금은 저녁인데ㅠㅠ 자손 선택자 A B 아주 잘 알고있는것 부모의 자손엘리먼트를 지정 div ul li{ color:#009;} 위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가 색깔이변한다 공통 선택자 A * B구애 받지않고 모든것. * 는 모든것을 의미한다. A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다. div * em{ color:#F00;} 캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째.. 2011. 12. 28.
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.