SK networks AI Camp - CSS_Select the plates 정답(17 ~ 32번)

이전 레벨의 문제를 보시려면 아래의 링크를 참고해 주세요.

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

 

Level 17. Select the small apple and the pickle

이번 문제에서는 사과와 피클 두 개를 고르는 문제인데요.

16번처럼 first-child를 쓰면 orange도 포함이 돼요.

그래서 last-child를 써줘야 합니다.

 

정답 :. small:last child 

Level 18. Select the 3rd plate

3번째에 있는 접시를 고르는 문제입니다.

이 문제의 경우 :nth-child(index; 몇 번째)를 사용해 주면 되는데요.

그래서 plate 중에 3번째를 선택해 주면 됩니다.

정답 : plate:nth-child(3)

Level 19. Select the 1st bento

18번 문제와 유사한 문제입니다. 첫 번째 bento를 선택하는 문제인데요.

하지만 옆의 설명을 보면 :nth-last-child(A)를 사용해서 풀 것을 권고하네요.

nth:child(A)와는 다르게 역순으로 헤아려요

정답 : bento:nth-last-child(3)

Level 20. Select first apple

이번에는 첫 번째 apple을 고르는 문제입니다.

:first-of-type을 통해서 첫 번째 사과를 지정해 주면 됩니다.

정답 : apple:first-of-type

Level 21. Select all even plates

이번에는 짝수번째 plates 들을 선택하는 문제입니다.

:nth-of-type(A)를 사용하여 규칙이나 공식을 사용가능해요.

정답 : plate:nth-of-type(even)

Level 22. Select every 2nd plate, starting from 3rd

아까처럼 even(; 짝수) 번째 plate를 선택하는 것이지만 3번째부터 시작하는 문제입니다.

이 문제도 21번과 같이 :nth-of-type(A)을 사용하면 됩니다.

아까 설명해 드렸듯이 규칙이나 공식도 적용이 가능합니다.

그래서 3번째부터 2n을 더해주면 되죠. 

정답 : plate:nth-of-type(2n+3)

Level 23. Select the apple on the middle plate

가운데 플레이트의 사과를 선택하는 문제입니다.

옆의 힌트에서는 :only-of-type을 사용하라고 하네요.

: 앞에 두 개를 적어줍니다. 예를 들어 A B:only-of-type이라고 해준다면

A를 제외한 B를 보여주게 됩니다.

그래서 plate를 제외하고 apple을 선택해 주면 되죠

정답 : plate apple:only-of-type

Level 24. Select the last apple and orange

마지막 orange와 마지막 apple을 선택하는 문제입니다.

이 문제는 :last-of-type을 사용하면 해결할 수 있는데요.

예를 들어 A:last-of-type이라고 한다면 div 안에 마지막 요소를 반환해 주고요

A B:last-of-type이라고 해준다면 모든 A에 있는 마지막 B를 반환해 줘요.

orange와 apple 모두 class가 small로 되어있어요.

그래서. small:last-of-type이라고 해주면 됩니다.

정답 :. small:last-of-type

Level 25. Select the empty bentos

bento가 3개가 있는 상황에서 비어있는 bento만 선택하는 문제입니다.

그래서 :empty라고 해주면 됩니다.

정답 : bento:empty

Level 26. Select the big apples

큰 apples를 고르는 문제입니다.

하지만 차이를 보면 한 개는 plate안에 들어가 있죠.

:not(X)를 통해서 X가 아닌 것들을 선택할 수 있어요.

plate 안에 apple, plate안에 orange, pickle은 small입니다.

그래서 :not(. small)이라고 한다면 small 클래스가 아닌 것을 고르는 것이 됩니다.

그래서 apple 중 small이 아닌 것을 고르는 것이기에 apple:. not(. small)

정답 : apple:not(. small)

Level 27. Select the items for someone

밑에 종이로 누군가에게 포함되어 있는 것만 선택하는 문제입니다.

여기서는 Attribute selector을 사용하면 됩니다.

밑에 묶여있는 것(특정 속성 값을 가진 것)이 for이기 때문에 [for]라고 하면 됩니다.

정답 :[for]

Level 28. Select the plates for someone

27번과 비슷한 문제입니다.

선택된 대상 중에 접시에 있는 것을 선택해 주는 문제입니다.

간단하게 아까처럼 [for] 앞에 plate를 붙여주면 됩니다.

정답 :plate [for]

Level 29. Select Vitaly's meal

이번에는 특정한 인물로 지정되어 있어요. Vitaly의 식사를 고르는 문제입니다.

Attribute Value Selector 문제입니다.

27번 문제와 같이 [for="value"]를 적어주면 됩니다.

정답 :[for="Vitaly"]

Level 30. Select the items for names that start with 'Sa'

29번 문제와 유사한 문제입니다.

하지만 Value값이 확실하게 정해진 것이 아니라 조건이 걸려있습니다.

'Sa'로 이름이 시작하는 것의 아이템을 선택하는 것이죠.

29번은 등호를 사용했지만 ^ (shift +6)을 함께 써주고 조건을 걸어주면 됩니다.

정답 : [for^='Sa']

Level 31. Select the items for names that end with 'ato'

이번에는 마지막이 'ato'인 조건에 해당하는 것만 뽑는 문제입니다.

시작은 ^(shift + 6)과 등호, 끝은 $(shift + 4)와 등호를 써주면 됩니다.

정답 :[for$='ato']

Level 32. Select the meals for names that contain 'obb'

이번에는 이름에 'obb'가 포함되는 조건이 걸려있습니다.

포함되는 조건은 *(shift + 8)과 등호를 써주면 됩니다.

정답 : [for*='obb']

이렇게 32개의 문제를 풀고 나면 아래의 사진이 나옵니다! 모두 CSS 마스터하시길 바랄게요.

[요약]

○ :last-child

○ :nth-child(a) : a자리에 있는 요소 선택

○ :nth-last-child(3) : nth-child(a)의 역순 선택

○ :first-of-type : 첫 번째 선택

○ :nth-of-type(A) : 규칙이나 공식을 사용하여 선택

○ A B:only-of-type : A를 제외한 B를 보여주게 됩니다.

○ A B:last-of-type : 모든 A에 있는 마지막 B를 반환

○ :empty : 비어있는 요소를 선택

○ :not(A) : A가 아닌 것을 선택

○ [(특정 속성 값을 가진 것; Attribute)] : 특정 속성값을 가진 것을 선택

○ [A="Value"] : 특정 속성 값(A) 중 특정한 값(Value)을 가진 것을 선택

○ [A^='Value'] : 특정 속성 값(A) 중 특정한 값(Value)으로 시작하는 것을 선택

○ [A$='Value'] : 특정 속성 값(A) 중 특정한 값(Value)로 끝나는 것을 선택

○ [A*='Value'] : 특정 속성 값(A) 중 특정한 값(Value)를 포함한 것을 선택