오늘 튜토리얼에서는 Flexbox의 "순서"를 주제로 흥미로운 연습 문제를 살펴보겠습니다. 두 가지 방법으로 플렉스 컨테이너에서 요소의 순서를 재정렬하는 방법을 배우게 됩니다. CSS 클래스와 플렉스 방향 플렉스박스 속성을 사용한 접근 방식을 사용할 것입니다. 이 가이드가 끝나면 요소의 순서를 이해할 수 있을 뿐만 아니라 효율적으로 구현할 수 있을 것입니다. 이제 시작해보겠습니다!
주요 학습 내용
- 순서 속성을 사용하여 플렉스 요소의 순서를 변경할 수 있습니다.
- 요소 순서를 지정할 수 있는 다른 방법으로는 플렉스 방향 속성을 사용하여 순서를 지정할 수 있습니다.
단계별 지침
플렉스 컨테이너에서 콘텐츠의 순서를 변경하려면 먼저 간단한 레이아웃을 만듭니다. 이를 위해 순서를 바꾸려는 5개의 div 요소가 포함된 HTML 문서를 가져올 수 있습니다. div 요소의 숫자는 5에서 1까지의 현재 순서를 나타냅니다.
첫 번째 단계로 HTML 파일을 열고 구조를 삽입합니다. div 요소에는 L1, L2, L3, L4 및 L5 클래스로 레이블을 지정해야 합니다.
이제 기본 구조를 설정했으므로 요소의 초기 순서가 왼쪽에서 오른쪽으로 5에서 1이 되도록 하려고 합니다. 목표는 요소를 1에서 5까지 오름차순으로 표시하는 것입니다.
이를 달성하려면 각 요소에 대해 CSS의 order 속성을 사용합니다. 먼저 L1의 순서가 5, L2의 순서가 4, L5의 순서가 1이 되도록 순서 값을 설정합니다.
그런 다음 브라우저에 변경 사항을 저장하고 페이지를 새로 고침하면 이제 1부터 5까지 올바른 순서로 요소가 표시됩니다.
그러나 이미 언급했듯이 이 작업을 해결하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 위에서 설명한 순서 속성을 사용하는 것입니다. 이제 살펴볼 두 번째 방법은 flex-direction 속성을 사용하는 것입니다.
다른 가능성을 탐색하려면 먼저 CSS 파일에서 순서 속성을 주석 처리하여 이전 방법을 잃지 않고 새 방법을 시도할 수 있도록 합니다.
이제 컨테이너에 flex-direction 속성을 사용할 수 있습니다. 기본적으로 행으로 설정되어 있습니다. 이를 row-reverse로 변경하면 요소의 순서가 반전됩니다.
flex-direction을 행 반대로 변경한 후 파일을 다시 저장하고 브라우저에서 미리 보기를 로드합니다. 이제 순서 속성을 사용하지 않고도 요소가 1부터 5까지 올바른 순서로 표시됩니다.
열 역방향을 사용하여 요소를 세로로 정렬하는 또 다른 예도 시도해 볼 수 있습니다. 이렇게 하면 레이아웃이 아래에서 위로 정렬됩니다.
이제 플렉스 요소의 순서를 변경하는 두 가지 방법, 즉 순서 속성과 플렉스 방향 속성을 명확하게 이해하셨을 것입니다. 두 가지 방법 모두 콘텐츠 표시를 사용자 정의하는 다양한 접근 방식을 제공합니다.
요약
이 가이드에서는 플렉스 컨테이너에서 요소의 순서를 조작하는 방법을 배웠습니다. 이제 순서 속성을 사용하는 방법과 플렉스 방향 속성을 사용자 정의하여 요소의 표시를 가로 및 세로로 변경하는 방법을 알게 되었습니다. 이러한 접근 방식을 실험해 보면서 플렉스박스 레이아웃을 더 잘 이해해 보세요.
자주 묻는 질문
순서 속성을 사용하여 플렉스 요소의 순서를 변경하려면 어떻게 하나요? 각 요소에 순서 속성을 할당하고 값을 설정하여 원하는 순서로 표시할 수 있습니다.
순서 없이 순서를 변경하는 방법이 있나요?예. 플렉스 방향 속성을 행 반대로 또는 열 반대로 설정하여 순서를 변경할 수 있습니다.
두 가지 방법 중 어떤 방법을 사용하는 것이 더 좋은지는특정 요구 사항과 원하는 레이아웃 전략에 따라 다릅니다. 두 방법 모두 효과적입니다.
