Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

CSS Diner 1~11번 본문

과거 프로그래밍 자료들/Html&CSS

CSS Diner 1~11번

평부 2022. 6. 30. 15:25

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

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

* 답안 참고

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)

CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를

velog.io

 

 

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 * {
}
저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Html&CSS' 카테고리의 다른 글

CSS Diner 22 ~ 32번  (0) 2022.06.30
CSS Diner 12~21번  (0) 2022.06.30
영화 사이트 만들어 보기 - footer  (0) 2022.06.05
영화 사이트 만들어 보기 - HTML 마크업  (0) 2022.06.05
[복습하기2] 메인 이미지, 글 작성 폼 만들기  (0) 2021.09.05
'과거 프로그래밍 자료들/Html&CSS' Related Articles more