Flexbox: 항목 정렬 및 자체 정렬을 통한 단일 정렬

이 가이드에서는 플렉스 컨테이너의 개별 요소의 정렬을 제어하기 위해 CSS에서 플렉스박스 속성 align-items 및 align-self를 사용하는 방법에 대해 알아봅니다. align-items는 컨테이너의 모든 직접 자식 요소의 정렬을 정의하는 반면, align-self는 각 자식 요소에 대해 개별적으로 다르게 설정할 수 있습니다. 마지막에는 이러한 속성을 효과적으로 사용하는 방법을 정확히 알 수 있도록 개념을 단계별로 살펴보겠습니다.

주요 학습 내용

• align-items는 플렉스 컨테이너에 있는 모든 자식 요소의 정렬을 정의합니다.
• align-self는 컨테이너 내의 개별 플렉스 요소를 개별적으로 정렬할 수 있습니다.
• Stretch는 align-items의 기본값으로, 자식들이 사용 가능한 공간을 채우도록 합니다.

단계별 지침

먼저 플렉스 컨테이너의 기본 구성이 어떻게 생겼는지, 정렬 항목을 사용하여 자식 항목의 정렬에 영향을 줄 수 있는 방법을 살펴보겠습니다.

여기에서는 display: flex; 컨테이너를 정의합니다. 이 컨테이너에서 정렬 항목을 사용하여 정렬을 설정할 수 있습니다(예: 스트레치, 즉 자식들이 컨테이너의 전체 높이 또는 너비에 걸쳐 늘어나는 것을 의미).

플렉스 시작, 중앙, 플렉스 끝 등 다양한 값을 정렬 항목에 사용할 수 있습니다. 이제 정렬 항목을 늘리도록 설정하면 모든 자식 요소가 컨테이너의 전체 공간을 채우는 것을 볼 수 있습니다. 이를 보여주기 위해 자식 요소에서 고정 너비를 제거하여 전체 공간을 차지하도록 합니다.

이제 항목 정렬을 가운데로 설정했다고 가정해 보겠습니다. 갑자기 요소가 더 이상 전체 공간을 차지하지 않고 필요한 최소 너비만 유지한다는 것을 알 수 있습니다. 이는 원하는 레이아웃을 얻기 위해 항목 정렬의 올바른 값이 얼마나 중요한지 보여줍니다.

고정 너비(예: 200px)를 다시 추가하면 요소가 더 넓게 유지되고 레이아웃이 안정적으로 유지되는 것을 볼 수 있습니다. 너비: 100%를 사용하여 비슷한 효과를 얻을 수도 있습니다.

이제 튜토리얼의 핵심인 align-self를 사용하는 방법에 대해 알아봅시다. 이 CSS 속성을 사용하면 부모 컨테이너의 설정에 관계없이 각 자식 요소의 개별 정렬을 설정할 수 있습니다. 따라서 align-items를 가운데로 설정한 다음 align-self에 대한 특정 설정을 추가합니다.

탐색 요소의 경우 맨 왼쪽에 정렬되기를 원합니다. 탐색에 대해 align-self: flex-start를 설정하고 변경 사항을 저장합니다. 탐색 요소가 맨 왼쪽으로 이동하는 것을 볼 수 있을 것입니다.

기본 요소(메인)의 경우 align-self: center를 설정합니다. 이 요소는 중앙에 유지되어야 하며 다른 요소와의 거리가 표시됩니다.

이제 바닥글을 align-self: flex-end로 하단에 정렬합니다. 이렇게 하면 모든 설정이 레이아웃에서 왼쪽 상단에서 오른쪽 하단으로 대각선을 이루게 됩니다.

이제 주 요소에 대해 align-self를 늘리도록 설정하면 가로축의 전체 공간을 차지하게 되어 다른 요소의 높이가 축소됩니다.

마찬가지로 컨테이너에 flex-direction: row를 설정하여 방향을 변경할 수도 있습니다. 개별 요소를 정렬하는 절차는 동일하게 유지되며 축만 변경됩니다. 위에서는 플렉스 시작으로 시작하여 스트레치 원리에 따라 요소를 정렬했습니다.

중요한 점은 각 요소에 개별 정렬을 지정하는 데 필요한 만큼 정렬 자체를 사용할 수 있으므로 컨테이너와 그 하위 요소의 레이아웃을 완벽하게 제어할 수 있다는 것입니다.

플렉스박스 속성을 원하는 방식으로 사용하면 다양한 화면 크기에 최적화된 시각적으로 매력적인 레이아웃을 만들 수 있습니다.

요약

이 가이드에서는 플렉스박스 속성인 정렬 항목과 정렬 자체에 대해 자세히 살펴보았습니다. 플렉스 컨테이너에서 컨테이너를 통해 전체적으로 또는 각 요소에 대해 개별적으로 요소의 정렬을 디자인하는 방법을 배웠습니다.