이 튜토리얼에서는 CSS Flexbox를 사용하여 세 개의 열과 세 개의 행으로 유연한 레이아웃을 만드는 방법을 보여드리겠습니다. 이 레이아웃은 구현하기 쉬울 뿐만 아니라 사용 가능한 화면 공간에 따라 동적으로 조정됩니다. Flexbox는 반응형 디자인 제작을 크게 간소화하며 플로트나 인라인 블록과 같은 오래된 레이아웃 기술을 사용할 필요가 없습니다.
주요 결과
- Flexbox를 사용하면 단 몇 줄의 CSS로 레이아웃을 디자인할 수 있습니다.
- 아래에서는 3열 3행 레이아웃을 만들고 사용자 정의하는 방법을 단계별로 보여드리겠습니다.
단계별 가이드
1단계: HTML 구조 초기화하기
먼저 세 개의 div 요소로 웹사이트의 기본 구조를 만듭니다. 각 div에는 "Box" 클래스가 할당됩니다. 이 요소들은 나중에 플렉스 컨테이너 안에 배열됩니다.
2단계: 상자 스타일 지정
이제 CSS를 추가하여 상자에 패딩과 테두리를 사용하여 더 가벼운 디자인을 부여합니다. 상자 크기: 테두리 상자; 를 사용하면 치수를 더 쉽게 처리할 수 있습니다.
3단계: 플렉스 컨테이너 설정
이제 부모 컨테이너를 플렉스 컨테이너로 정의해야 합니다. 디스플레이: 플렉스; 및 플렉스 방향: 행; 을 설정하여 상자를 일렬로 정렬합니다. 각 상자 요소는 사용 가능한 공간을 균등하게 차지하도록 플렉스 값을 1로 설정해야 합니다.
4단계: 플렉스 값 조정하기
모든 상자의 값이 flex: 1; 이므로 공간은 세 상자 모두에 균등하게 분배됩니다. 브라우저 창의 크기를 변경하여 이를 테스트할 수 있습니다.
5단계: 플렉스 속성 변경
플렉스 매개 변수를 더 정확하게 제어하려면 예를 들어 특정 상자에 대해 flex-grow: 0; 을 설정할 수 있습니다. 이렇게 하면 컨테이너가 확장될 때 이러한 상자가 추가 공간을 차지하지 않습니다.
6단계: 플렉스-베이스 조정
기본 너비를 설정하려는 상자의 경우 flex-base: 50px; 를 사용할 수 있습니다. 이렇게 하면 상자의 너비가 고정되고 나머지 공간을 다른 상자에 유연하게 분배할 수 있습니다.
7단계: 상자의 높이 설정
플렉스 기준을 조정하여 여러 상자에 대해 특정 높이를 설정할 수 있습니다. 예를 들어, 상단 상자에 대해 플렉스 기준: 50px; 를 설정하고 하단 상자에 대해 플렉스 기준: 100px; 를 설정합니다.
8단계: 컨테이너 높이 조정하기
상자가 적절하게 조정되도록 하려면 플렉스 컨테이너의 높이도 제한해야 합니다. 예를 들어, 중앙 상자가 나머지 공간을 차지하도록 높이: 400px; 를 설정합니다.
9단계: 레이아웃 디자인 최적화하기
레이아웃을 더 개선하려면 필요에 따라 레이아웃의 플렉스박스 속성을 조정할 수 있습니다. 콘텐츠 맞춤 또는 항목 정렬만 변경해도 레이아웃 디자인에 큰 차이를 만들 수 있습니다.
10단계: 반응형 디자인 테스트
레이아웃이 모바일 디바이스에서도 잘 보이는지 확인하세요. 브라우저의 개발자 도구를 사용하여 다양한 화면 크기를 시도하고 그에 맞게 반응하는지 확인하세요.
요약
이제 CSS 및 HTML에서 Flexbox로 유연한 레이아웃을 만들고 사용자 정의하는 방법을 배웠습니다. 플렉스 값을 조정하고 특정 높이와 너비를 설정하면 반응형 디자인을 쉽게 구현할 수 있습니다. Flexbox는 전체 프로세스를 크게 간소화합니다.
자주 묻는 질문
Flexbox는 어떻게 작동하나요?Flexbox는 사용자 정의하기 쉬운 유연한 레이아웃 구조를 가능하게 하는 CSS 모듈입니다.
Flexbox의 가장 중요한 속성은 무엇인가요?가장 중요한 속성은 디스플레이, 플렉스 방향, 플렉스 성장, 플렉스 축소 및 플렉스 기반입니다.
레이아웃을 반응형으로 만들려면 어떻게 하나요? 백분율 값 또는 유연한 단위를 사용하고 플렉스박스 속성을 사용자 지정하여 레이아웃을 반응형으로 만들 수 있습니다.
