소개
이 랩에서는 Flexbox 의 align-items 속성을 탐구합니다. Flexbox 는 컨테이너 내에서 flex 항목의 수직 정렬을 제어하기 위한 강력한 CSS 레이아웃 기술입니다. 일련의 실습을 통해 stretch, flex-start, flex-end, center, 그리고 baseline과 같은 다양한 정렬 값을 사용하여 flex 항목을 조작하는 방법을 배우게 됩니다.
이 랩은 HTML 구조를 생성하고, 다양한 정렬 전략을 적용하며, align-items 속성이 flex 컨테이너의 레이아웃에 미치는 영향을 이해하도록 안내합니다. 실용적인 예제를 통해 실험함으로써 반응형 웹 디자인에서 요소의 위치 및 크기를 효과적으로 제어하는 방법에 대한 통찰력을 얻을 수 있습니다.
align-items 속성 기본 이해
이 단계에서는 Flexbox 의 align-items 속성의 기본적인 개념을 배우게 됩니다. 이는 flex 컨테이너 내에서 flex 항목의 수직 정렬을 제어하는 데 매우 중요합니다.
align-items 속성은 flex 항목이 교차 축 (행 레이아웃에서는 수직으로, 열 레이아웃에서는 수평으로) 을 따라 어떻게 정렬될지를 정의합니다. 기본적으로 flex 항목은 컨테이너의 교차 축을 채우도록 늘어납니다.
align-items의 기본 사용법을 보여주기 위해 간단한 HTML 및 CSS 예제를 만들어 보겠습니다.
<!doctype html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
border: 2px solid blue;
}
.flex-item {
width: 100px;
background-color: lightgreen;
margin: 5px;
}
</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>
</body>
</html>
이 예제에서는 세 개의 flex 항목이 있는 flex 컨테이너를 만들었습니다. 기본적으로 align-items 속성은 stretch로 설정되어 있으며, 이는 항목이 컨테이너의 높이를 채우도록 늘어난다는 것을 의미합니다.
주요 align-items 값은 다음과 같습니다.
stretch(기본값): 항목이 컨테이너를 채우도록 늘어납니다.flex-start: 항목이 교차 축의 시작 부분에 정렬됩니다.flex-end: 항목이 교차 축의 끝 부분에 정렬됩니다.center: 항목이 교차 축을 따라 가운데 정렬됩니다.baseline: 항목이 텍스트 기준선 (text baseline) 을 기준으로 정렬됩니다.
기본 stretch 정렬의 예시 출력:
[Item 1][Item 2][Item 3]
------ ------ ------
(전체 (전체 (전체
높이) 높이) 높이)
WebIDE 를 열고 ~/project 디렉토리에 flexbox-align.html이라는 새 파일을 만듭니다. 위의 HTML 코드를 이 파일에 복사하여 저장합니다. 그런 다음 웹 브라우저에서 파일을 열어 기본 정렬이 어떻게 작동하는지 확인할 수 있습니다.
Flexbox 레이아웃을 위한 HTML 구조 생성
이 단계에서는 Flexbox 레이아웃을 설정하는 기본적인 HTML 구조를 만드는 방법을 배우게 됩니다. 여러 flex 항목이 있는 보다 구조화된 HTML 문서를 생성하여 이전 단계를 기반으로 구축할 것입니다.
WebIDE 를 열고 ~/project 디렉토리에 flexbox-layout.html이라는 새 파일을 만듭니다. 다음 HTML 구조를 사용하여 전형적인 Flexbox 레이아웃을 시연합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Layout Example</title>
<style>
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</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>
</body>
</html>
이 Flexbox 레이아웃의 주요 구성 요소를 살펴보겠습니다.
.flex-container는display: flex를 가지고 있으며, 이는 Flexbox 레이아웃을 활성화합니다.- 일관된 스타일을 가진 5 개의 flex 항목을 추가했습니다.
- 컨테이너는 밝은 회색 배경과 패딩을 가지고 있습니다.
- 각 항목은 고정된 너비와 높이를 가지며, 녹색 배경을 가지고 있습니다.
예시 출력은 다음과 같습니다.
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
녹색 녹색 녹색 녹색 녹색
상자 상자 상자 상자 상자
파일을 저장하고 웹 브라우저에서 열어 Flexbox 레이아웃이 어떻게 작동하는지 확인하십시오. 항목이 자동으로 동일한 간격으로 수평으로 배치되는 것을 확인하십시오.
Flex 항목에 Stretch 정렬 적용
이 단계에서는 Flexbox 의 기본 stretch 정렬을 살펴보고, 이것이 flex 항목의 크기를 교차 축을 따라 어떻게 자동으로 조정하는지 이해할 것입니다.
이전 단계에서 생성한 flexbox-layout.html 파일을 엽니다. stretch 정렬을 더 명확하게 시연하기 위해 CSS 를 수정하겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stretch Alignment in Flexbox</title>
<style>
.flex-container {
display: flex;
height: 300px; /* Fixed container height */
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
/* No explicit height set */
}
</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>
</body>
</html>
stretch 정렬에 대한 주요 사항:
- 기본적으로
align-items: stretch가 flex 컨테이너에 적용됩니다. - Flex 항목은 컨테이너의 높이를 채우도록 자동으로 늘어납니다.
- 이는 항목에 명시적인 높이가 설정되지 않은 경우에 발생합니다.
- 늘어짐은 교차 축 (행 레이아웃에서는 수직으로) 을 따라 발생합니다.
예시 출력 시각화:
[Item 1][Item 2][Item 3][Item 4][Item 5]
↑ ↑ ↑ ↑ ↑
전체 높이 전체 높이 전체 높이 전체 높이 전체 높이
로 늘어남 로 늘어남 로 늘어남 로 늘어남 로 늘어남
개별 항목의 높이가 지정되지 않았음에도 불구하고 항목이 flex 컨테이너의 300px 높이를 채우도록 자동으로 확장되는 것을 확인하십시오. 이것이 Flexbox 의 기본 stretch 동작입니다.
파일을 저장하고 웹 브라우저에서 열어 stretch 정렬이 어떻게 작동하는지 확인하십시오. 각 항목은 컨테이너의 전체 높이가 되어 균일하고 늘어난 모양을 만듭니다.
다양한 Align-Items 값 실험
이 단계에서는 다양한 align-items 값을 살펴보고, 이것이 컨테이너 내에서 flex 항목의 수직 정렬에 어떤 영향을 미치는지 확인할 것입니다.
flexbox-layout.html 파일을 열고 CSS 를 업데이트하여 다양한 align-items 값을 시연합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Align-Items Experiment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Different align-items classes */
.stretch {
align-items: stretch;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
</style>
</head>
<body>
<div class="flex-container stretch">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-start">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container flex-end">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container center">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<div class="flex-container baseline">
<div class="flex-item" style="font-size: 16px;">Item 1</div>
<div class="flex-item" style="font-size: 24px;">Item 2</div>
<div class="flex-item" style="font-size: 32px;">Item 3</div>
</div>
</body>
</html>
주요 align-items 값 설명:
stretch(기본값): 항목이 컨테이너 높이를 채우도록 늘어납니다.flex-start: 항목이 컨테이너 상단에 정렬됩니다.flex-end: 항목이 컨테이너 하단에 정렬됩니다.center: 항목이 수직으로 가운데 정렬됩니다.baseline: 항목이 텍스트 기준선 (text baseline) 을 기준으로 정렬됩니다.
예시 출력 시각화:
Stretch: [Item 1][Item 2][Item 3] (전체 높이)
Flex-Start: [Item 1][Item 2][Item 3] (상단 정렬)
Flex-End: [Item 1][Item 2][Item 3] (하단 정렬)
Center: [Item 1][Item 2][Item 3] (수직 가운데 정렬)
Baseline: [Item 1][Item 2][Item 3] (텍스트 기준선 정렬)
파일을 저장하고 웹 브라우저에서 열어 다양한 정렬 스타일을 확인하십시오. 각 컨테이너가 flex 항목의 고유한 수직 정렬을 시연하는 것을 확인하십시오.
Flex 컨테이너 정렬 사용자 정의
이 단계에서는 다양한 정렬 기술을 결합하고 개별 항목 사용자 정의를 추가하여 보다 복잡한 Flexbox 레이아웃을 만드는 방법을 배우게 됩니다.
flexbox-layout.html 파일을 열고 다음 고급 예제로 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Flexbox Alignment</title>
<style>
.flex-container {
display: flex;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 50px;
}
/* Custom alignment scenarios */
.mixed-alignment {
align-items: center;
}
.mixed-alignment .special-item {
align-self: flex-end;
}
.mixed-alignment .tall-item {
align-self: stretch;
height: auto;
}
</style>
</head>
<body>
<div class="flex-container mixed-alignment">
<div class="flex-item">Normal</div>
<div class="flex-item special-item">Special</div>
<div class="flex-item tall-item">Tall Item</div>
</div>
</body>
</html>
주요 사용자 정의 기술:
align-items: center는 기본 수직 중앙 정렬을 설정합니다.align-self: flex-end는 특정 항목에 대한 컨테이너 정렬을 재정의합니다.align-self: stretch는 개별 항목이 다르게 늘어나도록 허용합니다.
예시 출력 시각화:
[Normal Item] [Special Item] [Tall Item]
↑ ↓ ↑
가운데 정렬 하단 정렬 늘어남
이 예제는 다음을 수행하는 방법을 보여줍니다.
- 모든 항목에 대한 기본 정렬 설정
- 특정 항목에 대한 정렬 재정의
- 보다 동적이고 유연한 레이아웃 생성
파일을 저장하고 웹 브라우저에서 열어 사용자 정의된 정렬이 어떻게 작동하는지 확인하십시오.
요약
이 랩에서는 참가자들이 Flexbox 의 align-items 속성을 탐구하여 컨테이너 내에서 flex 항목의 수직 정렬을 제어하는 방법을 배웁니다. 이 랩은 기본 stretch 동작부터 시작하여 다양한 정렬 전략에 대한 포괄적인 소개를 제공하고, flex-start, flex-end, center, baseline과 같은 값을 사용하여 flex 항목을 배치하는 방법을 보여줍니다.
실습 HTML 및 CSS 예제를 통해 학습자는 flex 컨테이너 레이아웃을 조작하는 실질적인 경험을 얻고, align-items 속성이 교차 축을 따라 요소의 위치에 어떤 영향을 미치는지 이해합니다. 이 랩은 반응형 (responsive) 이고 시각적으로 균형 잡힌 웹 디자인을 만드는 데 있어 이 속성의 중요성을 강조하며, 참가자들이 보다 정교하고 유연한 레이아웃 기술을 개발할 수 있도록 합니다.
