이 랩에서는 CSS 의 Flexbox order 속성을 탐구하여 HTML 구조를 수정하지 않고도 flex 항목의 시각적 배열을 동적으로 변경하는 방법을 이해하는 데 중점을 둡니다. 단계별 접근 방식을 통해 참가자들은 유연한 레이아웃을 만들고, 개별 항목에 order 값을 적용하며, 이러한 값들이 요소 렌더링에 어떻게 영향을 미치는지 관찰하는 방법을 배우게 됩니다.
이 랩은 컨테이너와 여러 flex 항목을 갖춘 기본적인 HTML 구조를 설정하는 것으로 시작하여 레이아웃을 변환하기 위해 CSS 스타일링을 점진적으로 추가합니다. 참가자들은 다양한 order 속성 값을 실험하면서 flex 컨테이너 내에서 항목 위치를 정밀하게 제어할 수 있게 해주는 정렬 메커니즘에 대한 통찰력을 얻게 되며, 궁극적으로 유연한 웹 디자인 기술에 대한 이해를 높일 수 있습니다.
이 단계에서는 Flexbox order 속성을 탐구하기 위한 기반이 될 기본적인 HTML 구조를 만드는 방법을 배우게 됩니다. order 속성이 어떻게 작동하는지 보여주기 위해 여러 flex 항목이 있는 간단한 컨테이너를 설정할 것입니다.
먼저 WebIDE 를 열고 ~/project 디렉토리에 HTML 파일을 만듭니다.
flexbox-order.html로 저장합니다.이제 HTML 구조를 만들어 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Order Property Demo</title>
<style>
/* CSS styles will be added in the next step */
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
<div class="item item5">Item 5</div>
</div>
</body>
</html>HTML 구조를 자세히 살펴보겠습니다.
container 클래스를 가진 컨테이너 <div>를 만들었습니다.item 클래스와 개별 클래스 item1부터 item5까지를 가진 다섯 개의 <div> 요소가 있습니다.order 속성이 flex 항목의 레이아웃에 어떻게 영향을 미치는지 보여주는 데 도움이 됩니다.이 HTML 파일을 브라우저에서 열었을 때의 예시 출력:
[Default layout showing 5 items in their original order]
Item 1 | Item 2 | Item 3 | Item 4 | Item 5이 단계에서는 flex 컨테이너를 만들고 해당 항목의 스타일을 지정하기 위해 기본 CSS 스타일링을 적용하는 방법을 배우게 됩니다. 이전 단계에서 생성한 flexbox-order.html 파일을 열고 <style> 섹션을 수정합니다.
HTML 파일의 <style> 태그 안에 다음 CSS 를 추가합니다.
.container {
display: flex;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
gap: 10px; /* Creates space between flex items */
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}CSS 속성을 자세히 살펴보겠습니다.
display: flex;는 컨테이너를 flex 컨테이너로 만듭니다.gap: 10px;는 flex 항목 사이에 공간을 추가합니다..item 스타일은 각 flex 항목의 모양을 정의합니다.justify-content: center; 및 align-items: center;는 각 항목 내에서 텍스트를 가운데 정렬합니다.HTML 파일을 브라우저에서 열었을 때의 예시 출력:
[A row of 5 blue squares with centered white text, evenly spaced]
Item 1 | Item 2 | Item 3 | Item 4 | Item 5이해해야 할 핵심 사항:
display: flex를 사용합니다.이 단계에서는 HTML 구조를 수정하지 않고 order 속성을 사용하여 flex 항목의 시각적 순서를 변경하는 방법을 배우게 됩니다. flexbox-order.html 파일의 CSS 를 업데이트하여 특정 항목에 order 속성을 추가합니다.
.container {
display: flex;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
/* Add order properties */
.item1 {
order: 3;
}
.item2 {
order: 5;
}
.item3 {
order: 1;
}
.item4 {
order: 4;
}
.item5 {
order: 2;
}order 속성에 대한 주요 사항:
HTML 파일을 브라우저에서 열었을 때의 예시 출력:
[Items will now be displayed in this order]
Item 3 | Item 5 | Item 1 | Item 4 | Item 2이제 항목의 순서가 원래 HTML 구조와 완전히 달라져 order 속성의 강력함을 보여줍니다.
이 단계에서는 다양한 order 값이 flex 항목의 레이아웃을 어떻게 극적으로 변경할 수 있는지 살펴봅니다. flexbox-order.html 파일의 CSS 를 업데이트하여 다양한 order 구성을 실험해 보세요.
.container {
display: flex;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
/* Experiment with different order values */
.item1 {
order: -2;
background-color: #e74c3c;
}
.item2 {
order: 10;
background-color: #2ecc71;
}
.item3 {
order: 0;
background-color: #f39c12;
}
.item4 {
order: 5;
background-color: #3498db;
}
.item5 {
order: -1;
background-color: #9b59b6;
}주요 관찰 사항:
HTML 파일을 브라우저에서 열었을 때의 예시 출력:
[Items will be displayed in this order]
Item 1 (red) | Item 5 (purple) | Item 3 (orange) | Item 4 (blue) | Item 2 (green)이 예제는 flex 항목을 재정렬하는 order 속성의 유연성을 보여줍니다.
이 단계에서는 order 속성이 flex 항목을 정렬하는 방식을 더 깊이 이해해 보겠습니다. flexbox-order.html 파일을 다음 CSS 로 업데이트하여 정렬 메커니즘을 살펴보세요.
.container {
display: flex;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
gap: 10px;
flex-wrap: wrap; /* Allow items to wrap for better visualization */
}
.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
margin: 5px;
}
/* Demonstrate sorting mechanism */
.item1 {
order: 3;
background-color: #e74c3c;
}
.item2 {
order: 3;
background-color: #2ecc71;
}
.item3 {
order: 1;
background-color: #f39c12;
}
.item4 {
order: 2;
background-color: #3498db;
}
.item5 {
order: 1;
background-color: #9b59b6;
}주요 정렬 메커니즘 통찰력:
HTML 파일을 브라우저에서 열었을 때의 예시 출력:
[Items will be displayed in this order]
Item 3 (orange) | Item 5 (purple) | Item 4 (blue) | Item 1 (red) | Item 2 (green)다음 사항을 관찰하세요:
이 랩에서는 참가자들이 구조화된 HTML 레이아웃을 생성하고 CSS 스타일을 적용하여 Flexbox order 속성을 탐구하여 flex 항목을 동적으로 재정렬하는 방법을 이해합니다. 랩은 다섯 개의 flex 항목이 있는 컨테이너를 특징으로 하는 기본 HTML 구조를 설정하는 것으로 시작하여 Flexbox 레이아웃 기술을 구현하는 데 필요한 기본 요소를 보여줍니다.
점진적인 단계를 통해 학습자는 CSS display 속성을 적용하여 flex 컨테이너를 생성하고, 개별 항목의 스타일을 지정하며, order 속성을 실험하여 요소의 시각적 배열을 조작합니다. 다양한 order 값을 적용함으로써 참가자들은 Flexbox 가 원래 HTML 구조를 수정하지 않고도 유연하고 반응형 디자인 레이아웃을 어떻게 가능하게 하는지에 대한 실질적인 통찰력을 얻게 됩니다.
