웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

:first-child - 가상 선택자 : 부모로 부터 첫번째 자식인 요소만을 선택 ex) 첫번째 자식인 p 요소 선택 ( 예 : p:first-child ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 first-child p:first-child{ background-color:yellow; } :first-child 가상 선택자 – 부모로 부터 첫번째 자식인 요소만을 선택 첫번째 div 로 부터 첫번째 자식인 요소 첫번째 div 로 부터 두번째 자식인 요소 두번째 바디로 부터 첫번째 p 요소 두번째 바디로 부터 두번째 p 요소

:first-line - 가상 선택자 : 지정된 요소의 첫 번째 줄을 선택 ex) p요소의 첫번째 줄 선택 ( 예 : p:first-line ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 :first-line p:first-line{ color:#8A2BE2; } :first-line 가상 선택자 – 지정된 요소의 첫 번째 문자를 선택 지정된 첫번째 라인만을 적용 다음줄 부턴 기본 스타일 적용 3번째... 4번째... 기타....

: first-letter - 가상 선택자 : 지정된 요소의 첫 번째 문자를 선택 ex) p단락의 첫번째 문자 선택 ( 예 : p:first-letter ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 :first-letter P:first-letter{ font-size:200%; color:#8A2BE2; } :first-letter 가상 선택자 – 지정된 요소의 첫 번째 문자를 선택 test1 test2 test3

:focus - 링크 선택자 : input 요소의 포커스 된 요소를 선택 ex) input요소에 클릭되어 있는 상태 - 글씨를 쓰려고 하는 상태 ( 예: input:focus ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 :focus input:focus{ background-color:yellow; } :focus input 요소의 포커스 된 요소를 선택 First name: Last name:

:hover 링크 - 선택자 : 마우스가 지정된 요소에 위에 올라간 상태 ex) a태그 위로 마우스가 올라간 상태 ( 예 : a:hover ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 :hover a:hover{ background-color:yellow; } :hover - 링크 선택자 마우스가 지정된 요소에 위에 올라간 상태 daum jokack01.tistory.com naver bobaedream nate

:active - 링크 선택자 : 활성화된 링크만 모두 선택 ex) a 태그를 클릭시 ( 예 : a:active ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 :active a:active{ background-color:yellow; } :active - 링크 선택자 활성화된 링크 선택 : 마우스가 클릭되서 떼기 전 까지의 상태 ~ daum jokack01.tistory.com naver bobaedream nate

:visited - 링크 선택자 : 방문된 링크만 모두 선택 ex) 방문된 링크들을 선택 ( 예 : a:visited ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 :visited a:visited{ color:green; } :visited - 링크 선택자 방문된 링크만 모두 선택 daum jokack01.tistory.com naver bobaedream nate

:link - 링크 선택자 : 모든 링크를 선택 ex) 모든 링크 선택 ( 예 : a:link ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 :link a:link{ background-color:yellow; } 링크 선택자 모든 링크를 선택 daum jokack01.tistory.com naver

[attribute|=language] - 속성 값 선택자 : 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 ex) p 태그에 lang 속성이 en 으로 시작하는 요소를 모두 선택 ( 예 : [lang|=en] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [attribute|=language] [lang|=en]{ background:yellow; } 속성 값 선택자 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 Hello! Hi! Ello! Hi! Hei!

attribute~=value - 속성 값 선택자 : 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 ex) a태그에 title 속성값에 ho 단어가 포함된것들을 선택 ( 예 : [title~=ho] ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 [attribute~=value] [title~=ho]{ background:yellow; } 속성 값 선택자 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 daum jokack01.tistory.com naver