Skip to main content
2014.06.05 17:37

CSS3 선택자 - 기본편

조회 수 723 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

CSS3 선택자에 대해서 간단히 정리합니다.
정리만 하는거라 무슨내용인지 이해를 못하실 수 있습니다.

jQuery 선택자 사용법과 거의 동일하다고 생각하시면 됩니다.
jQuery가 CSS3를 따라한것 같은데... 아닌가요?^^


  • * : 전체선택자
  • tag : 태그선택자
  • #id : 아이디 선택자
  • .class : 클래스 선택자
  • tag1 tag2 : 후손(뒤쪽모두) 선택자
  • tag1 > tag2 : 자손(바로뒤만) 선택자 

  • tag[type=value] : 속성 선택자
    tag[type~=value] : 단어 포함 (and)
    tag[type|=value] : 단어 포함 (or)
    tag[type^=value] : 시작
    tag[type$=value] : 끝
    tag[type*=value] : 값 포함

  • tag1 + tag2 : 동위(바로뒤만) 선택자
    tag1 ~ tag2 : 동위(뒤쪽모두) 선택자

  • tag:first-child : 구조 선택자 (첫 번째 위치하는 자손)
    tag:last-child : (마지막에 위치하는 자손)
    tag:nth-child(2n+1) : 앞에서 수열번째 자손
    tag:nth-last-child(2n+1) : 뒤에서 수열번째 자손

    tag:first-of-type : 첫번째 태그
    tag:last-ot-type : 마지막 태그
    tag:nth-of-type(2n+1) : 앞에서 수열번째 태그
    tag:nth-last-ot-type(2n+1) : 뒤에서 수열번째 태그

  • tag:active : 반응 선택자 (마우스로 클릭한)
    tag:hover : 마우스를 올린

  • tag:checked : 상태 선택자 (체크 상태)
    tag:focus : 초점이 맞추어진 상태
    tag:enabled : 사용 가능한 상태
    tag:disabled : 사용 불가능한 상태

  • tag:link : 링크 선택자 (href가 있는 a태그)
    tag:visited : 방문했던 링크의 a태그

  • tag::first-letter : 문자 선택자 (첫 번째 글자만)
    tag::first-line : 첫 번째 줄만
    tag::after : 태그뒤에 위치하는 공간
    tag::before : 태그앞에 위치하는 공간
    tag::selection : 드래그한 글자

  • tag:not(tag) : 부정 선택자


※ 흔히 하는 실수들...

  • #id tag1, tag2 와 #id tag1, #id tag2 다르게 작동합니다.
    앞쪽은 #id tag1과 tag2를 선택하는 것임.
    뒷쪽은 #id tag1과 #id tag2를 선택하는 것임.

  • 웹 표준에 따르면 각각의 태그에 지정된 속성 이외의 것을 사용하면 안 됨.
    단, 속성 앞에 문자열 data-를 붙이면 사용자 지정 속성으로 인정해 줌.
    예) jQuery Mobile : data-role 을 사용함.


※ 예제 풀기

  • input[type=checkbox]:checked + label {background:red}
    체크박스가 체크되면 label의 배경색을 빨간색으로...

  • li:nth-child(2n) {background:red}
    li태그의 짝수열은 배경을 빨간색으로...

  • input:not([type=password]) {background:red}
    password가 아닌것은 모두 배경이 빨간색으로...



  1. No Image 13Jun
    by
    Views 717 

    코너스톤 - 고품질 HTML5 웹앱 개발킷

  2. No Image 08Nov
    by
    Views 1132 

    반응형웹과 CSS3 미디어쿼리 이해하기

  3. No Image 08Nov
    by
    Views 3348 

    반응형 웹 사이트 모음

  4. No Image 05Jun
    by
    Views 607 

    HTML5 시멘틱 관련 태그

  5. No Image 05Jun
    by geusgod
    Views 723 

    CSS3 선택자 - 기본편

Board Pagination Prev 1 Next
/ 1