프로젝트 의 CSS 스킬 트리

CSS Flexbox 를 활용한 과일 배치

초급

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

cssweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

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

👀 미리보기

최종 과일 배치 레이아웃

🎯 과제

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

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

🏆 성과

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

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

강사

labby
Labby
Labby is the LabEx teacher.