인터넷 프로그래밍 #8-1 CSS3 - 다양한 선택자

인터넷 프로그래밍
8-1 CSS3 - 다양한 선택자

 

단원 목표

1.연결선택자의 개념을 설명하고, 그 예 나열해보기
2.속성선택자의 개념을 설명하고, 그 예 나열해보기
3.가상클래스 선택자의 개념을 설명하고, 그 예를 나열하기
4.가상요소 선택자의 개념을 설명하고, 그 예 나열해보기

 

단순선택자
-이름, ID, 클래스를 기반으로 한 선택자


연결선택자(Combinator Selectors)
-특정관계에 따른 선택자
-자손선택자 Descendant Selector (공백): element element
ex) div p -div 밑의 모든 p요소를 선택
-자식선택자 Child Selecrtor (>) : element > element
ex) div > p -div의 자녀들인 p요소를 선택
-인접한 형제 선택자 Adjacent Sibling Selector (+): element + element
ex) div + p - div밑의 바로 아래 p요소를 선택
- (일반)형제 선택자 General Sibling Selector (~) : element1~ element2
ex) p ~ ul - p와 같은 레벨의 모든 ul 요소를 선택


속성선택자(Attribute Selectors)
-속성 또는 속성 값을 기반으로 한 선택자
[atttibute] - 타겟 속성을 가진 모든 요소들 ex) [target]
[atttibute=value] -타겟이 "_blank" 인 모든 요소들 ex) [target="_blank"]
[atttibute~=value] -타이틀이 "flower" 인 모든 요소들 ex) [title="flower"]
[atttibute|=value] -lang 속성 중 "en"로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택 ex) [lang|="en"]
[atttibute^=value] -href 속성 중 "https"로 시작하는 모든 <a> 요소들 ex) a[href^="https"]
[atttibute$=value] -href 속성 중 ".pdf"로 시작하는 모든 <a> 요소들 ex) a[href$=".pdf"]
[atttibute*=value] -href 속성 중 "w3schools"을 포함하는 모든 요소들 ex) a[href*="w3schools"]

 

 

가상클래스 선택자(Pseudo Class Selectors)
-가상 클래스 : 요소의 특별한 상태를 정의하는데 사용
-특정 요소에 마우스를 올려 놓았을 때, 방문했던 링크와 아닌 링크 구분할 때, 포커스 받는 요소 정의할 때
-특성 상태를 기반으로 한 선택자
ex) selector:pseudo-class{property:value;}
-대표적인 가상 클래스 선택자 : link, disabled, hover, active, focus, target, enabled, nth-of-type(n), nth-child(n), last-child, first-child 
visited : 방문했던 링크에 스타일 적용
target : 앵커 대상(ID="news") 에 스타일 적용
enabled : 해당요소(input)가 사용할 수 있는 상태일때
checked : 선택한 항목(input)의 스타일 적용
nth-child(n), last-child, first-child : n번째, 마지막, 첫번째에 스타일 적용

 

 

가상요소 선택자(Pseudo Element Selectors)
-요소의 일부를 사용하는 선택자

-가상요소 : 요소의 지정된 부분에 스타일을 지정함
-첫 글자, 줄, 요소 등에 스타일을 지정할 때
-요소의 앞이나 뒤에 콘텐츠를 추가할 때
ex) selector::pseudo-element{
property:value;}
-대표적인 가상 클래스 선택자 : before, after, marker, first-line, first-letter, selection
*콜론 두 개가 표준형이지만, 한 개만 줘도 된다.
marker 목록(lists에서 마커를 선택, *콜론 2개를 사용해야함, 
first-line: 요소의 첫번째 줄을 선택
first-letter: 요소의 첫번째 글자를 선택
selection: 선택된 부분 스타일 변경

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

연결선택자-특정관계에 따른 선택자
속성선택자 - 속성또는 속성같은 기반으로 한 선택자
가상클래스 선택자 - 특정 상태를 기반으로 한 선택자
가상요소 선택자 - 요소의 일부를 사용하는 선택자