CSS 및 HTML의 Flexbox : 주축 정렬 지침

이 가이드에서는 Flexbox를 사용하여 플렉스 컨테이너의 요소를 주축을 따라 정렬하는 방법을 배웁니다. 횡축을 따라 정렬하는 방법은 이미 다루었지만 주축도 마찬가지로 중요합니다. Flexbox 기술은 요소의 정렬을 유연하고 사용자 정의할 수 있는 여러 가지 방법을 제공합니다. 자세히 살펴보겠습니다!

주요 결과

• 주축의 정렬은 콘텐츠 맞춤 속성을 사용하여 수행됩니다.
• 중앙, 플렉스 시작, 플렉스 끝, 공간 사이 및 공간 주변과 같은 다양한 값을 사용하여 레이아웃을 사용자 지정할 수 있습니다.
• 플렉스박스 설정은 원하는 방향으로 요소를 배열하는 데 직접적인 영향을 미칩니다.

단계별 지침

1. 플렉스 컨테이너 초기화

플렉스 컨테이너를 만들고 플렉스 방향을 설정하는 것으로 시작하세요. 이 예에서는 플렉스 방향을 행으로 설정했습니다. 이는 요소가 왼쪽에서 오른쪽으로 일렬로 정렬됨을 의미합니다.

2. 요소의 기본 정렬

특별한 스타일 조정 없이 컨테이너에 요소를 배치하면 기본적으로 컨테이너 상단에 정렬된 것을 볼 수 있습니다. 이를 시각화하기 위해 너비를 100픽셀로 지정할 수 있습니다.

3. 중앙 정렬

요소를 가운데에 정렬하려면 값 가운데에 CSS 속성 justify-content를 사용합니다. 이렇게 하면 요소가 컨테이너의 중앙에 정렬되어 매우 매력적인 배열이 만들어집니다.

4. 끝에 요소 정렬

컨테이너 끝에 요소를 정렬하려면 justify-content에 flex-end 값을 사용하면 됩니다. 이렇게 하면 요소가 컨테이너의 오른쪽 끝으로 이동합니다.

5. 시작 시 요소 정렬

사용자 정의가 없는 기본 동작은 플렉스 시작으로, 요소가 컨테이너의 시작 부분에 유지됩니다. 이 설정은 컨테이너 상단에 요소를 명확하고 깔끔하게 배열하려는 경우에 유용합니다.

6. 플렉스 방향 변경

플렉스 방향을 열로 변경하면 주 축이 가로에서 세로로 변경됩니다. 즉, 이제 요소가 위에서 아래로 정렬됩니다.

7. 세로 정렬로 요소 중앙 배치

이 새로운 정렬에서는 콘텐츠 맞춤: 가운데를 사용하여 요소를 가운데에 배치할 수도 있습니다. 이 설정은 모든 요소가 컨테이너의 중앙에 표시되도록 합니다.

8. 하단에 정렬

요소를 컨테이너 하단에 배치하려면 플렉스 끝을 다시 설정하면 됩니다. 이렇게 하면 요소가 컨테이너 하단에 배치됩니다.

9. 공간 속성 사용

Flexbox에서는 공간 사이, 공간 주변 및 공간 균등 속성을 사용하여 요소 사이의 공간을 제어할 수도 있습니다. 이러한 속성은 사용 가능한 공간을 다양한 방식으로 분배합니다.

10. 스페이스-비트윈 사용

justify-content: space-between을 사용하면 첫 번째 요소는 컨테이너의 맨 위에, 마지막 요소는 맨 아래에 유지되어 요소 사이의 공간이 균등하게 분배됩니다.

11. 스페이스-어라운드 사용

스페이스-어라운드를 사용하면 각 요소 주위에 동일한 양의 공간이 만들어집니다. 이 공간은 컨테이너 중앙에 표시되며 요소는 고르게 분포되어 있습니다.

12. 공백을 균등하게 사용

공백을 균등하게 사용하면 요소와 컨테이너 가장자리 사이의 모든 곳에 동일한 공간이 확보됩니다.

요약

이 가이드에서는 Flexbox를 사용하여 주축에서 정렬을 설정하는 방법을 배웠습니다. 콘텐츠 맞춤을 사용하면 요소의 위치를 매우 유연하게 조정할 수 있습니다. 또한 원하는 레이아웃을 만드는 데 도움이 되는 다양한 속성에 대해 배웠습니다. 이 지식을 활용하여 매력적이고 사용자 친화적인 디자인을 만들어 보세요!