CSS diner 정답 및 풀이 복습

* 주의 : plates나 apple 등 단어에 흔들리지 말고 이것이 태그 이름이라고 생각해야 한다.. 그림을 보는 것보다 그냥 html 소스만 보는 게 머리에 더 잘 들어올 수도 있다.

 

Level 1 Select the plates

가장 기본적인 선택자의 형태이다.

이전 글의 선택자 중 Type tag에 해당하므로 <plate />의 요소인 plate를 입력하면 된다.

정답 : plate

 

level 2 Select the benti boxes

level 1과 다를 게 없는 문제다.

<bento />에 요소에 해당되는 bento를 입력.

정답 : bento

 

level 3 Select the fancy plate

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

정답 : #fancy

 

level 4 Select the plates

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

하위 요소인(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 선택자를 사용하는 문제이다.

class 선택자는 .classname 을 입력하면 된다.

정답 : .small

 

 

level 7 Select the small oranges

small 클래스에 apple이 포함되어 있지만 우리는 orange만 선택해야 한다.

특정 요소 - 클래스를 만족하는 요소만 선택하고 싶을 경우 Element name.class name을 입력하면 된다.

정답 : orange.small

 

 

level8 Select the small oranges in the bentos

위에서 학습한 내용들의 복습이다.

<bento>라는 하위 요소 안에 속해 있는 자식 요소인 <orange /> 중 <orange class="small" />만을 선택하면 된다.

순서는 하위 요소 자식 요소.Classname

정답 : bento orange.small

 

 

level 9 Select all the plates and bentos

지금까지는 하위 요소, 자식 요소의 선택이고 이번 문제는 하위 요소와 하위 요소의 선택이다.

하위 <-> 자식 요소는 띄어쓰기로 함께 선택할 수 있었지만 하위 <-> 하위 요소는 중간에 쉼표를 넣어서 지정한다.

정답 : 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

 

 

level 13 Select the pickles beside the bento

특정 하위 요소의 해당되는 모든 자식 요소를 선택하는 선택자를 "일반 형제 선택자"라고 부릅니다.

일반 형제 선택자는 하위 요소 ~ 자식 요소를 입력하면 됩니다.

정답 : bento ~ pickle

 

 

level 14 Select the apple directly on a plate

그림을 보면 혼란스럽지만 html 소스를 확인해보면 별 거 없다.

그냥 하위 요소인 plate의 자식 요소인 apple을 바로 선택하면 된다.

하위 요소>자식 요소를 입력하면 바로 해당 요소를 선택할 수 있다.

정답 : plate>apple

 

 

level 15 Select the top orange

그림을 보면 헷갈리기 때문에 마우스 커서를 해당 소스에 올려놓고 캡쳐했다.

자식 요소인 orange 중 첫 번째 자식 요소인 orange를 선택하는 문제.(해당 문제에서는 plate 하위 요소에만 속해있으나 여러 하위 요소가 있을 경우 다른 하위 요소에서도 첫 번째 자식 요소에 orange가 있다면 선택된다.)

자식요소:first-child를 입력하면 된다.

(참고 : 자식요소:nth-child(1)과 의미는 동일하며 해당 코드를 입력해도 정답으로 인정된다.)

정답 : orange:first-child (혹은 orange:nth-child(1))

 

 

level 16 Select the apple and the pickle on the plates

날 정말 끔찍하게 힘들게 만든 문제다.

문제 자체는 크게 복잡할 것이 없다.

하위요소 plate 중 자식 요소가 하나 밖에 없는 plate의 자식 요소만 선택하는 :only-child선택자를 사용하면 된다.

문제는 선택자 사용시 p:only-child라고 작성하게 되면 "only child인 p를 모두 선언한다"가 되어버린다.

ex> orange:only-child 자식 요소인 orange 중 독자인 orange를 모두 선언하게 된다.

반드시 p :only-child라고 띄어쓰기를 해줘야 "하위 요소인 p에 속한 독자를 선언한다"는 의미가 되니 주의해야 한다.

정답 : plate :only-child

 

정말 싫다 :only-child

 

level 17 Select the small apple and the pickle

그림을 보면 오히려 헷갈리는 문제.

.small 클래스의 orange가 first child이기 때문에

.small 클래스의 last child를 적용시켜 선택해야 한다.

선택자 사용법은 first child와 같다.

정답 : :last-child.small

 

 

 

level 18 Select the 3rd plate

위에서 이야기 했던 :nth-child()를 사용하면 쉽게 풀 수 있다.

plate 중 3번째 자식인 plate를 선택한다.

정답 : plate:nth-child(3)

 

 

level 19 Select the 1st bento

위의 문제와 똑같이 풀어도 되지만 level 19는 :nth-last-child()선택자를 사용할 것을 권하고 있다.

해당 선택자는 :nth-child()와 다르게 마지막 자식으로부터 카운팅한다.

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

 

 

level 20 Select first apple

level 20에서는 :first-of-type에 대해 다룬다.

만약 :first-child 선택자를 사용하려고 한다면 orange가 첫번째 자식이기 때문에 불가능하고 :nth-child(2) 선택자를 사용해야 한다.

하지만 :first-of-type은 지정한 요소만 카운팅하기 때문에 모든 요소 중 첫번째 자식이 오렌지여도 apple 중에서 첫번째 자식을 선택한다.

정답 : apple:first-of-type

 

 

level 21 Select all even plates

:nth-of-type()에는 순서 뿐 아니라 공식이나 규칙도 작성 가능하다.

짝수에 해당하는 요소를 선택할 경우 even을 기입하면 된다.

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

 

 

level 22 Select every 2nd plate, starting from the 3rd

3번째부터 출발해서 2번째 접시마다 선택하라.는 제목이 힌트인데 난 이게 이해가 잘 안된다.. 어렵다..

p:nth-of-type(2n+2)라고 쓴다면 2번째 p부터 출발해서 2번마다 선택하는 것이라고 한다.

잘 모르겠으면 외워야지 ^^..

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

 

 

level 23 Select the apple on the middle plate

여러 선택자를 활용할 수 있겠지만 level 23에서 가르치고자 하는 선택자는 p:only-of-type이다.

해당 요소 단 한 가지만 존재해야 선택된다.

정답 : apple:only-of-type

 

 

level 24 Select the last apple and orange

각 요소 중 마지막 요소를 선택하는데 사용되는 선택자가 필요하다.

"각 요소 중"이라고 하면 -of-type가 사용된다는 사실은 이제 알고 있다.

"마지막" 요소니까 :last-of-type를 사용하면 된다.

어? 근데 피클이 거슬린다.

html 소스를 보니 orange, apple에는 "small" class가 지정되어 있다.

정답 : :type-of-last.small

 

 

 

level 25 Select the empty bento

자식 요소가 없는 비어있는 요소만 선택할 수 있는 선택자는 :empty이다.

정답 : bento:empty

 

 

 

level 26 Select the big apples

3가지 apple중 class=small이 지정되어 있지 않은 apple만 선택하고 싶다.

p:not(조건)을 입력하면 가능하다.

정답 : apple:not(.small)

 

 

 

level 27 Select the items for someone

특정 속성 값을 가진 요소들을 선택하는 방법에 대한 문제이다

[attribute]를 입력하면 해결.

참고로 for는 별다른 건 아니고 해당 요소에 설명을 달아주는 역할이다.

정답 : [for]

 

 

level 28 Select the plates for someone

속성을 가지고 있는 특정 요소만 선택하는 선택자.

요소[속성]을 입력하면 된다.

정답 : plate[for]

 

 

level 29 Select Vitaly's meal

속성 값을 지정하여 선택하는 방법은 [attribute=value]

대소문자만 똑바로 구별하면 어려울 건 없다.

정답 : [for=Vitaly]

 

 

 

 

level 30 Select the items for names that start with 'Sa'

Sa로 시작하는 값을 가진 attribute를 선택해야 한다.

[attribute^=value]를 지정해주면 된다.

정답 : [for^=Sa]

 

 

 

level 31 Select the items for names that end with 'ato'

'ato'로 끝나는 값을 가진 속성을 선택해야 한다.

[attribute$=value]로 선택할 수 있다.

정답 : [for$=value]\

 

 

level 32 Select the meals for names that contain 'obb'

드디어 마지막 문제.. 속성값 중간에 obb가 있는 요소를 선택하려고 한다.

[attribute*=value]로 지정하면 된다.

정답 : [for*=obb]

 

 

 

 

정말 징글징글하게 많다..

근데 이건 빙산의 일각이다..🥲