이 랩에서는 CSS Flexbox 에서 사용할 수 있는 다양한 flex 방향을 탐구하고, flex 컨테이너 내에서 요소들을 어떻게 정렬하고 배치할 수 있는지 실습을 통해 경험하게 됩니다. 단계별 접근 방식을 통해 HTML 구조를 생성하고, row, row-reverse, column, column-reverse 방향을 포함한 다양한 flex 방향 속성을 점진적으로 구현할 것입니다.
이 랩은 flex 컨테이너와 여러 flex 항목을 갖춘 기본적인 HTML 파일을 설정하는 것으로 시작하며, flex 방향이 레이아웃에 어떤 영향을 미치는지 시각적으로 보여줍니다. CSS flex-direction 속성을 수정함으로써 요소의 흐름과 위치를 제어하는 방법을 배우고, CSS Flexbox 의 기본 원리와 강력한 레이아웃 기능을 이해하게 됩니다.
이 단계에서는 CSS Flexbox 방향을 시연하기 위한 기본적인 HTML 구조를 생성합니다. 다양한 flex 방향을 탐구하는 데 도움이 되는 여러 div 요소를 사용하여 간단한 HTML 파일을 설정할 것입니다.
먼저 WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 flexbox-demo.html이라는 새 파일을 만듭니다.
다음 HTML 코드를 flexbox-demo.html 파일에 복사합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Direction Demo</title>
<style>
.flex-container {
display: flex;
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
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>
</body>
</html>이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
flex-container 클래스를 가진 <div>를 만들었습니다.flex-item 클래스를 가진 네 개의 <div> 요소가 있습니다.<style> 섹션에서 다음과 같은 기본 CSS 를 추가했습니다.
display: flex 설정이 초기 설정은 향후 단계에서 다양한 flex 방향을 시연하는 데 사용할 깨끗하고 간단한 구조를 제공합니다.
이 단계에서는 CSS Flexbox 의 기본 flex 방향인 row 방향에 대해 배우게 됩니다. row 방향은 flex 항목이 왼쪽에서 오른쪽으로 수평으로 배치되는 기본 레이아웃입니다.
WebIDE 에서 flexbox-demo.html 파일을 열고 <style> 섹션을 수정하여 flex 방향을 명시적으로 row 로 설정합니다.
<style>
.flex-container {
display: flex;
flex-direction: row; /* Explicitly set row direction (default) */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>row flex 방향에 대한 주요 사항:
flex-direction: row는 flex 컨테이너의 기본값입니다.웹 브라우저의 예시 출력은 왼쪽에서 오른쪽으로 수평선으로 정렬된 네 개의 녹색 사각형을 보여줍니다.
시각적인 차이점을 이해하기 위해, 추가 구성 없이 항목이 자연스럽게 나란히 배치되는 방식을 확인하십시오. 이는 기본 row flex 방향의 동작을 보여줍니다.
이 단계에서는 수평 레이아웃을 유지하면서 flex 항목의 순서를 변경하는 row-reverse flex 방향을 탐구합니다.
WebIDE 에서 flexbox-demo.html 파일을 열고 <style> 섹션을 수정하여 flex 방향을 row-reverse 로 설정합니다.
<style>
.flex-container {
display: flex;
flex-direction: row-reverse; /* Reverse the order of items horizontally */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>row-reverse flex 방향의 주요 특징:
웹 브라우저에서 이 내용을 보면 항목이 이제 오른쪽에서 왼쪽으로 정렬되어 "Item 4"가 왼쪽에서 먼저 나타나고 "Item 1"이 오른쪽에 나타나는 것을 확인할 수 있습니다.
이는 flex-direction: row-reverse를 사용하여 수평 레이아웃을 유지하면서 flex 항목의 시각적 순서를 변경하는 방법을 보여줍니다.
이 단계에서는 flex 항목을 위에서 아래로 수직으로 정렬하는 column flex 방향을 탐구합니다.
WebIDE 에서 flexbox-demo.html 파일을 열고 <style> 섹션을 수정하여 flex 방향을 column 으로 설정합니다.
<style>
.flex-container {
display: flex;
flex-direction: column; /* Arrange items vertically */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
height: 500px; /* Add height to make vertical layout visible */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>column flex 방향의 주요 특징:
웹 브라우저에서 이 내용을 보면 항목이 이제 수직으로 정렬됩니다.
이는 flex-direction: column이 레이아웃을 수평에서 수직으로 변경하여 Flexbox 를 사용하여 수직 레이아웃을 만드는 간단한 방법을 제공하는 방식을 보여줍니다.
이 단계에서는 flex 항목을 아래에서 위로 수직으로 정렬하는 column-reverse flex 방향을 탐구합니다.
WebIDE 에서 flexbox-demo.html 파일을 열고 <style> 섹션을 수정하여 flex 방향을 column-reverse 로 설정합니다.
<style>
.flex-container {
display: flex;
flex-direction: column-reverse; /* Arrange items vertically from bottom to top */
border: 2px solid #333;
margin-bottom: 20px;
padding: 10px;
height: 500px; /* Add height to make vertical layout visible */
}
.flex-item {
width: 100px;
height: 100px;
margin: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 100px;
}
</style>column-reverse flex 방향의 주요 특징:
웹 브라우저에서 이 내용을 보면 다음을 관찰할 수 있습니다.
이는 flex-direction: column-reverse가 flex 항목의 수직 쌓기 순서를 변경하는 간단한 방법을 제공하는 방식을 보여줍니다.
이 랩에서는 참가자들이 flex 방향의 포괄적인 데모를 생성하여 CSS Flexbox 의 기본 사항을 탐구합니다. 랩은 flex 컨테이너와 여러 flex 항목을 특징으로 하는 구조화된 HTML 파일을 설정하는 것으로 시작하여 다양한 레이아웃 기술을 이해하기 위한 시각적 기반을 제공합니다. 일련의 flex 방향 스타일을 구현함으로써 학습자는 CSS Flexbox 를 사용하여 요소 배열을 조작하는 실질적인 경험을 얻습니다.
이 랩은 참가자들을 row (기본값), row-reverse, column 및 column-reverse 의 네 가지 주요 flex 방향 구성으로 체계적으로 안내합니다. 각 방향은 실습 코딩을 통해 탐구되어 학생들이 flex-direction 이 컨테이너 내 요소의 위치 및 흐름에 미치는 영향을 이해할 수 있도록 합니다. 이러한 접근 방식을 통해 학습자는 유연한 박스 레이아웃 원리와 반응형 웹 디자인에서의 적용에 대한 미묘한 이해를 개발할 수 있습니다.
