SK networks AI Camp - CSS_Select the plates 정답(1 ~ 16번)

다음 문제(17 ~ 32번)

2024.07.22 - [컴퓨터 공학/Networks] - SK networks AI Camp - CSS_Select the plates 정답(17 ~ 32번)

 

Level 1. Select the Plates

plate 두 개를 다 해야하므로 plate라고 적어주면 됩니다.

정답 : plate

Level 2. Select the bento boxes

레벨 1과 동일한 문제로 <bento/> 요소에 해당하는 bento를 입력

정답 : bento

Level 3. Select the fancy plate

id가fancy인 그릇을 선택해야합니다.

id 선택은 #id로 해주면 됩니다.

정답 : #fancy

Level 4. Select the apple on the plate

특정 요소 안에 포함된 자식 요소를 같이 선택하는 문제로 A B 자손결합자로 풀어야 합니다.

하위 요소(plate)와 자식 요소(apple)을 띄워쓰기로 입력해주면 됩니다.

정답: plate apple 

Level 5. Select the pickle on the fancy plate

이번에는 특정 요소 안에 있는 요소를 선택한다는 것이 level4와 같지만

plate가 두개인 문제입니다. 따라서 해당하는 하위 요소 id를 지정해줘야 합니다.

정답 : #Fancy pickle

Level 6. Select the small apples

class 선택자를 사용하는 문제입니다.

클래스의 경우 .classname을 입력해주시면 됩니다.

정답 : .small

Level 7.Select the small apples

small 클래스에 apple이 포함되어있습니다.

하지만 orange만 선택하는 문제입니다.

특정 요소 - 클래스를 만족하는 요소만 선택하고자 하는 경우 Element name.class name을 입력해주세요.

정답 : orange.small

Level 8. Select the small oranges in the bentos

bento안에 있는 작은 오렌지를 선택하는 문제입니다.

bento 안에 orange 중에 class 가 small인 것을 선택하는 것입니다.

정답 : bento orage.small

Level 9. Select all the plates and bentos

1 ~ 8번까지는 하위요소, 자식 요소 선택문제이고

9번 문제의 경우 하위요소와 하위요소의 선택입니다.

하위와 하위 요소의 선택의 경우 쉼표로 구분하여 지정해줍니다.

정답 : plate, bento (순서는 상관 없음)

Level 10. Select all the things

모든 것을 고르는 문제네요.

이 문제의 경우 더 쉽죠. 모두 선택하면 되기에 모두 선택을 하는 *을 입력해주면 됩니다.

정답 : *

Level 11. Select everything on a plate

plate에 있는 모든 것을 선택하는 문제입니다.

이 경우 하위 요소 plate 뒤에 *을 입력해주면 끝납니다.

정답 : plate *

Level 12. Select every apple that's next to a plate

이번 문제의 경우 조금 난이도가 올라갔죠.

plate에 인접한 모든 apple을 고르는 문제입니다.

이 경우 인접 형태 선택자와 관련된 문제입니다.

같은 하위 요소 바로 뒤에 같은 자식 요소를 선택할 경우 사용합니다(무조건 인접해야함)

인접 형태 선택자는 하위요소 + 자식요소를 입력하면 됩니다.

정답 : plate + apple

Level 13. Select the pickles beside the bento

이번에는 인접이 아니라 사이에 있는 것을 선택하는 문제입니다.

bento 사이의 pickle들을 골라야하죠

이 경우 일반 형제 결합자 문제입니다.

일반 형제 결합자는 ~를 통해 선택 가능합니다.

정답 : bento ~ pickle

Level 14. Select the apple directly on a plate

사과가 너무 많네요. 하위요소인 plate의 자식 요소인 apple을 바로 선택하면됩니다.

이것을 자식결합자라고 합니다. 자식 결합자는 (A > B) 형태로 사용합니다.

따라서 plate > apple을 사용해주면 해결됩니다.

정답 : plate > apple

Level 15. Select the top orange

이번에는 좀 어렵네요.

젤 위에 있는 오렌지만을 골라야하는 문제입니다.

orange 중에서 제일 첫번째 자식요소인 orange를 골라야합니다.

자식요소:first-child 라고 입력해주면 가능합니다.

정답 :orage:first-child

Level16. Select the apple and the pickle on the plate

문제 자체는 어렵지 않습니다.

하위 요소 plate 중에서 요소가 하나만 있는 것들을 고르는 문제인데요.

15번 문제와 유사하게 :only-child라고 입력해주면되요.

하지만 주의할 점은 태그 : only-child로 띄어쓰기를 해줘야해요.

정답 : plate :only-child

32번까지 있으니까 16번까지 포스팅하고

17번부터는 따로 포스팅할게요.

2024.07.22 - [컴퓨터 공학/Networks] - SK networks AI Camp - CSS_Select the plates 정답(17 ~ 32번)