유연 카드 레이아웃 | CSS Flexbox 튜토리얼 - 반응형 웹 디자인

소개

이 프로젝트에서는 CSS Flexbox 를 사용하여 유연한 카드 레이아웃을 만드는 방법을 배우게 됩니다. 유연한 카드 레이아웃은 웹 페이지 및 애플리케이션에서 흔히 사용되는 디자인 패턴으로, 콘텐츠가 반응형이고 적응 가능한 그리드와 같은 구조로 표시됩니다.

유연한 카드 레이아웃 미리보기

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

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

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

시작하려면 편집기를 엽니다. 편집기에서 flexible_card.html과 flexible_card.css 두 개의 파일을 볼 수 있습니다.

오른쪽 하단 모서리에 있는 "Go Live"를 클릭하여 포트 8080 을 열고 브라우저에서 flexible_card.html 페이지를 미리 봅니다. 결과는 다음과 같습니다.

미완성 프로젝트 미리보기

이 단계에서는 원하는 효과를 얻기 위해 레이아웃에 flex 요소를 사용하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요.

업데이트된 CSS 코드는 다음과 같아야 합니다.

section {
  display: flex; /* 섹션을 유연한 컨테이너로 만듭니다 */
  /* 기타 스타일 */
}

업데이트된 CSS 코드는 다음과 같아야 합니다.

section {
  display: flex;
  flex-wrap: wrap; /* flex 항목이 다음 줄로 래핑되도록 허용합니다 */
  /* 기타 스타일 */
}

flex 항목을 주 축을 따라 균등하게 분배하고 항목 사이에 동일한 간격을 두기 위해 section 선택자에 justify-content: space-between; 속성을 추가합니다.

업데이트된 CSS 코드는 다음과 같아야 합니다.

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* flex 항목을 주 축을 따라 균등하게 분배합니다 */
  /* 기타 스타일 */
}

이 세 단계를 완료하면 flexible_card.css 파일은 다음과 같아야 합니다.

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

이제 유연한 카드 레이아웃이 완료되어 예제에 표시된 완성된 결과와 일치해야 합니다.

완성된 유연한 카드 레이아웃

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