CSS - selector (CSS Diner 해석 1번 ~ 8번)

1. Select the plates

   plate를 선택하면 되므로 답은 plate

 

2. Select the bento boxes

   3개의 접시 중에서 bento를 선택하면 되므로 답은 bento

 

3. Select the fancy plate

   3개의 접시 중 fancy를 선택하면 되는데 <plate id="fancy"/>로 id가 지정되어 있으므로 답은 #fancy

 

4. Select the apple on the plate

   3개의 접시에서 사과가 올려져 있는 접시를 고르는 문제. 

   두번째 접시인데.. 코드는 아래처럼 되어 있으므로 답은 plate>apple

 

.
.
.
<plate>
	<apple />
</plate>

 

5. Select the pickle on the fancy plate

   팬시 접시 위에 있는 피클을 고르는 문제 

   fancy 접시위에 피클을 나타낸 코드는 아래와 같으며 id 선택자를 사용해서 답은 #fancy>pickle

<plate id = "fancy">
	<pickle />
</plate>

6. Select the small apples

아래의 코드 중 apple class가 "small"인 클래스 선택자가 답이 됩니다. 

따라서 답은 .small

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

 

7. Select the small oranges 

위와 같은 클래스 선택자를 기술하는 문제인데, 다른점이 있다면 apple태그와 orange 태그로 small 클래스다 나뉘어져 있습니다. 

이 경우 태그와 하위 클래스를 명시해 주면 됩니다. 다만 상위태그가 bento와 plate로 나뉘어져 있으므로, 

전체 선택자인 *를 이용해서 답은 *>orange.small 

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

8. Select the small oranges in the bentos

벤토 위에 작은 오렌지를 선택하는 게임입니다. 

이 게임 또한 클래스 선택자를 이용하므로 답은 bento>orange.small 이 됩니다. 

<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>

 

참고 사이트 

https://flukeout.github.io/

CSS Diner

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN