게임으로 CSS 배우기: Flexbox Froggy 및 Grid Garden

Flexbox Froggy로 시작하여 축을 따라 정렬하는 연습을 하고, Grid Garden를 사용하여 그리드 선 사이에 항목을 배치하는 연습을 하세요. 각 게임 연습 후에는 아이디어를 바탕으로 자신만의 작은 페이지를 만들어 보세요. 특정 레벨의 정답을 기억하는 것보다 레이아웃이 변경될 때 선언이 작동하는 이유를 설명할 수 있는 것이 유용한 결과입니다.

게임을 통해 CSS를 배우고 적용하는 방법

이 과정은 두 가지 게임과 세 가지 독창적인 연습 문제를 결합한 것입니다. 간단한 CSS 규칙을 읽을 수 있고 시각적인 피드백을 원하는 사람에게 적합합니다. 이 과정은 완벽한 웹 개발 과정이 아닙니다. 실제 인터페이스에는 가독성 있는 콘텐츠, 반응형 동작, 키보드 접근성, 다양한 텍스트 양에 대한 테스트 등이 필요합니다.

질문에 맞는 연습 문제를 선택하세요

이 게임들은 Codepip에서 제작했습니다. Cozcade는 각 호스팅 게임을 해당 가이드에 연결합니다. Flexbox Froggy 및 해당 가이드; Grid Garden 및 해당 가이드. 원본 Froggy 및 Grid Garden 페이지에서는 제작자의 자체 버전을 제공합니다. 여기 있는 코드 연습을 따라 할 때는 키보드를 사용하세요.

먼저 속성을 선택하기 전에 축 이름을 지정하세요.

Flexbox에는 주축과 교차축이 있습니다. flex-direction는 주 방향을 설정하고, justify-content는 해당 주축을 따라 항목의 위치를 ​​지정하며, align-items는 교차축과 관련이 있습니다. 일반적인 왼쪽에서 오른쪽으로의 행 배열에서 주축은 수평입니다. 방향을 열로 변경하면 수직이 됩니다. 이러한 정의는 MDN의 Flexbox 소개에서 다룹니다.

Froggy에서 선언을 시도하기 전에 항목을 이동할 방향을 지정하세요. 그런 다음 현재 주축을 기준으로 해당 방향의 이름을 지정합니다. 이렇게 하면 잘못된 답변을 구체적인 질문으로 바꿀 수 있습니다. 잘못된 속성을 선택했는지, 잘못된 값을 선택했는지, 아니면 잘못된 축을 선택했는지 알 수 있습니다.

연습 1: 그룹을 끝으로 이동하기

컨테이너 안에 작은 항목 세 개를 만드세요. 이 연습은 게임 레벨이나 정답을 복사한 것이 아니라 직접 만든 문제입니다.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

목표는 항목 세 개를 순서나 각 항목에 별도의 여백을 주지 않고 오른쪽 가장자리로 함께 이동시키는 것입니다. 결과를 예측한 다음 컨테이너에 justify-content: flex-end를 추가하세요.

이제 justify-content: space-between와 비교해 보세요. 첫 번째 방법은 그룹을 이동시키고, 두 번째 방법은 항목 사이에 사용 가능한 공간을 분배합니다. 좁은 컨테이너와 넓은 컨테이너를 모두 사용해 보세요. 서로 가까이 있어야 하는 버튼 세 개에 대해 어떤 방법을 선택할지 설명하세요. 하나의 값을 기억하는 것보다 시각적인 결과가 더 중요합니다.

연습 2: 동일한 명령을 유지하고 축을 변경합니다.

해당 컨테이너를 재사용하고 flex-direction: column를 추가하고 height: 12rem를 설정한 다음 justify-content: flex-end는 그대로 둡니다. 이제 항목들이 아래쪽으로 모입니다. 선언이 "오른쪽으로 이동" 명령이 된 것이 아닙니다. 변경한 주축을 따라 여전히 작동합니다.

다음으로 align-items: flex-start를 추가합니다. 추가 전후의 배열을 비교합니다. 지정된 좌우 방향으로 항목들이 교차축을 따라 왼쪽으로 정렬됩니다. 선언을 제거하고 기본 늘리기 동작을 다시 관찰합니다.

"그냥 작동합니다"라는 표현을 사용하지 않고 두 가지 변경 사항에 대한 간략한 설명을 작성하세요. 예를 들어 축, 여유 공간 및 배치되는 그룹을 식별하세요. 결과를 설명할 수 없는 경우 예제를 두 개의 항목으로 줄이고 한 번에 하나의 선언만 변경하세요. 이 습관을 게임에 다시 적용하세요.

다음으로, 그리드 트랙과 경계를 구분하세요.

그리드 배치는 행과 열을 둘러싼 선을 사용합니다. 다섯 개의 열에는 여섯 개의 경계선이 있습니다. 3번째 행에서 5번째 행까지 배치된 항목은 세 열이 아닌 두 열에 걸쳐 있습니다. 트랙, 셀, 선의 구분에 대해서는 MDN의 그리드 소개를 참조하세요.

Grid Garden에서는 위치를 지정하기 전에 시작 및 끝 경계를 읽으세요. 공간을 세는 것이 혼란스러우면 자신의 페이지에 경계를 그리거나 레이블을 지정하세요.

연습 3: 두 줄 사이에 카드 배치

5열 보드를 만들고 카드 한 장을 놓으세요.

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

페이지를 열기 전에 카드가 나타날 위치를 예측해 보세요. 그런 다음 열 위치만 변경하여 보드 전체에 걸쳐 카드가 표시되도록 하세요. 위에서 명시적으로 지정한 5개의 열을 사용하면 grid-column: 1 / 6는 첫 번째 경계에서 마지막 경계까지 도달합니다.

마지막으로 텍스트를 훨씬 긴 문장으로 변경하고 브라우저 너비를 좁히세요. 카드의 고정 높이 표시 방식이 내용에 적합하지 않더라도 배치 규칙은 그대로 유지될 수 있습니다. 게임 연습을 통해 레이아웃의 한 부분을 배울 수 있으며, 사용 가능한 페이지를 만들려면 콘텐츠도 확인해야 합니다.

게임 진행 상황을 숙달의 증거가 아닌 피드백으로 활용하세요.

연습을 성공적으로 완료한 후, 방향, 항목 수, 사용 가능한 너비 또는 텍스트 길이 중 하나를 변경해 보세요. 결과를 보기 전에 예측해 보세요. 아이디어를 적용하고 변화를 설명할 수 있다면, 단순히 정답을 맞추는 것 이상의 것을 배운 것입니다.

게임을 다시 시작할 때는 동일한 버전과 브라우저 환경에서 열고 있는지 확인하세요. Cozcade 계정 즐겨찾기는 다시 플레이하고 싶은 게임을 식별하는 기능입니다. 하지만 게임 내 학습 진행 상황이 기기 간에 전송된다는 보장은 아닙니다. 진행 상황을 확인하는 동안 저장된 사이트 데이터를 삭제하지 마시고, 해당 게임에서 내보내기 기능을 제공하는 경우에만 명시적으로 내보내기 기능을 사용하세요.

짝짓기 가이드를 계속 진행하세요.

축 및 정렬 연습에는 Froggy 가이드를, 위치 문제에는 Grid Garden 가이드를 활용하세요. 이후에 다른 유형의 연습을 원하시면 학습 게임을 살펴보세요.

위의 연습 문제는 이 기사를 위해 작성되었습니다. 참조 페이지는 2026년 10월 11일에 확인되었습니다. 저희가 기록한 게임 플레이 확인은 데스크톱 상호 작용의 일부만을 다루며, 모든 레벨 완료 또는 전체 모바일 코스 완료를 포함하지 않습니다. 이 기사는 연습 순서를 안내하는 것이며, 자격증을 수여하거나 자체 인터페이스 테스트를 대체하는 것은 아닙니다.

Cozcade에서 플레이할 수 있는 게임

Flexbox FroggyGrid Garden