재미있게 Flex를 마스터하는

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

이전 포스팅에 이어 Flex Froggy 문제풀이를 계속 함께 진행봅시다.

아직 앞 문제를 풀지 않으신 분은 1~8번 문제를 먼저 풀고 조인해주세요.

문제 9: 세로 배치

flex-direction 속성은 Flexbox 레이아웃의 방향을 결정하는 핵심적인 요소이며, Flexbox를 이해하는 데 매우 중요한 역할을 합니다. 가볍게 보고 넘어가면 헷갈릴 수 있으니 꼭 잘 알아두어야 합니다.

핵심:
flex-direction이 row일 때 ➔ justify-content는 가로 정렬
column일 때 ➔ justify-content는 세로 정렬

#pond {
  display: flex;
  flex-direction: column;
}

문제 10: row-reverse + flex-end 조합

이 문제는 Flexbox의 방향(flex-direction)에 따라 flex-start와 flex-end가 어떻게 동작하는지 이해하는 데 도움을 주기 위한 문제입니다.

flex-start의 위치는 항상 왼쪽 또는 위쪽이 아닌, flex-direction에 의해 결정되는 주축 방향에 따라 달라집니다.

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

문제 11: column + flex-end로 아래쪽 정렬

flex-direction이 column으로 설정되면 주축이 세로 방향으로 변경됩니다. 따라서 justify-content 속성은 세로 방향을 기준으로 요소들을 정렬합니다.

[justify-content 속성 값에 따른 세로 방향 정렬 예시]

flex-start: 위쪽 정렬
center: 가운데 정렬
flex-end: 아래쪽 정렬
space-around: 요소 위아래에 여백을 균등하게 배분
space-between: 요소 사이에만 여백을 균등하게 배분

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

문제 12: column-reverse로 순서 뒤집기

이 문제는 앞선 11번 문제와 유사한 응용 문제입니다.

개구리들의 순서가 연꽃잎의 순서와 반대로 되어 있을 때, 개구리들의 순서를 연꽃잎 순서에 맞추려면 어떻게 해야 할까요?

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

요약:
flex-direction에 따라 시작점과 끝점이 뒤집힙니다.
reverse 속성은 아이템 순서와 정렬 기준을 동시에 변경하죠!

문제 13 :

이번 문제는 flex-direction, justify-content, align-items 속성을 함께 사용하여 개구리들의 배치를 다양하게 변경하는 문제입니다. 이 문제들을 통해 세 가지 속성의 조합이 Flexbox 레이아웃에 어떤 영향을 미치는지 살펴보세요.

찬찬히 뜯어보면, row 정렬과 center, end 키워드가 머릿속에 떠오른다면, 당신은 이미 상당한 수준의 Flexbox 이해도를 갖추고 있는 겁니다!

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}

문제 14 :

14번 문제에서는 흥미로운 속성인 order가 등장합니다. Flexbox는 자식 요소의 "배치"를 다루기 때문에, 배치 순서를 조절하기 위한 order 속성이 존재합니다.

주의할 점: order 속성은 컨테이너가 아닌 자식 요소 (Flex 아이템)에 직접 적용해야 합니다.

노란 개구리에 해당하는 .yellow 선택자를 보니, 노란 개구리는 class="yellow" 속성을 가지고 있음을 알 수 있습니다.

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

order 속성을 z-index와 유사하게 생각하면 이해하기 쉽습니다.

기본적으로 모든 개구리는 order: 0 값을 갖는데, 노란색 개구기의 order 값을 1로 설정하면 다른 개구리보다 배치 순서가 뒤로 밀려 가장 오른쪽에 위치하게 됩니다.

노란색 개구리의 order 값을 2, 3, 10, 100 등 어떤 값을 주더라도 결과는 같습니다. order 값이 0보다 크기만 하면 가장 오른쪽에 배치됩니다.

문제 15 :

15번 문제는 order 속성을 다시 한번 연습하는 문제입니다.

맞습니다. 현재 모든 개구리의 order 값은 기본값인 0입니다.

#pond {
  display: flex;
}

.red {
  order: -1;     /* -10, -100 어떤 음수라도 가능  */
}

문제 16:

16번 문제는 부모 컨테이너가 아닌 자식 콘텐츠 (Flex 아이템)에 직접 적용하는 align-self 속성에 대한 문제입니다.

align-self는 마치 청개구리처럼, 다른 자식 요소들과는 다르게 혼자 튀는 요소의 위치를 개별적으로 설정하기 위한 속성이라고 생각하면 됩니다.

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

.yellow {
  align-self: flex-end;
}

마치며

번부터 18번까지 문제를 함께 풀어보았습니다. 어떠신가요? 이전에는 몇몇 속성들로 이리저리 맞춰보던 Flex가 점점 더 흥미롭게 느껴지지 않으신가요?

24번 문제까지 모두 정복하고 나면, Flexbox에 대한 이해와 활용도가 더욱 높아질 것이라는 기대감이 드는 것은 당연합니다.

그럼, 마지막 포스팅에서 남은 문제들을 함께 풀어보도록 하겠습니다!

저작자표시 비영리 변경금지 (새창열림)

D.C SKY 정보채널

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