css selector 게임 CSS Diner

css 선택자를 공부할 때 참고할 만한 사이트입니다

https://flukeout.github.io/

선택자를 단순히 정리된 것이 아니라 직접 코드를 입력하면서 생각해 보고

내가 입력한 코드가 어느부분에 적용되는지 바로 확인할 수 있습니다.

1번 위치엔 그림이 나옵니다.

선택해야 하는 대상은 움직임이 있습니다.

2번은 selector를 입력해야되는 에디터 공간... 

이곳에 맞는 답을 쓴 후 엔터키를 누르면 답이 맞을경우 다음 단계, 틀리면 X

3번은 HTML Viewer

4번은 문제 출제 의도 겸 힌트입니다.

이 사이트의 좋은점은 지루할 수 있는 css 선택자 공부를 눈으로 범위를 확인하고 풀어볼 수 있다는 점!

엔터를 누르자마자 바로 결과를 확인할 수 있고 레벨을 선택할 수 있어 헷갈리는 부분, 

모르는 부분만 선택하여 문제 풀기도 가능합니다.

정답을 입력하면 다음 단계로 넘어가고,

오답을 입력하면 내가 입력한 코드가 어느 곳에 적용되는지 위 table이나 plate 등이 움직이면서 알려줍니다.