Flexbox Froggy

 (flexboxfroggy.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • CSS flexbox를 직접 입력해 개구리를 연잎으로 보내는 인터랙티브 학습 게임으로, 정렬 속성의 효과를 화면에서 바로 확인할 수 있음
  • 첫 레벨은 #pond에 display: flex;가 설정된 상태에서 justify-content로 가로 정렬을 바꾸는 방식임
  • justify-content는 flex-start, flex-end, center, space-between, space-around 같은 값으로 컨테이너 안 항목의 배치를 조정함
  • 예를 들어 justify-content: flex-end;를 입력하면 개구리가 오른쪽 연잎으로 이동해 속성과 결과를 연결해 볼 수 있음
  • 전체는 24개 레벨로 구성되며, 한국어를 포함한 여러 언어와 색각 보정 모드를 제공함

CSS flexbox를 게임으로 익히는 방식

  • Flexbox Froggy는 Froggy와 친구들을 목표 위치로 보내며 CSS flexbox를 학습하는 게임임
  • 화면의 #pond CSS 코드 편집 영역에 속성을 작성하면 개구리의 위치가 바뀜
  • 첫 레벨은 오른쪽 연잎으로 개구리를 보내기 위해 justify-content를 사용하는 과제임
  • 기본 코드에는 다음 구조가 표시됨
    • #pond {
    • display: flex;
    • }

justify-content로 배우는 가로 정렬

  • justify-content는 항목을 가로 방향으로 정렬하는 속성임
  • 사용할 수 있는 값은 다음과 같음
    • flex-start: 항목을 컨테이너 왼쪽에 정렬함
    • flex-end: 항목을 컨테이너 오른쪽에 정렬함
    • center: 항목을 컨테이너 가운데에 정렬함
    • space-between: 항목 사이에 동일한 간격을 둠
    • space-around: 항목 주변에 동일한 간격을 둠
  • justify-content: flex-end;를 쓰면 개구리가 오른쪽으로 이동해 속성 값과 배치 결과를 바로 비교할 수 있음

구성과 관련 학습 자료

  • 게임은 Level 1 of 24로 표시되며, 언어 설정에는 한국어를 포함한 여러 언어가 있음
  • CSS를 더 배우기 위한 관련 게임으로 Grid Garden과 Anchoreum이 연결되어 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • CSS를 배우기 좋은 다른 게임형 자료들도 있음
    https://cssgridgarden.com/ — Grid용 Froggy에 가까움
    https://cssbattle.dev/ — 다양한 도전 과제를 푸는 플랫폼이고 커뮤니티도 큼
    https://flukeout.github.io/ — CSS 선택자를 배움
    https://css-animations.io/ — CSS 애니메이션을 연습함

  • CSS를 몇 년을 다뤄도 align-content와 align-items 같은 flex 관련 속성은 매번 헷갈림
    USB 케이블을 항상 거꾸로 꽂는 것 같은 느낌이고, align과 justify도 마찬가지임
    CSS Grid도 정말 대단함. 이제는 훌륭한 레이아웃 선택지가 너무 많아져서 우리가 꽤 호사를 누리는 셈임

    • 90년대 중반부터 HTML을 작성했고 웹 개발자로 일한 지도 10년인데, CSS Tricks의 flexbox 가이드와 grid 가이드를 자주 참고함
      요약표도 둘 다 출력해서 책상 위에 두고 있고, 정말 값진 자료임
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • 규칙은 이렇다: justify-는 주축, align-은 교차축에 대응함
      -content는 grid 트랙이나 flex-wrap 컨테이너의 행에 쓰이고, -items는 개별 자식 요소, 즉 행이나 grid 셀 안의 항목에 쓰임
      그래도 이름은 더 명확했으면 좋겠음
    • 아마 flex-direction 전반에 대해 일반화하려고 했던 것 같음. 그래서 flex-align 같은 속성이 부모의 방향에 따라 달라지는 구조가 됨
      실제로 방향을 바꿔서 그 이점을 크게 얻는 경우는 매우 드묾
      그게 유일한 이유인지는 모르니 나쁜 선택이었다고 단정하진 않겠지만, 어느 쪽이 어느 쪽인지 기억 못 하는 건 나도 똑같음
      축을 직접 드러내는 더 나은 이름이거나, 속성이 부모 방향과 독립적이었으면 좋았을 텐데, 그 전까지는 치트시트를 써야 함
    • Flexbox와 Grid가 주목을 다 가져가지만, columns의 유용함도 잊으면 안 됨: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • 나는 flex-basis, flex-grow, flex-shrink를 도저히 머릿속에 잘 넣지 못하겠음
      다만 자주 신경 쓸 일이 없어서, 그래서 더 기억에 안 남는 것 같기도 함

  • 이런 게임으로 정말 많은 걸 배웠음. Vim도 https://vim-adventures.com/로 배웠고, 지금은 거의 Vim 없이는 못 살 정도임

  • 이전 HN 글들:
    https://news.ycombinator.com/item?id=30251054 2022년, 317점, 댓글 31개
    https://news.ycombinator.com/item?id=22629903 2020년, 27점, 댓글 2개
    https://news.ycombinator.com/item?id=21796926 2019년, 2점, 댓글 0개
    https://news.ycombinator.com/item?id=18752031 2018년, 3점, 댓글 0개
    https://news.ycombinator.com/item?id=18731852 2018년, 6점, 댓글 1개
    https://news.ycombinator.com/item?id=15605783 2017년, 4점, 댓글 0개
    https://news.ycombinator.com/item?id=14349739 2017년, 3점, 댓글 0개
    https://news.ycombinator.com/item?id=10652909 2015년, 315점, 댓글 69개

  • 훌륭함. 예전에 flexbox를 배울 때 이걸 사용했음
    같은 제작자가 만든 https://codepip.com/games/grid-garden/도 있고, 같은 접근법으로 CSS Grid를 익히게 해줌

    • 게임은 CSS를 배우기에 정말 좋은 방식 같음
      이미 배운 것 덕분에 쉬워 보이는 문제를 점점 어렵게 풀어가면서, 아주 자연스러운 학습 경로가 만들어지기 때문인 듯함
      예전에 CSS 선택자를 배우려고 이 게임을 재미있게 했음: https://flukeout.github.io/

  • Guess CSS에도 Flexbox 섹션이 있지만, CSS를 쓰는 것보다는 읽는 쪽에 더 초점이 있음: https://www.guess-css.app/

    • CSS position은 내가 정말 아무것도 이해하지 못한 게 분명함
      다른 문제는 계속 맞힐 수 있었는데, position은 계속 틀렸음

  • 매우 유용함. 나는 항상 flexbox의 세로 정렬을 결국 검색하게 됨
    급할 때 flexbox 지식을 빠르게 되살리는 데 도움이 되려면, 개구리를 3x3 격자에 드래그 앤 드롭하면 그에 맞는 flexbox CSS 코드가 출력되는 기능이 있으면 좋겠음
    그래도 아주 세심하게 만든 튜토리얼임
    이렇게 말한 이유는 개인적으로 새 CSS 기능을 계속 따라가는 걸 포기했기 때문임. IE7 시절부터 CSS를 띄엄띄엄 써왔고, vendor prefix를 손으로 작성하던 시절과 Chrome Canary가 밀어 넣던 새 기능들을 겪고 나니 CSS 요령을 머리에 계속 넣어둘 에너지가 없음

    • 이제는 요령 같은 게 거의 없고, 따라갈 것도 많지 않음. Flexbox와 Grid가 사실상 최종 단계임
      대부분의 UI에서는 flexbox만으로 충분하고, 기본적으로 stack/group 또는 vbox/hbox처럼 항목을 세로·가로로 배치하는 도구임
      flexbox를 배우면 됨. CSS 레이아웃에 들어온 것 중 가장 유용하고 정말 단순함. 간격은 gap, 배치는 justify와 align 정도라서 99%는 거기서 끝남

  • Flexbox Froggy를 좋아함. 한 세대의 개발자 전체가 이 사이트로 flexbox를 배웠다고 해도 될 것 같음. 나도 그랬음

    • 내 경우 Flexbox Froggy 덕분에 flexbox 개념이 드디어 머릿속에서 딱 맞아떨어졌음
      그때 이미 CSS를 15년이나 쓰고 있었음
      놀라운 교육 도구임

  • Josh Comeau의 flexbox 인터랙티브 가이드도 볼 만함: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • 좋음. Tailwind 버전도 있으면 좋겠음

답변달기