2024-07-24 :: 003 선택자

속성 선택자

[속성]	해당 속성이 정의된 모든 태그를 값에 상관 없이 선택함
[속성=값]	정의된 속성과 값이 동일한 태그를 선택함
[속성~=값]	공백으로 구분된 속성값 리스트 중 하나가 주어진 값과 동일한 태그를 선택
[속성|=값]	해당 값과 동일하거나, 주어진 값으로 시작하되 하이픈(-) 기호로 이어지는 값을 가진 태그를 선택
[속성^=값]	속성값이 주어진 값으로 시작하는 태그를 선택
[속성$=값]	속성값이 주어진 값으로 끝나는 태그를 선택
[속성*=값]	속성값에 주어진 값을 부분 문자열로 가지고 있는 태그를 선택

 

---

 

 

이벤트 가상 선택자

: link {}	웹 문서에서 사용자가 방문하지 않았던 링크를 표시함
: visited {}	웹 문서에서 사용자가 방문한 링크를 표시함
: active {}	웹 문서에서 사용자가 링크를 클릭하는 순간을 표시함
: hover {}	웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 표시함
: focus {}	해당 요소에 초점이 맞춰졌을 때 적용

 

구조적 가상 선택자

: root	문서의 최상위 태그(html)를 선택함
: nth-child(n)	앞에서부터 지정된 순서와 일치하는 태그를 선택함 (선택하고자 하는 태그를 제외한 다른 태그도 순서에 포함되며 n은 수열을 나타냄)
: nth-last-child(n)	뒤에서부터 지정된 순서와 일치하는 태그를 선택함 (선택하고자 하는 태그를 제외한 다른 태그도 순서에 포함되며 n은 수열을 나타냄)
: nth-of-type(n)	앞에서부터 지정된 순서와 일치하는 태그를 선택함 (선택하고자 하는 태그만 순서에 포함되며 n은 수열을 나타냄)
: nth-last-of-type(n)	뒤에서부터 지정된 순서와 일치하는 태그를 선택함 (선택하고자 하는 태그만 순서에 포함되며 n은 수열을 나타냄)
: first-child	지정된 태그가 첫 번째면 선택함 (선택하고자 하는 태그를 제외한 다른 태그도 순서에 포함)
: last-child	지정된 태그가 마지막이라면 선택함 (선택하고자 하는 태그를 제외한 다른 태그도 순서에 포함)
: first-of-type	지정된 태그 중 첫 번째 태그를 선택함 (선택하고자 하는 태그만 순서에 포함)
: last-of-type	지정된 태그 중 마지막 태그를 선택함 (선택하고자 하는 태그만 순서에 포함)
: only-child	지정된 태그가 유일한 자식이면 선택함 (다른 태그가 포함되어 있다면 선택하지 않음)
: only-of-type	지정된 태그가 유일한 타입이면 선택함 (다른 태그가 포함되어 있어도 해당 태그가 유일하면 선택함)
: empty	텍스트 및 공백을 포함하여 자식 요소가 없는 태그를 선택함

 

기타 가상 선택자

언어 선택자	: lang(ko)	HTML lang 속성값이 'ko'로 지정된 태그를 선택함
부정 선택자	: not(x)	x가 아닌 태그를 선택함
목적 선택자	: target	태그의 URL이 요청되면 선택함
가상 엘리먼트 선택자	:: first-line	태그의 첫 번째 라인을 선택함
	:: first-letter	태그의 첫 번째 문자를 선택함
	:: before	태그의 시작 지점에 생성된 태그를 선택함
	:: after	태그의 끝 지점에 생성된 태그를 선택함

 

조합 선택자

※ 기존의 여러 선택자를 '복합적' 으로 조합하는 방법

후손 선택자	선택자A  선택자B	선택자B가 선택자 A에 반드시 포함되어 있을 경우에 선택함
자손 선택자	선택자A > 선택자B	부모 선택자A의 직계 자손인 선택자B를 선택함
인접 형제 선택자	선택자A + 선택자B	선택자A 바로 다음에 위치한 선택자 B를 선택함
일반 형제 선택자	선택자A ~ 선택자B	선택자A 뒤에 인접하여 나타나는 모든 선택자 B를 선택함
그룹 선택자	선택자A, 선택자B	선택자A와 선택자B를 모두 선택함

 

선택자 연습용 미니게임 바로가기(CSS Diner) ▶ https://flukeout.github.io/

   선택자 관련 내용의 공부는 CSS Diner 게임으로 복습하는게 괜찮았던 것 같다.

   아래는 오답노트 겸 전 레벨 정답을 적어두도록 하겠다.

---

 

Level1   plate

• 쉽다, <plate> 태그를 선택하는 문제.

Level2   bento

• 접시와 도시락이 나란히 있다, 여기서 도시락을 고르는 문제. 1레벨과 동일하다.

Level3   #fancy

• 접시 두개 중 장식이 된 접시를 고르는 문제. 장식된 접시는 fancy라는 ID값을 가지고 있으니 #으로 해당 ID값을 입력하면 된다.

Level4   plate apple

• 반드시 접시 위에 있는 사과만 선택해야 하기 때문에 후손 선택자를 이용하면 된다.

Level5   plate#fancy pickle 또는 #fancy pickle

• 반드시 꾸며진 접시 위에 있는 피클을 선택해야 하기 때문에 후손 선택자를 이용하면 되는데 '꾸며진 접시' 값을 입력해도 되고, 해당 ID는 고유의 값이기 때문에 '꾸며진' 값만 주어도 문제 없다.

Level6 .small

• 클래스 값을 입력하는 문제, 사과들 중에서도 '작은' 클래스를 가진 사과만 선택하면 되기 때문에 .을 찍고 선택하고자 하는 클래스 명을 입력하면 된다.

Level7 orange.small

• 오렌지들 중에서도 작은 오렌지만 골라야 하는 문제, <orange> 태그와 함께 해당 클래스 명도 공백없이 입력해주면 small 클래스 값을 가진 오렌지만 선택할 수 있다.

Level8 bento orange.small

• 도시락 위에 있는 오렌지들 중에서도 작은 클래스를 가진 오렌지를 고르는 문제, 후손 선택자를 이용하면 간단하다.

Level9 plate, bento

• <plate>와 <bento>만 선택하면 된다. 그룹 선택자를 통해 해결하자.

Level10 *

• 모든 오브젝트가 흔들거리고 있다, *을 써서 모두 선택하면 된다.

Level11 plate *

• 큰 사과, 작은 오렌지, 그리고 피클이 선택해달라 시위하고 있다. 공통점을 찾아 보자면 모두 접시 위에 있으므로 부모인 접시 위에 있는 모든 채소를 선택하면 되겠다. 다만 종류가 다양하니 후손 선택자로 공백에 유의하며 모든 객체 선택인 *을 써주면 된다.

Level12 plate+apple

• 같은 형제인 값이 다른 사과 둘의 공통점을 보아하니 모두 접시 옆에 위치해 있다. 인접 형제 선택자로 옆의 사과만 골라내면 된다.

Level13 bento~pickle

• 많은 피클 중에서 도시락 옆에 위치한 피클 두 개만 골라내야 한다. 해당 태그는 어디에 속한 태그가 아닌 도시락과 같은 형제이니 일반 형제 선택자를 사용하면 된다. 그 뒤로 나열된 피클들은 모두 접시라는 부모를 가지고 있기 때문에 같은 형제가 아니라서 선택되지 않는다.

Level14 plate>apple

• 접시 위에 있는 사과가 한 개 뿐이라고 일반적인 후손 선택자를 쓰면 왼쪽에 위치한 사과도 함께 흔들리게 된다. 후손 선택자는 말 그대로 자손의 후손도 포함되기 때문에 여기서 쓸 수 없고, 자손 선택자를 써서 골라줘야 한다.

Level15 orange:first-child

• 오렌지 세 개가 접시에 나란히 올라 있는데 그 중에서 첫 번째를 골라야 한다. first-child 선택자를 쓰면 되지만 이 방법은 만약 다른 접시에도 오렌지가 있다면 그 아이도 함께 선택되니 유의하자.

Level16 plate *:only-child

• 접시 위에 외동인 사과와 피클이 있다. 하지만 옆 집에 사는 도시락에도 피클이 외동으로 있으니 단순 그룹 선택자로 하나하나 지정하는 방법은 안되고, 후손 선택자를 사용해 포괄적으로 지정하면 된다. 접시 위에 있는 후손이 외동일 경우에 선택해달라는 의미이다.