CSS Diner : selector 연습하기 (1 ~ 10번)

1. Select the plates

<div class="table">
	<plate />
    <plate />
</div>

정답 : plate
해설 : 테이블 위의 모든 접시를 선택해야 하는 단계이다.
          접시 태그에 class 또는 id 식별자가 없기 때문에 태그명으로 선택한다. 
          태그명에 일치하는 모든 태그가 선택된다.

 

2. Select the bento boxes

<div class="table">
	<bento />
    <plate />
    <bento />
</div>

정답 : bento
해설 : 테이블 위의 물건 중 도시락만 선택해야 하는 문제이다.
          모두 식별자가 없기 때문에 태그명으로 선택하였다.

 

3. Select the fancy plate

<div class="table">
	<plate id="fancy">
    <plate />
    <bento />
</div>

정답 : #fancy
해설 : 테이블 위의 물건 중 파란 테두리가 있는 접시만 고르는 문제이다.
          해당 요소에는 id 식별자가 주어져 있기 때문에 해당 식별자로 선택한다.
          id 식별자는 이름 앞에 # 을 붙여서 표기한다.

 

4. Select the apple on the plate

<div>
	<bento />
    <plate>
    	<apple />
    </plate>
    <apple />
</div>

정답 : plate  apple
해설 : 테이블 위의 요소 중에서도 접시 위에 있는 사과를 선택해야 하는 문제이다.
          식별자가 없기 때문에 태그명으로 선택해야 하고, 사과 중에서도 특정한 사과임을 나타내기 위해
          접시를 조상으로 가지고 있는 사과임을 명시한다.
          공백을 사용한 선택자는 자손 선택자로 '조상선택자(공백)자손선택자' 형태로 사용한다.

 

5. Select the pickle on the fancy plate

<div class="table">
	<bento>
    	<orange />
    </bento>
    <plate id="fancy">
    	<pickle />
    </plate>
    <plate>
    	<pickle />
    </plate>
</div>

정답 : #fancy pickle
해설 : 파란 테두리가 있는 접시 위의 피클을 선택하는 문제이다.
          대상은 피클이면서, 조상 또는 부모 중에 파란 테두리가 있는 접시이면 되는 것이다.
          파란 테두리가 있는 접시는 id 식별자를 가지고 있기 때문에 #fancy 로 선택한다. 

 

6. Select the small apples

<div class="table">
	<apple />
    <apple class="small" />
    <plate>
    	<apple class="small" />
    </plate>
    <plate />
</div>

정답 : .small
해설 : 위치와 상관없이 크기가 작은 사과를 모두 고르는 문제이다.
          코드를 보면 작은 사과는 모두 class 식별자를 가지고 있기 때문에 이를 이용하면 된다.
          class 식별자는 식별자 명 앞에 온점(.)을 붙여서 사용한다.

 

7. Select the small oranges

<div class="table">
	<apple />
    <apple class="small" />
    <bento>
    	<orange class="small" />
    </bento>
    <plate>
    	<orange class="small" />
    </plate>
</div>

정답 : bento .small, plate .small
해설 : 이번에는 크기가 작은 오렌지를 모두 고르는 문제이다.
          이전 문제처럼 class 식별자가 있기 때문에 이를 이용하고 싶지만,
          작은 사과도 같은 식별자 명을 사용하고 있기 때문에 이를 그대로 이용하기는 무리가 있다.
          즉, class 식별자를 좀 더 특정해야 한다는 것이다.
          누구를 조상 또는 부모로 갖고 있는 .small 인지 명시해야 한다.
          하나는 도시락을 부모로 가지고 있고, 또 하나는 접시를 부모로 가지고 있기 때문에 
          콤마(,) 구분자를 사용하여 한 번에 작성해주면 된다.

 

8. Select the small oranges in the bentos

<div class="table">
	<bento>
    	<orange />
    </bento>
    <orange class="small" />
    <bento>
    	<orange class="small" />
    </bento>
    <bento>
    	<apple class="small" />
    </bento>
	<bento>
    	<orange class="small" />
    </bento>
</div>

정답 : bento orange.small
해설 : 이번에는 도시락 안의 요소가 작은 오렌지의 경우만 선택하는 문제이다.
          만약 bento orange 를 선택하게 되면 큰 오렌지까지 선택되기 때문에 정답이 될 수 없고,
          bento .small 을 선택하게 되면 작은 사과까지 선택되기 때문에 정답이 될 수 없다.
          즉 bento 안의 작은 오렌지라는 특정하는 요소가 더 필요하다는 것이다.
          orange 이면서 .small 식별자를 쓰고 있다는 명시를 해주는 것이다.
          여기서는 공배를 만들면 안 되는데, 그 이유는 orange 의 자손 요소를 선택하는 것이 아니기 때문이다.

 

9. Select all the plates and bentos

<div class="table">
	<pickle class="small" />
    <pickle />
    <plate>
    	<pickle />
    </plate>
	<bento>
    	<pickle />
    </bento>
    <plate>
    	<pickle />
    </plate>
    <pickle />
    <pickle class="small" />
</div>

정답 : plate, bento
해설 : 이번에는 모든 접시와 도시락을 선택하는 문제이다.
          접시와 도시락에 개별적인 식별자가 없기 때문에 태그명으로 고르면 된다.
          여러 개의 선택자를 쓸 때에는 콤마(,) 로 구분 가능하다.

 

10. Select all the things

<div>
	<apple />
    <plate>
    	<orange class="small" />
    </plate>
    <bento />
    <bento>
    	<orange />
    </bento>
    <plate id=fancy />
</div>

정답 : *
해설 : 이번 문제는 모든 요소를 선택하는 것으로 별표(*) 를 통해 선택 가능하다.