본문 바로가기
개발/프론트엔드-HTML,CSS

CSS dinner 게임 답안 및 설명 [1번 ~12번]

by 쑨토리 2023. 1. 10.
반응형

* 태그 이름이라고 생각하면서 문제 풀기!!!!

 

 

/* 태그 선택 */
tag {

}

 

 

 

1. plate 선택하기.

정답 : plate

 

 

 

2. bento boxes 선택하기! 

정답 : bento

 

 

 

3.  id Selector 사용하기.


<plate id="fancy" />를 확인했으면 선택자 중 id 태그 방식인 #Tag name을 입력하면 된다.

정답 : #fancy

 

 

 

 

4. 접시 위에 있는 사과 선택하기

내부 선택자 이용!

내부 선택자, 즉 특정 요소 안에 포함되어 있는 자식 요소를 같이 선택하는 문제입니다.

plate에 포함된 apple 선택한다고 생각하면 된다.

plate 를 먼저 선택한 후, 안쪽에 있는 apple 선택!

 

정답 : plate apple

 

 

 

 

5. fancy 접시위에 있는 오이 선택하기.

 

내부 선택자를 사용하는데 이제 id 속성을 이용해서 풀면 된다.

정답 : #fancy pickle

 

 

6. 작은 사과 고르기

apple 을 선택할 건데, 동시에 작은 apple (class = "small") 을 골라야 한다.

정답 : apple.small
정답 : .small

다른 분의 답안을 참고하니, class선택자는 .classname만 적어주면 된다고 한다.
둘다 가능!

 

 

 

7. 작은 (class = "small")  오렌지를 선택하기

이때는 samll class 에 apple도 같이 포함되어 있기 때문에

정답 : orange.small

 

 

 

8.  도시락 위에 있는 오렌지 중 작은 오렌지를 고르기

정답 : bento orange.small

 

 

 

 

9. 도시락과 접시위의 오이를 선택하기.

 

자식요소 끼리는 띄어쓰기로 선택하고 같은 등급?! 의 요소는 ,쉼표로 select 해준다.

정답 : plate, bento

 

내 오답...

plate pickle, bento pickle

 

 

 

 

10. 전체 선택하기!

 

*

 

 

 

 

11. plate 위의 (포함되는) 어떤 것이든 다(*) 선택

정답 : plate *

 

 

 

 

12.  A 다음에 있는 B를 선택하기. -> plate 다음에 있는 apple 선택하기

 

 

 

정답 : plate + apple