CSS 속성을 선택하기 전에 축을 식별하십시오.
레벨의 대상 수련잎을 읽고 현재 개구리의 배열을 검사합니다. 기본 행 방향에서 justify-content는 수평 주축을 따라 작동하고 align-items는 수직 교차 축을 따라 작동합니다. 값을 입력하기 전에 변경할 축을 지정하십시오. 이 습관은 흔히 저지르는 실수, 즉 다른 방향을 제어하는 속성에 대해 올바른 값을 선택하는 것을 방지합니다.
flex-direction이 컬럼으로 변경되면 주축과 교차축도 함께 변경됩니다. justify-content가 항상 수평 이동을 의미한다고 가정하는 대신 속성을 다시 평가하세요. 편집기에 하나의 CSS 변경 사항을 입력하고 결과 위치를 목표와 비교하십시오. 개구리는 제자리로 끌려가는 것이 아니라 CSS에 의해 위치가 지정됩니다. 레벨의 힌트와 허용된 속성을 사용하여 실험을 실제로 표시된 작업과 연결하세요.
다른 변경을 시도하기 전에 실패한 변경 사항을 설명하세요.
변경 사항이 목표를 벗어난 후 속성이 잘못된 축에 영향을 미쳤는지, 선택한 값이 예상과 다르게 항목을 정렬했는지, 현재 방향이 레이아웃의 의미를 변경했는지 물어보세요. 규칙 중 당신이 이해한 부분을 유지하고 한 가지를 수정하십시오. 한 번에 여러 속성을 바꾸면 어떤 변경 사항이 문제를 해결했는지 확신할 수 없는 상태로 목표에 도달할 수 있습니다.
검토 연습의 경우 다음 단계로 넘어가기 전에 성공적인 규칙을 말로 설명합니다. 즉, 어떤 축을 사용했는지, 수련 잎을 기준으로 개구리를 배치하는 방법을 설명합니다. 이후 레벨에서는 아이디어를 결합할 수 있으므로 이 설명은 맥락 없이 한 줄을 암기하는 것보다 더 유용합니다. 이 가이드는 꾸며낸 완전한 답변 목록을 제공하지 않으며 게임을 해결하면 전문적인 CSS 기술이 인증된다는 주장도 제공하지 않습니다. 링크된 플레이 페이지는 편집자에게 제어 기능과 정확한 작업 프레임을 제공합니다. 센터는 실제로 접하는 수준에 대한 이해와 실천을 지원합니다.
예를 들어, 수평 이동을 의도했을 때 규칙에 따라 개구리가 수직으로 변경되는 경우 다른 값을 선택하기 전에 flex-direction을 검사하고 현재 주축을 식별합니다. 관계를 크게 말해보세요. 이 속성은 주축을 따라 분포를 변경하고 주축은 현재 이 방향으로 실행됩니다. 그런 다음 한 번 편집하고 결과를 검사합니다. 작동되면 눈에 보이는 수련잎에 대해 설명을 테스트해 보세요. 이는 한 화면에서만 기억하는 명령 대신 실패한 추측을 재사용 가능한 레이아웃 아이디어로 바꿔줍니다.
Flexbox Froggy 팁과 전략
다음 판에서 연습할 팁을 선택하세요. 이 목록은 게임을 변경하거나 게임 진행 상황을 저장하지 않습니다.
Flexbox Froggy 관련 질문과 답변
코딩 도구를 설치해야 하나요?
아니요. CSS 에디터는 브라우저 게임 안에 있습니다.
이 과정은 웹 개발에 대한 완벽한 과정인가요?
이 게임은 플렉스박스 레이아웃 개념을 연습할 수 있는 대화형 게임입니다. HTML 및 CSS 강좌를 대체하는 것은 아닙니다.
이 프로젝트를 누가 만들었나요?
Thomas Park가 Flexbox Froggy를 만들었습니다. 소스 코드는 MIT 라이선스에 따라 배포되며, 사용된 아트워크는 CC BY 3.0의 작품입니다. 저작권 표시 링크는 아래에 있습니다.
방향을 뒤집으면 flex-end가 반대쪽으로 이동시키는 이유는 무엇인가요?
Flexbox의 시작과 끝은 고정된 좌우가 아니라 현재 주축을 따릅니다. row-reverse에서는 오른쪽이 시작이므로 justify-content: flex-end는 왼쪽으로 배치합니다. flex-direction을 먼저 확인하고 정렬 값을 고르세요. align-items는 교차축을 조절하므로 다른 위치 문제를 해결합니다.