[CSS] CSS Dinner 정답 공유 (1~10)

CSS Dinner를 통해 CSS Selecter를 재밌게 학습할 수 있습니다.

복습하기 위해 블로그에 다시 정리합니다~.~

 

https://flukeout.github.io/

CSS Diner

 

 

✅ Level 1

HTML

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

CSS

plate {
}

 

 

✅ Level 2

HTML

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

CSS

bento {
}

 

 

✅ Level 3

HTML

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

CSS

#fancy {
}

 

 

✅ Level 4

HTML

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

CSS

plate apple {
}

 

 

✅ Level 5

HTML

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

CSS

#fancy pickle {
}

 

 

✅ Level 6

HTML

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

CSS

.small {
}

 

 

✅ Level 7

HTML

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

CSS

orange.small {
}

 

 

✅ Level 8

HTML

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

CSS

bento orange.small {
}

 

 

✅ Level 9

HTML

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

CSS

plate, bento {
}

 

 

✅ Level 10

HTML

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

CSS

* {
}