CSS Selector   CSS 선택자

(2018-08-30)

CSS 셀렉터

1. [웹 디자인]  CSS 선택자(selector)HTML 요소 선택용 식별자
     - HTML 요소 태그를 선택 접근하여, 스타일을 지정케함


2.  CSS 선택자 종류

  ㅇ universal selector ( 모든 요소 선택자 )
     -  `*` 기호로 표기, 모든 요소를 한꺼번에 지정 

  ㅇ element selector ( 특정 요소 선택자 )
     -  특정 유형의 요소를 지정하는데에 사용 
        . 例) `a`, `hr`, `div` 등 HTML 태그명 기호를 사용하여 표기

  ㅇ attribute selector ( 속성 선택자 )
     -  속성자[attr] { } : 단순 속성 선택자
     -  속성자[attr='value'] { } : 지정 속성 선택자
     -  속성자[attr~='value'] { } : 부분 일치 속성 선택자
        . 완전한 단어를 구성할 때 만 선택됨
     -  속성자[attr|='value'] { } : 언어 속성 선택자
        . 주어진 문자열 그대로 포함 또는, 하이픈(-) 붙은 접두어로써 포함될 때 선택됨
     -  속성자[attr^='value'] { } : 시작 일치 속성 선택자
     -  속성자[attr$='value'] { } : 끝 일치 속성 선택자
     -  속성자[attr*='value'] { } : 부분 일치 속성 선택자

  ㅇ multiple selector ( 다중 선택자 )
     -  속성자[ ][ ] : 여러 개의 속성 선택자를 함께 결합하여 사용

  ㅇ id selector ( id 선택자 )
     -  `#` 기호를 사용하여 표기, 요소 id를 통해 해당 요소를 지정  (#id명)

  ㅇ class selector ( class 선택자 )
     -  `.` 기호를 사용하여 표기, 클래스명을 통해 해당 요소를 지정 (.class명)

  ㅇ group selector ( group 선택자 )
     - 여러 요소들을 그룹핑 선택
        . OR 선택자   : 例) a, hr, div { }
        . AND 선택자  : 例) a#id { }

  ㅇ descendant selector ( 하위 선택자 )
     -  특정 요소 하위에 나오는 요소를 지정할 때 사용             (특정요소명 하위요소명)
        . (모든 하위)  요소명1 요소명2   => 요소1 하위에 있는 모든 요소2 선택
        . (바로 직계)  요소명1 > 요소명2 => 요소1 바로 직속 하위에 있는 요소2 만 선택

  ㅇ 요소 결합 선택자
     -  선택자1 + 선택자2 { } : 이웃 형제 요소 결합 선택자
        . 선택자1 직후 일치하는 형제 요소
     -  선택자1 ~ 선택자2 { } : 범용 형제 요소 결합 선택자
        . 선택자1 뒤 모든 일치하는 형제 요소들


3. 가상 선택자 (pseudo-class selector)

  ㅇ `:` 기호를 사용하여 요소에 대해 더 정밀한 선택 및 스타일 지정을 위함

  ㅇ 링크에 대한 가상 선택자
     -  a:link         : 사용된 적이 없는 링크를 선택
     -  a:hover        : 링크 위에 마우스가 올라가면
     -  a:visited      : 이미 방문한 적이 있는 링크이면
     -  a:active       : 막 클릭한 순간의 링크이면

  ㅇ 단락 내 특정 요소의 강조를 위한 가상 선택자
     -  :first-letter : 첫 글자 만 선택
     -  :first-line   : 첫 줄 만 선택

  ㅇ 포커스(강조) 피드백 효과를 위한 가상 선택자 (마우스 클릭 등에 의해 유발됨)
     -  :focus        : 현재 포커스를 갖고 있으면

  ㅇ 자식 요소 선택을 위한 가상 선택자
     -  :first-child  : 첫번째 자식 요소를 선택
     -  :last-child   : 마지막 자식 요소를 선택
     -  :nth-child(n) : n번째 자식 요소를 선택 (이때, 자식 순서는 0부터 시작)

  ㅇ 앞,뒤 위치를 선택하기 위한 가상 선택자
     -  :after        : 뒤에 위치한 공간을 선택
     -  :before       : 앞에 위치한 공간을 선택

  ㅇ 해당 요소를 제외하는 선택자
     -  :not(요소명)  : 해당 요소명 제외(not)


[웹 디자인] 1. 웹 디자인 2. 스타일 시트 3. CSS 4. CSS 선택자 5. CSS 박스 모델 6. CSS 속성 값 7. CSS 위치 레이아웃 8. CSS 배경 9. CSS 텍스트 꾸미기
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   스크립트 언어
            3.   DOM,BOM
            4.   기능 요소
            5.   웹 디자인
              1.   1. 웹 디자인
                  2. 스타일 시트
                  3. CSS
                  4. CSS 선택자
                  5. CSS 박스 모델
                  6. CSS 속성 값
                  7. CSS 위치 레이아웃
                  8. CSS 배경
                  9. CSS 텍스트 꾸미기
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록(시험중)     참고문헌