CSS Selector   CSS 선택자

(2019-07-11)

선택자, CSS 셀렉터, 가상 선택자, a:link, a:hover, a:visited, a:active, :first-letter, :focus, :first-child, :last-child, :nth-child(n), :after, :before

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

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       : 지정 요소 내 맨앞에 위치한 공간에 삽입
     * 例) p:before { content:"p 요소 앞에 삽입될 문자들"; ... }

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


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형
  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.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
                  1. 웹 디자인
                  2. 스타일 시트
              1.   CSS
                1.   1. CSS
                    2. CSS 선택자
                    3. CSS 속성
                    4. CSS 속성값
                    5. CSS 박스 모델
                    6. block,inline 요소 유형
                    7. CSS 색상
                    8. CSS 배경
                    9. CSS 위치
                    10. CSS 정렬
                    11. CSS 텍스트
                    12. CSS 폰트
                    13. CSS 리스트
                    14. CSS @ 규칙
                    15. CSS 그림자
                    16. CSS 시간 변형
                    17. CSS 2차원 변형
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌