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

• 공식 웹사이트

• 제시된 대상을 고르는 코드를 편집기에 넣어보자.

• 식탁의 항목 위에 포인터를 올려 대응하는 HTML을 확인하자.

• 도움말과 실행 결과를 오가며 선택자와 대상의 짝을 찾아보자.

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

기타 등등

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

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