이 랩에서는 참가자들이 반응형 및 유연한 웹 디자인을 생성하기 위한 강력한 레이아웃 기술인 CSS Flexbox 의 flex-grow 속성을 탐구합니다. 단계별 접근 방식을 통해 학습자는 HTML 파일을 생성하고, Flexbox 컨테이너를 설정하며, 다양한 flex-grow 값을 실험하여 요소가 어떻게 동적으로 확장되고 사용 가능한 공간을 분배하는지 이해하게 됩니다.
이 랩은 학생들이 기본적인 HTML 구조를 생성하고, Flexbox 컨테이너를 정의하며, 자식 요소에 flex-grow 속성을 적용하는 과정을 안내합니다. 숫자 값을 설정하고 상자가 비례적으로 성장하는 것을 관찰함으로써, 참가자들은 레이아웃 유연성을 제어하고 웹 디자인에서 flex-grow의 미묘한 동작을 이해하는 데 대한 실질적인 통찰력을 얻게 될 것입니다.
이 단계에서는 CSS Flexbox 의 flex-grow 속성을 탐구하기 위한 기본적인 HTML 파일을 생성합니다. 기본적인 HTML 구조를 설정하고 Flexbox 데모를 위한 환경을 준비합니다.
먼저, 프로젝트 디렉토리로 이동하여 HTML 파일을 생성합니다:
cd ~/project
touch index.html이제 WebIDE 에서 index.html 파일을 열고 다음 HTML 구조를 추가합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-grow Demonstration</title>
<style>
/* CSS styles will be added in subsequent steps */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>이 기본 HTML 구조는 다음을 포함합니다:
<div>flex-grow를 시연하는 데 사용할 세 개의 자식 <div> 요소 (상자)<style> 섹션 (자리 표시자)파일을 볼 때의 예시 출력:
[HTML file created with basic structure and three div boxes]이제 이 파일은 다음 단계에서 CSS Flexbox 를 더 탐구할 준비가 되었습니다.
이 단계에서는 Flexbox 컨테이너를 정의하는 방법과 flex-grow 속성의 기본 개념을 이해하는 방법을 배웁니다. WebIDE 에서 index.html 파일을 열고 <style> 섹션을 수정하여 Flexbox 컨테이너를 생성합니다.
다음 CSS 를 추가하여 Flexbox 컨테이너를 정의합니다:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>CSS 를 자세히 살펴보겠습니다:
display: flex;는 컨테이너를 Flex 컨테이너로 만듭니다.width: 100%;는 컨테이너가 전체 너비를 차지하도록 합니다..box 스타일은 개별 Flex 항목의 모양을 정의합니다.브라우저에서 볼 때의 예시 출력:
[Three green boxes displayed in a horizontal row, filling the container]flex-grow 속성은 여유 공간이 있을 때 Flex 항목이 서로 상대적으로 어떻게 성장하는지를 결정합니다. 기본적으로 flex-grow는 0 으로 설정되어 있으며, 이는 항목이 초기 크기를 초과하여 성장하지 않음을 의미합니다.
기본 동작을 확인하려면 웹 브라우저에서 HTML 파일을 엽니다. 상자가 초기 크기를 유지하고 컨테이너를 채우기 위해 확장되지 않는 것을 확인할 수 있습니다.
이 단계에서는 flex-grow 속성의 기본 동작과 상속된 동작을 조사합니다. index.html 파일을 열고 <style> 섹션을 업데이트하여 이러한 개념을 탐구합니다.
먼저, flex-grow의 초기값을 이해해 보겠습니다:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* Initial flex-grow is 0 by default */
/* flex-grow: 0; */
}
.box1 {
/* Explicitly setting initial value */
flex-grow: 0;
}
.box2 {
/* Demonstrating inheritance */
flex-grow: inherit;
}
.box3 {
/* Another way to show initial state */
flex-grow: initial;
}
</style>주요 관찰 사항:
flex-grow: 0;은 기본값이며, 항목이 증가하지 않음을 의미합니다.inherit는 부모 컨테이너에서 flex-grow 값을 가져옵니다.initial은 속성을 기본값 (0) 으로 재설정합니다.브라우저에서 볼 때의 예시 출력:
[Three green boxes of equal width, not expanding to fill container]더 자세히 설명하기 위해, 이러한 값의 작동 방식을 보여주도록 HTML 을 수정할 수 있습니다:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 0)</div>
<div class="box box2">Box 2 (flex-grow: inherit)</div>
<div class="box box3">Box 3 (flex-grow: initial)</div>
</div>
</body>이 예제는 기본적으로 Flex 항목이 초기 크기를 유지하고 컨테이너의 여유 공간을 채우기 위해 증가하지 않음을 보여줍니다.
이 단계에서는 flex-grow와 함께 숫자 값을 사용하여 Flex 항목이 컨테이너 내에서 어떻게 확장되는지 제어하는 방법을 배웁니다. index.html 파일을 열고 <style> 섹션을 업데이트하여 다양한 숫자 flex-grow 값을 탐색합니다.
다음 스타일로 CSS 를 업데이트합니다:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* Box 1 will grow 1 unit */
flex-grow: 1;
}
.box2 {
/* Box 2 will grow 2 units */
flex-grow: 2;
}
.box3 {
/* Box 3 will grow 3 units */
flex-grow: 3;
}
</style>새로운 스타일에 맞게 HTML 을 업데이트합니다:
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 3)</div>
</div>
</body>주요 관찰 사항:
flex-grow 값은 여유 공간이 어떻게 분배되는지 결정합니다.브라우저에서 볼 때의 예시 출력:
[Three green boxes with different widths:
- Box 1 is narrowest (1 unit)
- Box 2 is wider (2 units)
- Box 3 is widest (3 units)]이제 상자는 flex-grow 값에 따라 다르게 확장되어 Flex 컨테이너에서 요소 크기를 제어하는 방법을 보여줍니다.
이 단계에서는 더 복잡한 flex-grow 비율을 탐구하고 Flex 컨테이너 내에서 서로 다른 값들이 어떻게 상호 작용하는지 이해합니다. 다음 코드로 index.html 파일을 업데이트하십시오:
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Box 1 (flex-grow: 1)</div>
<div class="box box2">Box 2 (flex-grow: 2)</div>
<div class="box box3">Box 3 (flex-grow: 1)</div>
<div class="box box4">Box 4 (flex-grow: 4)</div>
</div>
</body>이해해야 할 주요 개념:
flex-grow 값: 1 + 2 + 1 + 4 = 8브라우저에서 볼 때의 예시 출력:
[Four colored boxes with different widths:
- Box 1 and Box 3: Narrow (1/8 each)
- Box 2: Slightly wider (2/8)
- Box 4: Widest (4/8 or half the container)]이 예제는 flex-grow 값이 어떻게 비례적인 크기를 생성하여 요소 확장을 세밀하게 제어할 수 있는지 보여줍니다.
이 랩에서는 참가자들이 구조화된 HTML 파일을 생성하고 여러 div 요소를 사용하여 유연한 컨테이너를 구현함으로써 CSS Flexbox 의 flex-grow 속성을 탐구합니다. 랩은 컨테이너와 세 개의 자식 상자를 사용하여 기본 HTML 구조를 설정하는 것으로 시작하며, Flexbox 실험을 위한 기본적인 설정을 보여줍니다.
점진적인 CSS 스타일링을 통해 학습자들은 표준 컨테이너를 Flexbox 레이아웃으로 변환하는 방법을 배우고, flex-grow 속성을 적용하여 요소가 어떻게 동적으로 확장되고 사용 가능한 공간을 분배하는지 이해합니다. 실습 방식을 통해 참가자들은 다양한 flex-grow 값을 실험하고, 숫자 비율이 Flex 컨테이너 요소의 크기 조정 및 분배에 어떻게 영향을 미치는지 관찰할 수 있습니다.
