CSS Selector   CSS 선택자

(2017-08-01)

CSS 셀렉터

통신/네트워킹통신이론
선로/전송
통신망 일반
회선교환(PSTN)
무선/이동통신
광통신
인터넷/데이터통신
 > 인터넷/데이터통신 1. 데이터통신망
2. 인터넷
3. 데이터 네트워크 설계

데이터 단위
프로토콜/계층
데이터 링크
TCP/IP
라우팅
인터넷 QoS
인터넷 관리
인터넷 응용
인터넷 기타
패킷교환(PSN)
인터넷 관련 기관
 > 인터넷 응용NetBIOS
DNS
가상단말
FTP
전자메일
VoIP
웹기술
VPN
무선인터넷
전자상거래
개인 컨텐츠
인터넷 기타 응용
 > 웹기술 1. 웹 이란?
2. 하이퍼텍스트

웹 구성
HTTP
웹 페이지
웹 식별
웹 서비스
차세대 웹
웹기술 기타일반
 > 웹 페이지마크업 언어
스크립트 언어
DOM,BOM
웹페이지 기능 요소
웹 디자인
 > 웹 디자인 1. 웹 디자인
2. 스타일 시트
3. CSS
4. CSS 선택자
5. CSS 속성 값

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


2.  CSS 선택자 종류

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

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

  ㅇ descendant selector
     -  특정 요소 하위에 나오는 요소를 지정할 때 사용             (특정요소명 하위요소명)

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

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


3. [CSS 선택자 기타]  가상 선택자 (pseudo-class selector)

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

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

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

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

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

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


[ 웹 디자인 ]1. 웹 디자인  2. 스타일 시트  3. CSS  4. CSS 선택자  5. CSS 속성 값  

 
        최근수정     모바일웹     참고문헌