재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3

재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3

 

 

 

CSS를 공부하다 보면, Flexbox는 꼭 만나게 되는 핵심 기술입니다.
저도 예전에 배웠던 Flex를 다시 복습하며, <Flexbox Froggy>라는 게임으로 개념을 익히고 있습니다.
개구리를 움직이며 Flex 속성을 배우는 이 게임은 지루한 이론을 넘어 직관적인 이해를 도와줍니다.

 

 

 

Flexbox Froggy

 

또는 Codepip에서 Grid 연습도 가능하니 참고하세요!

 

 

Codepip

 

문제 풀이 & 핵심 개념 정리

게임을 하다 보면 Flex의 동작 원리가 머릿속에 쏙쏙 들어옵니다.
아래 문제 해설을 보기 전에, 꼭 직접 풀어보시길 추천드립니다! 자, 이제 함께 문제를 풀어보도록 해봅시다.

 

문제 1-3: justify-content 마스터하기

 

목표: 개구리를 연잎 위로 이동시키기
핵심: justify-content는 Flex 축 방향(기본: 가로)으로 아이템을 정렬합니다.

 

문제 1

 

가벼운 워밍업 문제입니다.

CSS를 살펴보면, #pond에 적용하고 있는 것을 알 수 있습니다. 즉, 개구리 또는 연잎이 아니라, 연못에 Flex 속성을 주고 있다는 것을 알 수 있습니다. 이는 곧 컨테이터에 사용하는 속성이라는 것을 말합니다.

 

#pond {
      display: flex;
      justify-content: flex-end;
    }

 

문제 2

 

2번 문제 또한 쉽습니다. 이전 앞 문제의 연장선상에 있죠? 가볍게 풀어봅시다.

 

#pond {
  display: flex;
  justify-content: center;
}

 

문제 3

 

기본적으로 연못(#pond)에 적용된 Flex의 방향은 가로축입니다. 따라서 justify-content 속성은 요소들을 가로 방향으로 정렬합니다.

 

#pond {
  display: flex;
  justify-content: space-around;
}

TIP: space-around는 아이템 양쪽에 균등한 간격을 주고,
space-between은 양 끝에 아이템을 붙인 후 나머지를 균등 분배합니다.

 

문제 4-6: 세로 정렬의 비밀 align-items

 

 

문제 4: space-between으로 끝과 끝에 아이템 배치

 

연잎들이 띄어져 있는 간격이 동일하다는 힌트에 주목해볼 필요가 있습니다.

#pond {
  display: flex;
  justify-content: space-between;
}

문제 5: align-items: flex-end로 세로 방향 정렬

 

align-items는 Flex 축과 직각이 이루어지는 방향으로 정렬을 한다는 것이 힌트가 되겠군요!(암기!)

#pond {
  display: flex;
  align-items: flex-end;
}

 

문제 6 :  justify-content + align-items 조합으로 중앙 정렬을 하는 문제

 

justify-content: center & align-items: center의 조합 필살기는 거의 영어단어의 관용어나 숙어처럼 아주 흔하게 사용되는 코드입니다. CSS를 접하다보면 너무 자주 만나게 되는 속성입니다.

 

포인트:
justify-content ➔ 축 방향 정렬
align-items ➔ 수직 방향 정렬

#pond {
  justify-content: center;
  align-items: center;
}

 

문제 7: flex-direction으로 축 바꾸기

Flex의 축을 가로(row) ➔ 세로(column)로 변경하면 정렬 방향이 달라집니다.

#pond {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

 

문제 8: 우→좌 배치

 

display: flex 속성이 적용된 컨테이너는 기본적으로 flex-direction: row를 가집니다. 이는 컨테이너 내부의 콘텐츠들이 왼쪽에서 오른쪽으로 흐르도록 정렬됨을 의미합니다.

 

#pond {
  display: flex;
  flex-direction: row-reverse;
}

 

 

일단 전체 24문제 중 8개의 문제에 대해서 함께 살펴보았습니다. 어떠신가요? CSS를 재미있는 게임으로 배우는 장점이 있는 것 같지 않은가요?^^

마치며

Flex는 처음엔 복잡해 보이지만, 게임처럼 반복하다 보면 손이 기억합니다.
저도 2년 넘게 실무에서 Flex를 쓰다 보니, 이제는 "이럴 땐 이 속성!"이 자연스럽게 떠오르더군요.

저와 함께 24단계까지 있는 문제를 모두 풀어보시고,
Flex를 잘 활용할 수 있는 고수가 되어보세요!

 

자, 다음 문제 풀러 또 함께 가보시죠!