CSS Diner 1~11번

* 출처 : https://flukeout.github.io/

CSS Diner

* 답안 참고

https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-13

CSS Diner 완료(답안/요점정리) (1/3)

 

 

1)  문제 : select the plates

 

1) 해설 : 빈 접시 두 개를 css로 접근

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

//css
plate {
}

 

 

2)  문제: Select the bento boxes

 

2) 해설 : 도시락 박스 2개를 css로 접근

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

//css
bento {
}

 

 

3) 문제 : Select the fancy plate

 

3) 해설 : 왼쪽 끝 하늘색 모양의 접시에 css로 접근

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


//css
#fancy {
}

 

 

4) 문제 : Select the apple on the plate

 

4) 해설 : 접시 위의 사과에 css로 접근

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


//css
plate apple {
}

 

 

5) 문제 : Select the pickle on the fancy plate

 

5) 해설 : 가운데 피클에 css로 접근

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

//css
#fancy pickle {
}

 

 

6) 문제 : Select the small apples

 

6) 해설 : class가 small인 사과에 css로 접근

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

//css
.small {
}

 

 

7) 문제 : Select the small oranges

 

7) 해설 : class가 small인 오렌지에 css로 접근

//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 {
}

 

 

8) 문제 : Select the small oranges in the bento

 

8) 해설 : class가 small인 오렌지 중 bento에 들어간 오렌지 2개만 css로 접근

//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 {
}

 

 

9) 문제 : Select all the plates and bentos

 

9) 해설 : class가 plate, bento 안에 들어간 경우를 css로 접근

//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 {
}

 

 

10) 문제 : Select all the things

 

10) 해설 : 화면의 모든 접시 및 물체를 css로 접근

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

//css
* {
}

 

 

11) 문제 : Select everything on the plate

 

11) 해설 : class가 plate인 orange, pickle, apple에 css로 접근

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

//css 
plate * {
}