CSS를 배우는 것은 실망스러운 경험이 될 수 있지만 적어도 지루할 필요는 없습니다! 코딩 학습의 가장 좋은 점 중 하나는 코딩을 잘하는 사람들이 우연히 다른 사람들에게 코딩을 가르치는 게임을 만드는 기술도 갖게 된다는 것입니다. 기본 CSS 학습에서 연습과 실험을 대신할 수 있는 것은 없지만 게임은 확실히 도움이 되며 그리드 및 플렉스박스와 같은 최신 레이아웃 모델은 특히 실습 학습 모델의 이점을 얻습니다.
CSS를 단시간에 마스터할 수 있는 몇 가지 게임이 있습니다.
1. CSS 식당:CSS 선택기
아주 기본이죠? 요소, 클래스, ID를 선택하십시오. 아마도 의사 클래스일까요? 또 뭐가 있나요? 사실 요소를 선택하는 방법은 생각보다 많은데, CSS Diner는 CSS로 음식을 고르는 방법을 알려드리고자 합니다. 일부 문제는 약간 혼란스러울 수 있지만 이것은 코딩입니다. 인터넷 검색을 하는 것이 부끄러운 일이 아닙니다.
2. Flexbox 좀비
Flexbox Zombies는 flexbox 코드로 제어되는 무기로 좀비를 쏘는 것을 중심으로 하는 직관적이고 매력적이며 자기 강화적인 게임으로 flexbox를 사용하는 방법을 알려줄 미친듯이 잘 개발된 게임/코스입니다. 스토리라인, 멋진 그래픽, 좀비 학살 액션으로 완성되는 여러 레벨의 과정을 통해 기초부터 고급까지 여러분을 안내합니다. CSS를 배우고 있다는 사실을 잊어버릴 수도 있습니다.
Flexbox 자체는 한 차원에 따라 반응형으로 콘텐츠를 구성하는 멋진 기술이며, 프론트 엔드 웹 개발과 관련하여 무엇이든 하는 경우 스스로 배워야 합니다. 미루고 있든 없든, Flexbox Zombies는 실제로 무언가를 가르쳐주는 게임을 플레이할 수 있는 훌륭한 핑계입니다. 모든 교육이 이러할 수만 있다면?
같은 제작자는 "Grid Critters"라는 CSS Grid용 게임 코스도 설계했습니다. 무료는 아니지만 Flexbox Zombies가 마음에 들면 현금을 드롭할 수도 있습니다.
3. 그리드 가든
개인적으로 flexbox가 괜찮다고 생각하지만 1차원(행 또는 열) 레이아웃이므로 더 큰 프로젝트와 템플릿의 경우 그리드로 전환하고 싶을 것입니다(그리드 셀 내부에 일부 플렉스박스 컨테이너가 있을 수 있음). 일단 알아내면 깔끔하고 깨끗하고 놀랍지만 Grid Garden(및 앞서 언급한 Grid Critters)이 도움이 될 수 있는 약간의 학습 곡선이 있을 수 있습니다.
Grid Garden은 정원을 배치하여 당근에 물을 주고 잡초에 독을 뿌려야 하는 무료 게임입니다. 그리고 그 그리드가 이 작업에 완벽하다는 것이 밝혀졌습니다! 기본 그리드 위치를 확실히 파악한 다음 자신의 사이트 레이아웃에 적용할 수 있습니다.
4. Flexbox 방어
flexbox의 기본 사항을 이미 알고 있지만 "정렬"과 "정렬"을 똑바로 유지할 수 없습니까? Flexbox Defense는 타워 디펜스 게임으로 위장한 flexbox 튜토리얼로, 콘텐츠를 정당화하고 스스로를 정렬하거나 죽는다는 사실을 기억하도록 합니다. 하지만 다시 시도하면 됩니다. 하나의 정답만 받아들이는 게임의 팬이 아니었다면 이 게임을 좋아할 것입니다. 원하는 위치에 타워를 배치하고 스스로 성공하거나 실패할 수 있기 때문입니다.
5. Flexbox 개구리
기존의 Flexbox 튜토리얼을 살펴보는 것만으로도 오후의 게임을 제대로 즐길 수 있을 것입니다. Flexbox Froggy는 그런 면에서 완벽합니다. 처음부터 다시 시작하지 않아도 되지만 명령을 잊어버린 경우에는 몇 분 안에 이 게임을 질주하여 다시 속도를 높일 수 있습니다.
6. CodePip 게임
Grid Garden과 Flexbox Froggy를 확인했다면 CodePip의 작업에 대한 몇 가지 예를 이미 보았을 것입니다. 그들이 제공하는 두 가지 무료 게임입니다. 사이트에서 프로 계정에 가입하면 일반 CSS 검토에서 JavaScript에 이르는 다양한 게임도 있습니다.
이것이 나에게 얼마나 많은 CSS를 가르쳐 줄까요?
이러한 게임을 실행하면 몇 가지 기본 개념을 아주 잘 배울 수 있습니다. 특히 flexbox를 배우고 싶다면 더욱 그렇습니다. 그러나 궁극적으로 게임은 입력할 단어만 가르칠 수 있습니다. 실제로 사용하는 방법을 알고 싶다면 실제로 적용해야 합니다. 좋은 코드 편집기와 구현하고 싶은 몇 가지 아이디어를 얻고 어지럽히기 시작하세요!