Flexbox 채소 레이아웃 디자인 마스터하기 - 반응형 웹 디자인

소개

이 프로젝트에서는 Flexbox CSS 속성을 사용하여 특정 디자인으로 신선한 채소 레이아웃을 정렬하는 방법을 배우게 됩니다. 이 프로젝트를 완료하면 반응형 및 동적 웹 디자인을 만드는 강력한 도구인 Flexbox 를 사용하여 시각적으로 매력적인 레이아웃을 만들 수 있습니다.

👀 미리보기

Flexbox vegetable layout example

🎯 과제

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

Flexbox CSS 속성을 사용하여 레이아웃을 설정하는 방법
레이아웃 내에서 원하는 위치에 채소를 정렬하는 방법
display, justify-content, align-items, align-self와 같은 Flexbox 속성을 사용하여 원하는 레이아웃을 달성하는 방법

🏆 성과

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

반응형 및 동적 웹 디자인을 만드는 강력한 도구인 Flexbox 를 사용하여 시각적으로 매력적인 레이아웃을 만들 수 있습니다.
Flexbox CSS 속성을 사용하여 유연하고 반응형 레이아웃을 만드는 방법을 이해할 수 있습니다.
Flexbox 컨테이너 내에서 요소를 정렬하고 분산하는 기술을 적용할 수 있습니다.
특정 디자인을 달성하기 위해 Flexbox 레이아웃 내에서 요소를 배치하는 전략을 구현할 수 있습니다.

프로젝트 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

다음 파일과 디렉토리가 포함된 프로젝트 폴더를 엽니다.
- css/style.css
- index.html
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단에서 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

Unfinished project setup screen

레이아웃 설정

이 단계에서는 Flexbox CSS 속성을 사용하여 채소 배열의 레이아웃을 설정하는 방법을 배우게 됩니다.

편집기에서 style.css 파일을 엽니다.
#box1 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
이렇게 하면 #box1 컨테이너 내에서 콘텐츠가 가로 및 세로로 모두 가운데 정렬됩니다.
#box2 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box2 {
  display: flex;
  justify-content: space-between;
}
```
이렇게 하면 #box2 컨테이너의 항목이 균등하게 분산되고 항목 사이에 공간이 생깁니다.
#box2 .item:nth-child(2) 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box2 .item:nth-child(2) {
  align-self: flex-end;
}
```
이렇게 하면 #box2의 두 번째 항목이 컨테이너 하단에 정렬됩니다.

채소 정렬

이 단계에서는 Flexbox CSS 속성을 사용하여 채소를 원하는 위치에 배치하는 방법을 배우게 됩니다.

#box3 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
```
이렇게 하면 #box3의 항목에 대한 행 레이아웃이 생성되고 항목이 균등하게 분산되며 항목 사이에 공간이 생깁니다.
#box3 .item:nth-child(2) 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box3 .item:nth-child(2) {
  align-self: center;
}
```
이렇게 하면 #box3의 두 번째 항목이 컨테이너 중앙에 정렬됩니다.
#box3 .item:nth-child(3) 선택자 안에 다음 CSS 속성을 추가합니다.
```
#box3 .item:nth-child(3) {
  align-self: flex-end;
}
```
이렇게 하면 #box3의 세 번째 항목이 컨테이너 하단에 정렬됩니다.

이 단계를 완료하면 style.css 파일이 제공된 솔루션과 일치해야 하며, 채소의 레이아웃이 완성된 예시와 일치해야 합니다.

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

Image Description

요약

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