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

소개

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

👀 미리보기

🎯 과제

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

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

🏆 성과

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

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

프로젝트 구조 설정

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

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

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

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

Flex 컨테이너 설정

이 단계에서는 플래터에 과일을 정리하기 위해 flex 컨테이너를 설정하는 방법을 배우게 됩니다.

1. 코드 편집기에서 index.css 파일을 엽니다.
2. #pond 선택자 내부에 다음 CSS 속성을 추가합니다.

#pond {
  /* TODO: Add your CSS code here */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

display: flex 속성은 #pond 요소를 flex 컨테이너로 설정하여 flexbox 레이아웃을 사용하여 과일을 배치할 수 있도록 합니다.

flex-direction: column 속성은 flex 항목 (과일 컨테이너) 을 수직으로 쌓습니다.

flex-wrap: wrap 속성은 flex 항목이 현재 줄에 맞지 않으면 다음 줄로 래핑되도록 합니다.

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

요약

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