소개
이 랩에서는 유연하고 반응형 웹 디자인을 만들기 위한 강력한 CSS 레이아웃 기술인 Flexbox 의 align-content 속성을 탐구합니다. 단계별 접근 방식을 통해 여러 항목이 있는 Flexbox 컨테이너를 설정하고, 다양한 정렬 전략을 적용하며, align-content 속성이 여러 줄 Flex 레이아웃에 어떻게 영향을 미치는지 배우게 됩니다.
이 랩은 HTML 구조를 만들고, CSS 스타일을 추가하고, 다양한 align-content 값을 실험하는 과정을 안내합니다. 이 연습을 마치면 여러 줄에 걸쳐 Flex 항목의 분포와 정렬을 제어하는 실질적인 기술을 습득하여 더욱 정교하고 시각적으로 매력적인 웹 페이지 레이아웃을 만들 수 있습니다.
Flexbox 컨테이너를 위한 HTML 구조 설정
이 단계에서는 align-content 속성을 시연할 Flexbox 컨테이너의 기본 HTML 구조를 만드는 방법을 배웁니다. 다양한 정렬 기술을 보여주기 위해 여러 Flex 항목이 있는 간단한 HTML 파일부터 시작합니다.
WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 새 HTML 파일을 만듭니다. Flex 컨테이너와 여러 자식 요소가 있는 기본 구조를 만들 것입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Align-Content Example</title>
<style>
/* CSS styles will be added in the next step */
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</body>
</html>
HTML 구조를 자세히 살펴보겠습니다.
- Flex 컨테이너 역할을 할 클래스
flex-container가 있는<div>를 만들었습니다. - 컨테이너 내부에 클래스
flex-item이 있는 여섯 개의<div>요소를 추가했습니다. - 이 구조를 통해
align-content속성이 여러 줄의 Flex 항목에서 어떻게 작동하는지 시연할 수 있습니다.
브라우저에서 볼 때의 예시 출력:
[Basic layout with 6 items in a single line or multiple lines]
이해해야 할 핵심 사항은 다음과 같습니다.
- 컨테이너는 여러 Flex 항목을 포함합니다.
align-content가 여러 줄 레이아웃에 미치는 영향을 보여주기 위해 여러 항목을 사용합니다.- 기본 구조는 다음 단계에서 스타일 지정을 할 준비가 되었습니다.
Flex 컨테이너를 위한 기본 CSS 스타일링 생성
이 단계에서는 HTML 컨테이너를 Flexbox 레이아웃으로 변환하고 align-content 속성을 탐색할 준비를 하기 위해 CSS 스타일링을 추가합니다. WebIDE 에서 index.html 파일을 열고 <style> 섹션을 다음 CSS 로 업데이트합니다.
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid #333;
background-color: #f0f0f0;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
</style>
핵심 CSS 속성을 자세히 살펴보겠습니다.
display: flex;는 컨테이너를 Flex 컨테이너로 만듭니다.flex-wrap: wrap;은 항목이 여러 줄로 래핑되도록 허용합니다.width및height는 고정된 컨테이너 크기를 설정합니다..flex-item스타일은 시각적으로 구별되는 Flex 항목을 만듭니다.justify-content및align-items는 각 항목 내에서 텍스트를 가운데 정렬합니다.
브라우저에서 볼 때의 예시 출력:
[A grid-like layout with 6 green boxes, each containing centered text]
이해해야 할 핵심 사항은 다음과 같습니다.
- Flexbox 는
display: flex;로 활성화됩니다. flex-wrap은 여러 줄 레이아웃을 활성화합니다.- 각 항목은 시각적으로 구별되도록 스타일이 지정됩니다.
- 컨테이너는
align-content탐색을 위해 준비되었습니다.
Stretch align-content 속성 구현
이 단계에서는 다중 행 Flex 컨테이너의 기본 동작인 align-content: stretch 속성을 탐색합니다. index.html 파일을 열고 .flex-container CSS 를 업데이트하여 stretch 정렬을 명시적으로 설정합니다.
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid #333;
background-color: #f0f0f0;
align-content: stretch; /* Explicitly set stretch alignment */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
</style>
align-content: stretch 속성은 다음을 수행합니다.
- Flex 라인 사이와 주변에 여분의 공간을 균등하게 분배합니다.
- Flex 라인을 컨테이너의 교차 축을 채우도록 늘립니다.
- Flex 항목이 전체 컨테이너 높이를 사용하도록 확장되도록 합니다.
- 여러 줄이 있는 경우 이것이 기본 동작입니다.
예시 출력 시각화:
[Flex container with items stretched to fill available vertical space]
+-------------------+
| Item 1 Item 2 |
| Item 3 Item 4 |
| Item 5 Item 6 |
+-------------------+
이해해야 할 핵심 사항:
align-content는 Flex 라인의 정렬을 제어합니다.stretch는 여러 줄 Flex 컨테이너의 기본값입니다.- Flex 라인이 전체 컨테이너 높이를 사용하도록 합니다.
- 반응형이고 균등하게 분배된 레이아웃을 만드는 데 도움이 됩니다.
다양한 align-content 값 실험
이 단계에서는 다중 행 컨테이너에서 Flex 항목의 레이아웃에 어떤 영향을 미치는지 이해하기 위해 다양한 align-content 속성 값을 탐색합니다. CSS 를 업데이트하여 다양한 정렬 옵션을 실험해 보세요.
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid #333;
background-color: #f0f0f0;
/* Uncomment different align-content values to see their effects */
/* align-content: stretch; */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
</style>
다음 align-content 값을 탐색해 보세요.
stretch(기본값): 컨테이너를 채우도록 라인을 늘립니다.flex-start: 라인을 컨테이너의 시작 부분에 정렬합니다.flex-end: 라인을 컨테이너의 끝 부분에 정렬합니다.center: 컨테이너 내에서 라인을 가운데 정렬합니다.space-between: 라인을 그 사이에 동일한 간격으로 분배합니다.space-around: 라인을 그 주위에 동일한 간격으로 분배합니다.
예시 출력 시각화:
stretch: flex-start: flex-end:
+----------+ +----------+ +----------+
| 1 2 3 | | 1 2 3 | | 1 2 3 |
| 4 5 6 | | | | |
+----------+ +----------+ +----------+
center: space-between: space-around:
+----------+ +----------+ +----------+
| 1 2 3 | | 1 2 3 | | 1 2 3 |
| 4 5 6 | | | | |
+----------+ +----------+ +----------+
이해해야 할 핵심 사항:
- 다양한
align-content값을 주석 해제합니다. - 컨테이너 내에서 라인이 어떻게 배치되는지 관찰합니다.
- 각 정렬 옵션의 영향을 이해합니다.
Multi-Line Flex 레이아웃 정렬 이해
이 단계에서는 다중 행 Flex 레이아웃 정렬이 어떻게 작동하는지 보여주는 포괄적인 예제를 만들 것입니다. HTML 과 CSS 를 업데이트하여 flex-wrap과 align-content 간의 관계를 탐색합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi-Line Flex Layout Alignment</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 400px;
border: 3px solid #333;
background-color: #f0f0f0;
align-content: center; /* Try different values */
}
.flex-item {
width: 120px;
height: 120px;
margin: 5px;
background-color: #4caf50;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</body>
</html>
이해해야 할 핵심 개념:
flex-wrap: wrap은 항목이 여러 줄로 흐르도록 허용합니다.align-content는 이러한 여러 줄의 정렬을 제어합니다.- 다양한
align-content값은 고유한 레이아웃 패턴을 생성합니다.
예시 레이아웃 시각화:
align-content: center align-content: space-between
+----------------+ +----------------+
| 1 2 3 | | 1 2 3 |
| 4 5 6 | | |
+----------------+ | 4 5 6 |
+----------------+
다음 align-content 값을 실험해 보세요.
center: 라인을 수직으로 가운데 정렬합니다.space-between: 라인을 동일한 간격으로 분배합니다.space-around: 라인 주위에 동일한 간격을 추가합니다.flex-start: 라인을 맨 위로 정렬합니다.flex-end: 라인을 맨 아래로 정렬합니다.
요약
이 랩에서는 참가자들이 여러 Flex 항목을 사용하여 구조화된 HTML 레이아웃을 생성함으로써 Flexbox 의 align-content 속성을 탐구합니다. 랩은 Flex 컨테이너와 6 개의 자식 요소를 갖춘 기본 HTML 파일을 설정하는 것으로 시작하여 다중 행 Flex 레이아웃 정렬을 실험하는 데 필요한 기본적인 구조를 보여줍니다.
단계별 접근 방식을 통해 학습자는 CSS 스타일을 적용하여 컨테이너를 유연한 레이아웃으로 변환하고, 다양한 align-content 값을 구현하며, 이 속성이 다중 행 Flex 컨테이너 내에서 Flex 라인의 정렬을 제어하는 방식을 이해하게 됩니다. 이 실습은 Flex 레이아웃을 조작하는 실질적인 경험을 제공하여 개발자가 고급 Flexbox 위치 지정 기술에 대한 통찰력을 얻도록 돕습니다.
