프로젝트 의 CSS 스킬 트리

시각적으로 매력적인 과일 플래터

초급

이 프로젝트에서는 CSS Flexbox 를 사용하여 시각적으로 매력적인 과일 플래터를 만드는 방법을 배웁니다. 목표는 동일한 색상의 과일을 해당 색상 보드의 중앙에 배치하여 조화롭고 미적으로 만족스러운 디스플레이를 만드는 것입니다.

cssweb-development

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

소개

이 프로젝트에서는 CSS Flexbox 를 사용하여 시각적으로 매력적인 과일 플래터를 만드는 방법을 배우게 됩니다. 목표는 동일한 색상의 과일을 해당 색상 보드의 중앙에 배치하여 조화롭고 미적으로 만족스러운 디스플레이를 만드는 것입니다.

👀 미리보기

완성된 과일 플래터 레이아웃

🎯 과제

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

  • 플래터에 과일을 정리하기 위해 flex 컨테이너를 설정하는 방법
  • 동일한 색상의 과일을 해당 색상 보드의 중앙에 배치하는 방법

🏆 성과

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

  • CSS Flexbox 를 사용하여 그리드와 유사한 레이아웃을 생성할 수 있습니다.
  • flex 컨테이너 내에서 요소를 중앙 정렬하고 정렬할 수 있습니다.
  • 웹 페이지에서 요소를 시각적으로 매력적인 방식으로 효과적으로 구성하고 표시할 수 있습니다.

강사

labby
Labby
Labby is the LabEx teacher.