CSS Flexbox 를 사용한 과일 배치

소개

이 프로젝트에서는 CSS Flexbox 를 사용하여 과일 배치 레이아웃을 만드는 방법을 배우게 됩니다. align-self 및 order 속성을 사용하여 그릇에 과일을 배치하고 정렬하는 방법을 배우게 됩니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

• 과일 배치를 위한 HTML 구조 설정 방법
• 교차 축을 따라 개별 flex 항목을 정렬하는 데 align-self 속성을 사용하는 방법
• flex 항목의 순서를 변경하는 데 order 속성을 사용하는 방법
• Flexbox 를 사용하여 원하는 레이아웃으로 과일을 정렬하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• CSS Flexbox 를 사용하여 반응형의 시각적으로 매력적인 레이아웃을 만들 수 있습니다.
• align-self 및 order 속성을 적용하여 요소의 위치 및 배열을 제어할 수 있습니다.
• 원하는 디자인을 달성하기 위해 CSS 선택자와 속성을 사용할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하는 방법을 배우게 됩니다.

시작하려면 편집기를 엽니다. 편집기에서 index.html, style.css 및 images 파일이 표시되어야 합니다.

프로젝트를 실행하려면 WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하십시오.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

과일 배치 스타일 지정

이 단계에서는 align-self 및 order 속성을 사용하여 과일 배치를 스타일링하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

1. 편집기에서 index.css 파일을 엽니다.
2. .yellow 클래스를 타겟팅하고 align-self 속성을 flex-end로 설정합니다.
3. .yellow 클래스의 order 속성을 1로 설정합니다.

이제 index.css 파일은 다음과 같아야 합니다:

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

align-self 속성은 교차 축을 따라 개별 flex 항목을 정렬하는 데 사용되며, align-items 값을 재정의합니다. 이 경우, 노란색 과일을 그릇의 하단에 정렬하기 위해 flex-end로 설정했습니다.

order 속성은 flex 항목의 순서를 변경하는 데 사용됩니다. 노란색 과일에 대해 1로 설정하여 flex 컨테이너의 끝에 배치합니다.

완성된 결과는 다음과 같습니다:

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.