오늘 CSS 수업중에 진행한 게임
CSS select 연습을 할 수 있는 게임 사이트 이다.
은근 재밌었으니 블로그에 남겨둔다
사이트 내의 게임 화면은 이렇게 나오는데 leval 1 ~ 32 까지 플레이 가능하다.
화면에서 뽀잉뽀잉 하고 움직이는 그릇이나 과일(사과, 피클, 오렌지)을
왼쪽 CSS구문안에 작성해 날려보내는 게임이다.
매 게임의 목차와 오른쪽 화면을 보면 어떤 식으로 작성해야 하는지 힌트가 나온다.
예를 들면 22번 문제에서는 3번째, 5번째 그릇이 움직이는데,
Nth-of-type 을 사용하여 작성하면 된다.
plate:nth-of-type(2n + 3)
이렇게 작성하면 움직이는 애들이 슝 날라가 버린다!
틀리게 작성되면 애니메이션 효과로 징- 하고 움직이는데 아주 킹받는다..
구글에 검색하면 1~32개의 문제와 답을 찾아볼 수 있다.
'백엔드 과정 > html css' 카테고리의 다른 글
[HTML] 태그 정리 (0) | 2022.02.09 |
---|---|
[HTML5] 문서 형식 선언 <!DOCTYPE html> (0) | 2022.02.08 |
[HTML5] HTML 개요 (0) | 2022.02.08 |