[ 생활코딩 CSS ] 4일차 선택자 게임

CSS 로고

오늘은 3일동안 공부해본 선택자를 게임을 통해 익혀봤습니다.

http://flukeout.github.io

CSS Diner

사이트에 들어가시면 테이블 위에 놓인 물건과 CSS 에디터, HTML 에디터, 그리고 오른쪽에는 도움말을 보실 수 있습니다.

우리가 해야 할 것은 테이블 위 물건 중에서 움직이는 것 만을 CSS 선택자로 선택해주는 것입니다.

지금까지 공부한 부모-자식, 부모-자손 선택자 등을 이용하려면 먼저 태그들의 상하관계를 파악해야 하는데 그러려면

이렇게 궁금한 대상에 마우스 커서를 올려보면 파악할 수 있습니다.

총 32단계나 되는데 이 글에서 다 설명하는건 어려우므로 어려웠던 몇 가지만 여기다 기록해보고자 합니다.

1. 8단계

여기서부터 설명이 안나오고 알아서 해보라고 해서 어렵게 느껴진 것 같습니다.

small 클래스를 가진 orange 요소만을 선택하면 되는데, 벤토(도시락) 위에 있는 두 개만 선택해 줘야 합니다.

bento orenge.small

정답은 위와 같고, 이유는 small 클래스를 가지는 orange 요소만을 선택해 주기 위해 orange.small 인데

그 중에서 bento 태그의 자손인 것만 선택해 주면 되므로 앞에 부모 태그인 bento 를 입력하면 됩니다.