# css diner

alexan1027

CSS 선택자를 공부하는 중 재밌어 보이는 사이트가 있어 풀이를 정리하려 한다. CSS Diner 라는 사이트인데 움직이는 요소를 선택하려면 어떤 선택자를 활용해야하는지 입력하는 방식이다. CSS Diner Level 1 테이블 위의 두 개의 접시를 선택하는 문제이다. 두가지 방식으로 풀어보았다. plate태그가 있으므로 해당 태그를 선택하는 태그 선택자 모든 태그를 선택하는 전체 선택자 Level 2 테이블 위의 벤토 두개를 선택하는 문제이다.

rudals2727

css diner 주소 https://flukeout.github.io/ select the plates select the bento boxes select the fancy plate select the apple on the plate select the pickle on the fancy plate Select the small apples Select the small oranges Select the small oranges in the bentos Select all the plates and bentos Select all the things! Select everything on a plate => 띄어쓰기 중요함 Select every apple that's next to a plate Select the pickles beside

daymoon_

CSS Diner? > 🤔 문제 링크 : CSS Diner CSS Selector에 대해 연습할 수 있는 사이트 📑 답안 🍽️ 단계 1 : plate 🍽️ 단계 2 : bento 🍽️ 단계 3 : #fancy > 📌 참고자료 디지털노마드 클래스(class)와 아이디(id)의 차이점 id : id를 지칭할 경우 #(샾)을 사용한다. class : c

maxkmh

CSS 선택자를 확인해볼 수 있는 재밌는 게임! 단계는 Level 1 ~ 32까지 있으며 선택자가 시각적으로 바로 확인할 수 있기 때문에 재밌고 이해가 잘 되는 것 같음! https://flukeout.github.io/ 17. :last-child | Last Child Pseudo-selector 마지막 요소만 선택하는 것 위 예시에서 그냥 :last-child 하면 사과, 큰 배, 피클 선택됨 fancy plate 의 a

maxkmh

CSS 선택자를 확인해볼 수 있는 재밌는 게임! 단계는 Level 1 ~ 32까지 있으며 선택자가 시각적으로 바로 확인할 수 있기 때문에 재밌고 이해가 잘 되는 것 같음! https://flukeout.github.io/ 1. A | Type Selector plate 태그 이름을 써주면 그 해당하는 태그가 모두 선택됨 > 2. A | Type Selector 1번과 동일. bento를 쓰면 그 태그만 선택 > 3. #id | ID Selector id선택자는 샵#을 쓰고 바로 id를 써주면 됨. 여기서 plate는 2개인데 fancy라는 id값을 가진 plate만 선택하고 싶을 때 씀 ul#long selects > 둘 다 가능 4. A B | Descendant Selector ![](https://images.velog.io/images/maxkmh/post/72a21

drv98

https://flukeout.github.io/

yeonlisa

트위틀러 목업을 만드는 날이다. 어제 열심히 css 공부를 한 보람이 있었다. html 구조를 손쉽게 만들었고, 색상표를 검색해가면서 페어와 아이디어를 의논하면서 열심히 꾸몄다. 다만 오늘부터 윗집에서 인테리어 공사를 시작하는 바람에 드릴소리가 시끄러워서 제대로 하지 못한게 아쉬웠다.ㅠㅠ 그래도 난 나의 색을 살릴 것이다. 남을 부러워 하지 않고 나의 고유의 색을 떨쳐 나갈것이다. css 셀렉터는 중요한 부분인데 이를 재밌게 이해하기 위한 css 셀렉터 게임이 있다. https://flukeout.github.io/ https://sinseiki.github.io/cssdiner/ 위는 영어 사이트고 아래는 한글로 번역된 사이트이다. 1. Type Selector > 태그로 요소를 선택하기 A { } 모든 A 태그들을 선택한다. 또한 태그는 종류에 따라 다르다. 예를 들면 `, , `은 서로 다른 태그이다. 예시) div는 모든 `