CSS 다이너(CSS Diner)는 식탁 위의 대상을 고르며 CSS 선택자를 익히는 게임이다.

- [공식 웹사이트](https://flukeout.github.io/)

- 제시된 대상을 고르는 코드를 편집기에 넣어보자.
- 식탁의 항목 위에 포인터를 올려 대응하는 HTML을 확인하자.
- 도움말과 실행 결과를 오가며 [[선택자와 대상의 짝]]을 찾아보자.

[[선택자]]를 외우는 데서 나아가 [[HTML]] 구조 속에서 정확한 대상을 가리키는 연습을 할 수 있다.

## 기타 등등

- 게임은 모두 32단계다. 접시와 과일을 고르는 문제 안에 속성값의 시작과 끝을 구분하는 선택자도 들어 있다. [출처](https://flukeout.github.io/)
- 편집기에 단계 번호를 입력하면 해당 단계로 건너뛸 수 있다. 이미 아는 식탁을 순서대로 다시 치울 필요는 없다. [출처](https://flukeout.github.io/)

#웹사이트 #HTML #CSS #교육 #게임