[html/css] 가상선택자 연습해볼 수 있는 사이트 CSS Diner

CSS Diner는 CSS 선택자를 학습하고 연습할 수 있는 재미있는 웹 기반 게임이다.

사용자가 HTML 코드에 적용할 올바른 CSS 선택자를 작성하면, 게임의 각 레벨을 클리어하며 점점 더 복잡한 선택자를 익힐 수 있다.

 

이 게임은 CSS를 배우거나 복습하고 싶은 초보자와 중급자를 위한 좋은 도구이고

특히 선택자 공부를 하고 싶은 사람들께 추천한다.

크롤링 연습하시는 분들께도 많은 도움이 될 것 같다. 

 

https://flukeout.github.io/

CSS Diner

 

가장 쉬운 난이도인 1번부터 가장 어려운 32번까지 있다.ㅋㅋ

 

화면에서 고르라고 하는 물건을 고르는 CSS를 작성하면 된다. 

 

예를 들면 1번 문제의 경우 

 

Select the plates

접시를 모두 고르시오 

 

현재 접시는 div 안에 들어있는 plate 태그 이기 때문에 

CSS란에 plate 라고 적어주면 된다. Enter버튼을 누르면 다음 단계로 넘어간다. 

{} 중괄호는 생략하고 선택자 이름만 적으면 된다. 

 

 

이 문제는 아이디가 fancy인 접시만 골라야 하니까

#fancy

 

정답 적고 Enter 하면 다음 문제로 넘어간다. 

 

 

여기서부터 좀 어렵다. 

 

plate + apple

 

 

bento ~ pickle

 

여기서부터는 여러분이 직접 해보세요...ㅋㅋㅋㅋ!