유사클래스3 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. 이전 1 다음