반응형 주사위 레이아웃 | Flexbox CSS 튜토리얼

소개

이 프로젝트에서는 Flexbox CSS 를 사용하여 반응형 주사위 레이아웃을 만드는 방법을 배우게 됩니다. 목표는 특정 레이아웃 요구 사항에 따라 다양한 점 패턴을 가진 주사위 세트를 정렬하는 것입니다.

👀 미리보기

🎯 과제

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

HTML 및 CSS 를 사용하여 주사위 레이아웃의 기본 구조를 설정하는 방법
justify-content, align-items, flex-direction, align-self와 같은 Flexbox 속성을 사용하여 각 주사위 내의 점을 배치하는 방법
flex-wrap 및 flex-basis와 같은 고급 Flexbox 기술을 구현하여 원하는 레이아웃을 만드는 방법

🏆 성과

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

Flexbox 를 사용하여 복잡하고 반응형 레이아웃을 만들 수 있습니다.
다양한 Flexbox 속성과 이를 효과적으로 적용하는 방법을 이해할 수 있습니다.
단계별 지침을 따르고 필요한 레이아웃을 구현하여 문제 해결 능력을 개발할 수 있습니다.

주사위 1 레이아웃

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

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

이 단계에서는 justify-content 및 align-items 속성을 사용하여 첫 번째 주사위 내의 점을 배치합니다.

코드 편집기에서 index.html 파일을 엽니다.
<style> 섹션에서 .div1 클래스에 대한 다음 규칙을 추가합니다.

.div1 {
  justify-content: center;
  align-items: center;
}

justify-content: center는 점을 가로로 중앙 정렬하고, align-items: center는 세로로 중앙 정렬합니다.

✨ 솔루션 확인 및 연습

주사위 2 레이아웃

이 단계에서는 justify-content, flex-direction, 및 align-items 속성을 사용하여 두 번째 주사위 내의 점을 배치합니다.

<style> 섹션에서 .div2 클래스에 대한 다음 규칙을 추가합니다.

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

justify-content: space-around는 주축 (가로) 을 따라 점을 균등하게 분배하고, flex-direction: column은 점을 세로로 쌓으며, align-items: center는 주사위 내에서 점을 중앙 정렬합니다.

✨ 솔루션 확인 및 연습

주사위 3 레이아웃

이 단계에서는 justify-content, align-self, 및 align-items 속성을 사용하여 세 번째 주사위 내의 점을 배치합니다.

<style> 섹션에서 .div3 클래스에 대한 다음 규칙을 추가합니다.

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

justify-content: space-around는 주축 (가로) 을 따라 점을 균등하게 분배하고, align-items: center는 세로로 중앙 정렬하며, padding: 10px는 주사위 주변에 약간의 간격을 추가합니다.

align-self 속성은 첫 번째 점과 마지막 점을 각각 주사위의 상단과 하단에 배치하는 데 사용됩니다.

✨ 솔루션 확인 및 연습

주사위 4, 5, 6, 7, 그리고 9 레이아웃

이 단계에서는 justify-content, align-self, flex-direction, 및 align-items 속성을 사용하여 나머지 주사위 내의 점을 배치합니다.

<style> 섹션에서 .div4 클래스에 대한 다음 규칙을 추가합니다.

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

내부 <div> 요소는 점을 가로로 그룹화하는 데 사용되며, justify-content: space-around는 점을 균등하게 분배합니다. align-self: center 속성은 각 행 내에서 개별 점을 중앙 정렬하는 데 사용됩니다.

✨ 솔루션 확인 및 연습

주사위 8 레이아웃

이 마지막 단계에서는 justify-content, align-self, flex-wrap, 및 flex-basis 속성을 사용하여 여덟 번째 주사위 내의 점을 배치합니다.

<style> 섹션에서 .div8 클래스에 대한 다음 규칙을 추가합니다.

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

flex-wrap: wrap 속성은 점이 한 줄에 맞지 않으면 다음 줄로 래핑되도록 허용합니다. padding: 2px는 주사위 주변에 약간의 간격을 추가합니다.

내부 <div> 요소는 점을 가로로 그룹화하는 데 사용되며, justify-content: space-between은 점을 균등하게 분배하고 align-items: center는 점을 세로로 중앙 정렬합니다. flex-basis: 100%는 각 행이 주사위의 전체 너비를 차지하도록 보장합니다.

이 단계를 따르면 요구 사항에 따라 Flex Dice 레이아웃을 성공적으로 구현했습니다.

✨ 솔루션 확인 및 연습