소개
이 랩에서는 참가자들이 CSS Flexbox 의 flex-basis 속성을 포괄적이고 실습적인 방식으로 탐구할 것입니다. 구조화된 HTML 파일을 생성하고 점진적으로 CSS 스타일을 추가함으로써, 학습자들은 flex-basis가 컨테이너 내의 플렉스 아이템의 초기 크기에 어떻게 영향을 미치는지 이해하는 실질적인 경험을 얻게 될 것입니다.
이 랩은 학생들이 플렉스박스 레이아웃을 생성하고, 컨테이너 속성을 정의하며, 개별 아이템에 flex-basis를 적용하고, 다양한 값을 실험하는 과정을 안내합니다. 참가자들은 flex-basis가 다른 플렉스 속성과 어떻게 상호 작용하는지 배우게 되며, 이를 통해 반응형 웹 디자인에서 요소의 기본적인 크기 조절 및 배포를 제어할 수 있게 됩니다.
플렉스박스 레이아웃을 위한 HTML 파일 생성
이 단계에서는 CSS Flexbox 의 flex-basis 속성을 탐구하기 위한 기본적인 HTML 파일을 생성합니다. 플렉스박스 레이아웃 실험의 기반이 될 간단한 HTML 구조를 설정할 것입니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. WebIDE 인터페이스를 사용하여 flexbox-demo.html이라는 새 파일을 생성합니다.
다음은 사용할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-basis Demo</title>
<style>
/* CSS styles will be added in subsequent steps */
</style>
</head>
<body>
<div class="container">
<div class="flex-item item1">Item 1</div>
<div class="flex-item item2">Item 2</div>
<div class="flex-item item3">Item 3</div>
<div class="flex-item item4">Item 4</div>
<div class="flex-item item5">Item 5</div>
</div>
</body>
</html>
HTML 구조를 자세히 살펴보겠습니다.
container클래스를 가진 컨테이너<div>를 생성했습니다.- 컨테이너 내부에는
flex-item클래스와 개별 아이템 클래스를 가진 다섯 개의<div>요소가 있습니다. - 이 구조를 통해 다음 단계에서
flex-basis속성을 시연할 수 있습니다.
WebIDE 에서 파일을 저장했을 때의 예시 출력:
File created: ~/project/flexbox-demo.html
기본 CSS Flexbox 컨테이너 정의
이 단계에서는 이전 단계에서 생성한 HTML 파일에 스타일을 추가하여 기본 CSS 플렉스박스 컨테이너를 만드는 방법을 배웁니다. WebIDE 에서 flexbox-demo.html 파일을 열고 <style> 섹션을 수정하여 플렉스박스 컨테이너를 정의합니다.
다음 CSS 를 추가하여 기본 플렉스박스 컨테이너를 정의합니다.
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
주요 CSS 속성을 자세히 살펴보겠습니다.
display: flex;는 컨테이너를 플렉스 컨테이너로 변환합니다.background-color및border는 컨테이너를 시각화하는 데 도움이 됩니다..flex-item스타일은 개별 플렉스 아이템의 모양을 정의합니다.margin및padding은 아이템 간의 간격을 제공합니다.
파일을 저장했을 때의 예시 출력:
Flexbox container styles added to flexbox-demo.html
이 HTML 파일을 브라우저에서 열면 기본 플렉스 레이아웃을 보여주는 다섯 개의 녹색 상자가 가로로 정렬된 것을 볼 수 있습니다.
플렉스 아이템에 flex-basis 속성 적용
이 단계에서는 flex-basis 속성과 플렉스 아이템의 초기 크기를 제어하는 방법에 대해 배웁니다. WebIDE 에서 flexbox-demo.html 파일을 열고 CSS 스타일을 업데이트하여 flex-basis를 시연합니다.
다음 CSS 를 추가하여 개별 플렉스 아이템에 flex-basis를 적용합니다.
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: 150px;
}
.item4 {
flex-basis: 250px;
}
.item5 {
flex-basis: 120px;
}
</style>
flex-basis에 대한 주요 사항:
- 플렉스 아이템의 초기 주 크기를 설정합니다.
- 픽셀, 백분율 또는 기타 단위로 지정할 수 있습니다.
- 플렉스 성장 또는 축소 전에 기본 크기를 결정합니다.
- 플렉스 컨테이너에서
width를 대체합니다.
파일을 저장했을 때의 예시 출력:
Flex items with different flex-basis values added
브라우저에서 HTML 파일을 열면 flex-basis 값에 따라 초기 너비가 다른 플렉스 아이템을 볼 수 있습니다.
다양한 flex-basis 값으로 실험하기
이 단계에서는 flex-basis 값을 지정하는 다양한 방법을 살펴보고, 서로 다른 단위와 접근 방식이 플렉스 아이템 크기에 어떤 영향을 미치는지 이해합니다. flexbox-demo.html 파일의 CSS 를 다음 스타일로 업데이트합니다.
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Different flex-basis value types */
.item1 {
flex-basis: 100px;
} /* Fixed pixel width */
.item2 {
flex-basis: 20%;
} /* Percentage of container */
.item3 {
flex-basis: auto;
} /* Based on content */
.item4 {
flex-basis: 10rem;
} /* Using rem units */
.item5 {
flex-basis: content;
} /* Based on content size */
</style>
flex-basis 값에 대한 주요 관찰 사항:
- 픽셀 값 (
100px) 은 고정된 너비를 제공합니다. - 백분율 값 (
20%) 은 컨테이너를 기준으로 크기가 조정됩니다. auto는 아이템의 콘텐츠 크기를 사용합니다.rem과 같은 다양한 단위는 반응형 크기 조정을 제공합니다.content키워드는 아이템의 콘텐츠에 맞춰 조정됩니다.
파일을 저장했을 때의 예시 출력:
Flex items with diverse flex-basis configurations
브라우저에서 HTML 파일을 열면 다양한 flex-basis 값이 아이템 크기 조정 및 레이아웃에 어떤 영향을 미치는지 확인할 수 있습니다.
flex-basis 와 다른 Flex 속성 간의 상호 작용 탐구
이 단계에서는 flex-basis가 flex-grow 및 flex-shrink와 같은 다른 플렉스 속성과 어떻게 상호 작용하는지 배웁니다. flexbox-demo.html 파일의 CSS 를 다음의 포괄적인 예제로 업데이트합니다.
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
width: 100%;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Demonstrating flex property interactions */
.item1 {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
}
.item2 {
flex-basis: 200px;
flex-grow: 2;
flex-shrink: 1;
}
.item3 {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 2;
}
.item4 {
flex: 1 1 250px; /* shorthand for grow, shrink, basis */
}
.item5 {
flex: 2 0 120px;
}
</style>
플렉스 속성 상호 작용의 주요 개념:
flex-grow: 아이템이 다른 아이템에 비해 얼마나 커질지 결정합니다.flex-shrink: 아이템이 다른 아이템에 비해 얼마나 줄어들지 제어합니다.flex단축 속성은 grow, shrink 및 basis 를 결합합니다.- 다양한 조합은 고유한 레이아웃 동작을 생성합니다.
파일을 저장했을 때의 예시 출력:
Flex items with complex grow, shrink, and basis interactions
브라우저에서 HTML 파일을 열면 이러한 속성이 함께 작동하여 유연한 레이아웃을 만드는 방식을 관찰할 수 있습니다.
요약
이 랩에서는 참가자들이 포괄적인 HTML 및 CSS 데모를 생성하여 CSS Flexbox 의 flex-basis 속성을 탐구합니다. 랩은 여러 플렉스 아이템이 있는 컨테이너를 특징으로 하는 기본적인 HTML 파일을 구성하는 것으로 시작하여 플렉스박스 레이아웃 실험을 위한 구조적 프레임워크를 설정합니다. 참가자들은 CSS 를 사용하여 기본 플렉스박스 컨테이너를 정의하고, 디스플레이 속성, 배경색 및 초기 스타일을 설정하여 반응형이며 시각적으로 매력적인 레이아웃을 만드는 방법을 배웁니다.
이 랩은 학습자가 flex-basis 속성을 플렉스 아이템에 적용하도록 안내하여, 이 속성이 추가 공간이 분배되기 전에 플렉스 요소의 초기 크기를 제어하는 방식을 이해할 수 있도록 합니다. 다양한 flex-basis 값을 실험하고 다른 플렉스 속성과의 상호 작용을 탐구함으로써, 참가자들은 유연한 레이아웃을 관리하고 플렉스박스 컨테이너 내에서 요소 크기를 제어하는 실질적인 통찰력을 얻습니다.
