CSS 선택자(Selector) 게임으로 재미있게 배워보기 | 전체문제 풀이

CSS 학습 사이트 소개

오늘은 CSS Diner사이트의 문제들을 풀어보겠습니다. 이 사이트는 CSS 선택자(Selector)에 대한 문법을 공부해 볼 수 있습니다. CSS라는 게 내용이 많지는 않은 거 같으면서도 막상 코딩을 하면서 Selector의 개념이 부족해서 검색을 통해 답답한 부분을 해결하는데 시간을 많이 소모하기도 합니다.

 

CSS Diner사이트는 여러가지의 HTML 요소(Element)중에서 셀렉터(Selector) 문법을 통하여 일부 문제에서 해당하는 요소를 선택하면 됩니다.

단순해 보이면서도 겹쳐져있는 요소들이 있거나 헷갈리는 요소들이 있기때문에 직접 문제를 풀어보면서 Selector에 대해 이해하고 실력을 향상할 수 있습니다.

 

CSS Diner사이트(링크)에 접속하게되면 좌측에는 CSS코드를 입력하는 부분과 오른쪽에는 HTML의 코드가 나오게 됩니다. 테이블에 접시가 있는데 마우스로 가져다 대면 마우스가 가리키는 요소들의 이름을 확인할 수 있습니다.

문제에서 요구되는 요소를 CSS Selector로 선택하면 되며 문제에 선택해야하는 요소는 테이블 위에서 애니메이션으로 움직입니다.

 

 

문제 1 - Select the plates

정답

plate

 

문제에서 plate를 선택하라고 합니다. 접시에 마우스를 가져다 대면 <plate></plate>태그를 확인할 수 있습니다. CSS에서 해당 태그를 선택하려면 태그의 이름을 입력하면 선택할 수 있습니다.

 

 

문제 2 - Select the plates

정답

bento

 

문제에서 bento를 선택하라고 합니다. 도시락에 마우스를 가져다 대면 <bento></bento>태그를 확인할 수 있습니다. CSS에서 중복된 요소가 여러 개가 있지 않고 해당 태그를 선택하려면 태그의 이름을 입력하면 선택할 수 있습니다.

 

 

문제 3 - Select the fancy plate

정답

#fancy

 

이번엔 fancy plate요소를 선택하라고 하는데 마우스 커서를 가져다 대면 plate의 id가 fancy인 게 있습니다.

id를 선택할때는 # 과 이름을 붙여주면 됩니다.

 

 

문제 4 - Select the apple on the plate

정답

plate apple

 

이번문제에서는 plate안에 담긴 apple을 선택하라고 나오는데 이번문제의 html코드를 보면 plate태그 안에 apple태그가 있습니다. 때문에 plate 아래에 apple을 선택할 때에는 태그사이에 띄어쓰기를 입력하여 하위 영역을 지정할 수 있습니다.

 

 

문제 5 - Select the pickle on the fancy plate

정답

#fancy pickle

이전문제와 비슷한데 태그에서 id값으로 변경되었습니다. fancy라는 이름의 id를 가진 plate태그 아래에 pickle을 선택해야 하는 상황에서 id값은 이름 앞에 #을 붙여서 입력하면 되고 하위 영역은 띄어쓰기를 하여 선택해 주면 됩니다.

 

 

문제 6 - Select the small apples

정답

.small

이번에는 class라는 요소가 등장하는데 문제에서는 small apples를 선택하라고 하였습니다.  작은 사과의 class값이 small입니다. class를 선택할 때는 이름 앞에. 을 입력하면 됩니다.

 

 

문제 7 - Select the small oranges

정답

orange.small

small이라는 클래스명을 갖는 orange를 선택해야 하는데 apple에도 같은 small이라는 클래스명을 갖고 있습니다.

이럴 때는 element를 선택한 다음 클래스 이름을 입력하면 됩니다. 요소 바로뒤에 클래스명을 지정할 때는 중간 띄어쓰기가 필요 없습니다.

 

 

문제 8 - Select the small oranges in the bentos

정답

bento orange.small

bento 요소 안에 있는 class명이 small인 oranges를 선택해야 하는데  bneto요소 안에는 class명이 small인 게 여러 개가 있습니다. 그래서 클래스명을 입력하기 전 어떤 태그의 클래스명인지를 지정합니다.

 

 

문제 9 - Select all the plates and bentos

정답

plate,bento

9번 문제에서 처음으로 두 가지의 요소를 선택하라는 문제가 나왔습니다. 2개 이상을 한 번에 선택할 때는 그룹 선택자를 이용하여 , 를 넣어 구분해 줍니다.

 

 

문제 10 - Select all the things!

정답

*

요소들 전체를 선택하라고 합니다. 이럴 때는 * 연산자를 사용하여 전체 요소들을 선택할 수 있습니다.  

 

 

문제 11 - Select everything on a plate

정답

plate *

앞서 풀어본 10번 문제의 응용버전입니다. plate 안에 있는 요소들을 전부선택하려면 plate를 입력한 뒤 "*" 연산자를 입력하면 전체 선택할 수 있습니다.

 

 

문제 12 - Select every apple that's next to a plate

정답

plate + apple

이번문제에서 또 새로운 개념이 등장합니다. plate 요소뒤에 나오는 apple들을 선택해야 합니다.

plate + apple이라고 입력하면 plate 다음에 나오는 apple이라는 요소들이 선택되게 됩니다.

 

 

문제 13 - Select the pickles beside the bento

정답

bento ~ pickle

방금 전에는 "+"를 사용하여 다음에 해당하는 요소를 선택해 주었다면 이번에는 "~"를 사용하여 조건에 해당하는 요소들 이 후에 오는 요소들을 선택할 수 있습니다. 즉 bento 이후에 나오는 pickle에 대해 모두 선택합니다. 다만 bento ~ pickle이라고 해서 bento요소까지 포함하지는 않고 bento 다음으로 오는 pickle들만 선택합니다. 

 

 

문제 14 - Select the apple directly on a plate

정답

plate>apple

이번에는 ">" 연산자가 등장하였습니다.   ">" 연산자는 plate요소의 직접적인 자식 apple 요소들만 선택하게 됩니다.

html의 코드 부분을 보면 첫 번째 plate가 등장하는 요소의 바로 다음 자식 요소가 bento이기에 건너뛰고 두 번째 plate에서 바로 자식 요소가 apple이므로 두 번째의 plate가 선택됩니다. 즉 부모>자식 관계를 나타냅니다.

 

 

문제 15 - Select the top orange

정답

plate orange:first-child

목록태그나 중복되는 요소가 여러 개일 때 첫 번째 항목을 선택해야 할 때는 :first-child를 사용하면 됩니다.

plate요소 안 orange에서 첫 번째 항목을 가져오게 됩니다.

 

 

문제 16 - Select the apple and the pickle on the plates

정답

plate :only-child

only-child는 plate요소내부에 유일한 자식 요소를 선택하게 됩니다. 

첫 번째 plate 안에는 apple이 유일한 자식요소이기 때문에 선택됩니다.

두 번째 plate 안에는 pickle이 유일한 자식요소이기 때문에 선택됩니다.

세 번째 plate 안에는 두 개의 orange가 자식요소로 있기 때문에 조건에 해당하지 않아 선택되지 않습니다.

 

여기서 중요할 건 plate가 클래스이름이 아니라 그냥 태그이기 때문에 :only-child 사이에 공백을 두어 입력해야 합니다.

 

 

문제 17 - Select the small apple and the pickle

정답

.small:last-child

last-child는 가장 마지막 자식 요소를 선택합니다.

.small 이라는 클래스이름을 가진 요소의 가장 마지막자식 apple class="small" 과 pickle class="small"이 선택됩니다.

orange class="small"은 가장 마지막 자식요소가 아닌 밑에 orange라는 자식요소가 하나 더 있기 때문에 선택되지 않습니다.

 

 

문제 18 - Select the 3rd plate

정답

:nth-child(3)

여러 항목들 중 first나 last 요소가 아닌 2번째나 3번째 8번째의 요소들을 선택하려면 :nth-child를 사용하면 됩니다.

:nth-child(3)를 입력하면 3번째의 요소가 선택됩니다.

 

 

문제 19 - Select the 1st bento

정답

bento:nth-last-child(3)

18번 문제의 :nth-child 선택자와 유사하지만 last를 붙여서 뒤에서부터 순서를 셉니다.

맨 아래의 <bento /> 부터 위로 3번째로 올라가면 또 전체 코드에서 3번 라인에 나오는 <bento />를 선택하게 됩니다. 

 

 

문제 20 - Select first apple

정답

apple:first-of-type

:first-of-type 선택자는 주어진 부모 내에서 해당 타입의 첫 번째 요소를 선택합니다.

apple:first-of-type 선택자를 사용하면 <div class="table>내에서 첫 번째로 나타나는 apple 요소를 선택합니다. 

 

 

여기서 :first-child와 :first-of-type이 헷갈릴 수 있는데 정리하면

• 타입:first-of-type 선택자는 부모 요소 내에서 해당 타입의 첫 번째 요소를 선택합니다.
• :first-child 선택자는 부모 요소의 첫 번째 자식 요소가 특정 조건을 만족할 때만 그 요소를 선택합니다

위 html코드에서 apple:first-child를 하게 되면 첫 번째 자식 요소에 해당하는 orange class="small"이 선택됩니다.

first-of-type과는 다르게 따로 타입이 정해진 게 아닌 단순히 첫 번째 자식을 선택하기 때문입니다.

 

 

문제 21 - Select all even plates

정답

plate:nth-of-type(even)

:nth-of-type() 에는 순서를 나타내는 정수를 입력할 수도 있지만 integer나 even이나 odd와 같이 패턴을 나타내는 값도 입력할수 있습니다. 여기에서는 짝수에 해당하는 plate를 선택해야 하기 때문에 even을 입력합니다.

 

 

문제 22 - Select every 2nd plate, starting from the 3rd

정답

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

:nth-of-type()선택자에는 패턴을 나타내는 값도 입력할 수 있다고 하였는데 여기서 2n+3을 해석해 보면

 

2n에서 n만 따로 보면 0부터 시작하는 정수(0,1,2,3,4...)입니다.

2n에서 2만 따로보면 n의 값이 1씩 증가할 때마다 결괏값에 2의 값을 더합니다.

+3은 n의 결과에 처음에만 시작점을 만들어줍니다.

 

즉 n=0 일 때 결과의 시작점 3, n=1일 때 2n의 2를 더해서  5, n=2일 때 2n의 2를 더해서 7, 이렇게 순서대로 계산됩니다.

따라서 plate:nth-of-type(2n+3)는 plate 요소 중 3,5,7... 요소를 선택합니다.

 

 

문제 23 - Select the apple on the middle plate

정답

plate apple:only-of-type

:only-of-type 선택자는 위 코드에서 예를 들면 plate 요소들 중 apple이 자식으로 유일하게 존재하는 부분을 선택합니다.

첫 번째 plate부분에는 aple의 요소가 두 개가 있으므로 생략되고 두 번째 plate에서는 apple의 요소가 단일로 구성되어있기 때문에 두번째 apple이 선택됩니다.

 

 

문제 24 - Select the last apple and orange

정답

.small:last-of-type

.small 클래스명으로 된 요소들 중 가장 마지막에 있는 걸 선택하면 됩니다.

orange와 apple의 클래스명이. small이고 가장 마지막에 있는 요소들 두 개가 선택됩니다.

 

 

문제 25 - Select the empty bentos

정답

bento:empty

:empty선택자는 자식의 요소가 비어있는 부분만 선택합니다.

위 코드에서는 bento아래에 pickle이라는 자식 요소가 있는 부분은 선택항목에서 제외되며 자식요소가 없는 bento들만 선택됩니다.

 

 

문제 26 - Select the big apples

정답

apple:not(.small)

:not 선택자는 이름에서 알 수 있듯이 포함하지 않는 요소를 선택할 수 있습니다. apple요소 중에서 class명이 small인걸 포함하지 않고 선택합니다.

 

 

문제 27 - Select the items for someone

정답

[for]

선택해야 하는 3가지의 요소가 for이라는 attribute을 가지고 있습니다 [attribute]로 attribute을 선택할 수 있습니다.

a[href] 같은 형식으로도 사용가능합니다. 그러면 a태그 중 href attribute을 가진 요소들을 선택하게 됩니다.

 

 

문제 28 - Select the plates for someone

정답

plate[for]

28번 문제와 비슷하게 선택해야 하는 요소에 for이라는 attribute을 가지고 있는데 plate항목 중에서 for 속성을 가진 요소들만 선택하면 됩니다.

 

 

문제 29 - Select Vitaly's meal

정답

bento[for="Vitaly"]

[] 사이에 attribute와 attribute의 값을 같이 지정해 줄 수 있습니다.

bento요소 중 for attribute을 가지고 값이 Vitaly를 지정하면 됩니다. 

 

 

문제 30 - Select the items for names that start with 'Sa'

정답

[for^="Sa"]

Sa값으로 시작하는 attribute을 선택해야 하는데 이럴 때는 특성^=값을 입력하면 됩니다.

^를 요소 앞이 아니라 sa앞에 붙여야 ~로 시작하는 느낌이 머리에 박혀있어서 헷갈렸었는데 이 부분 잘못 사용하지 않도록 특성^ 로 사용하고 뒤에 값을 넣는다는 사실 잘 알고 넘어가셔야 할거 같습니다.

 

 

문제 31 - Select the items for names that end with 'ato'

정답

[for$="ato"]

^가 ~로 시작하는 이였다면, $는 ~로 끝나는 의미를 가지고 있습니다. ato로 끝나는 요소들을 선택합니다.

 

 

문제 32 - Select the meals for names that contain 'obb'

정답

[for*="obb"]

마지막으로 * 연산자는 포함하는 이라는 의미를 가지고 있습니다. obb가 포함되는 요소를 선택합니다.

 

 

 

지금까지 CSS Diner의 모든 문제를 풀어봤습니다.