CSS의 선택자 연습 게임, 정답 공개

1. CSS Diner 게임을 따라 하다 보면, 선택자 공부가 자동으로 됩니다.

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

CSS Diner

 

 

2. 선택자 공부에 좋은 사이트

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

속성 선택자 - Web 개발 학습하기 | MDN

하위요소 선택자, 자식요소 선택자, 인접 형제 선택자, 형제 요소 선택자.

 

 

3. 정답 공개 

< 1단계>

제목이 "접시를 선택하세요!" 라고 되어있죠? 접시만 우쭐우쭐 움직입니다.

plate

 

 

<2단계>

도시락 박스를 선택하라고 되어있죠? 실제 도시락만 귀엽게 움직입니다.

bento

 

 

<3단계>

ID 선택 ID가 있는 요소 선택 #ID

 

#fancy

 

 

<4단계>

하위 항목 선택 다른 요소 내의 요소 선택 A B

plate apple

 

 

<5단계>

ID요소의 하위 항목 선택다른 요소 내의 요소 선택  #A B

#fancy pickle

 

 

<6단계>

class이름이  small인 것을 찾으라네요. .classname 입니다.

.small

 

 

<7단계>

오렌지 태그 안에 class 이름이 small인 것을 찾으라는 거죠.

orange.small

 

 

<8단계>

도시락 위에 있는 오렌지 중 class이름이 small인 것을 찾으래요.

bento orange.small

 

 

<9단계>

접시와 도시락을  같이 선택하라면 ,(콤마)를 쓰면 됩니다.

plate,bento

 

 

<10단계>

모두 선택하라네요.  별표(*) 알죠?

*

 

 

<11단계>

접시 위에 있는 모든 것을 선택하라면

plate *

 

 

<12단계>

인접 형제 선택자 다른 요소 바로 뒤에 오는 요소 선택 A + B

본인과 첫번째 인접한 형제를 모두 선택하는 겁니다. 

plate + apple

 

 

<13단계>

형제요소 선택자(~)라고 도시락 뒤에 오는 피클을 선택하는 겁니다.

bento~pickle

 

 

<14단계>

자식요소 선택자 ( > )에 대한 부분이죠. 접시 아래 사과를 선택합니다

plate > apple

 

 

<15단계>

의사클래스에 대한 내용입니다.

orange:first

 

 

<16단계>

의사클래스 중. 하나의 자식=외동만 선택하는 방법 ( :only-child )

plate > :only-child

 

 

<17단계>

class = small인 것 중에 마지막 아이들을 선택하면 됩니다.

.small:last-child

 

 

<18단계>

n번째 자식 선택자. nth-child(n)을 기억하자

plate:nth-child(3)

 

 

<19번째>

:first-of-type 의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.

apple:first-of-type