💡 학습 목표
1. Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자.
2. 반복문을 사용한 LIST 만들어 보기 
1. Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자.
시나리오 코드 - 1 (기본 HTML 및 Flexbox 를 사용해 보자 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Modern List</title>
<style>
body {
font-family: "Arial", sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
display: flex; /* Flexbox 레이아웃을 시작합니다. */
flex-direction: column; /* Flexbox의 방향을 세로로 설정합니다. */
align-items: center; /* 센터 정렬합니다. */
}
button {
background-color: #4caf50;
color: white;
padding: 15px 20px;
margin: 20px;
border: none;
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: #45a045;
}
.container {
display: flex; /* Flexbox 레이아웃을 시작합니다. */
flex-wrap: wrap; /* 요소들이 컨테이너를 벗어나면 다음 줄로 이동합니다. */
padding: 20px;
width: 80%;
}
.card {
background: white;
padding: 20px;
margin: 10px;
border-radius: 8px;
/* x, y, blur-radius, rgba */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* 부모 요소의 크기에 1 만큼 차지하라 2개 - 1 : 1 , 3개 1: 1 : 1 */
flex: 1;
min-width: calc(33.33% - 20px); /* 카드의 최소 너비를 설정합니다. */
text-align: center; /* 카드 내 텍스트를 센터 정렬합니다. */
}
</style>
</head>
<body>
<h1>Create List with Loop</h1>
<button onclick="render()">Render</button>
<div class="container" id="container">
<!-- 자바스크립트로 변경 예정 -->
<div class="card">
<h2>Title 1</h2>
<p>Content 1</p>
<button onclick="deleteCard('1')">Delete</button>
</div>
</div>
<script>
/* 코드 추가 예정 */
</script>
</body>
</html>1단계 결과 화면
💡 Flexbox 에 핵심 규칙
1. Flex Container
- Flexbox 레이아웃을 사용하려면, 부모 요소를 Flex Container로 설정해야 합니다.
이는 display: flex; CSS 속성을 부모 요소에 적용하여 수행할 수 있습니다.
2.주축(Main Axis)과 횡단축(Cross Axis)
- Flex Container에는 주축과 횡단축이 있습니다. flex-direction 속성을 사용하여
주축의 방향을 정의할 수 있습니다. (row는 가로, column은 세로)
- 주축은 Flex Items가 배치되는 방향을 결정하며, 횡단축은 주축에 수직인 방향입니다.
3.Flex Items
- Flex Container의 자식 요소는 자동으로 Flex Items가 됩니다.
- Flex Items에는 flex 속성을 사용하여 유연성을 설정할 수 있습니다.
이 속성은 grow, shrink, basis의 세 부분 속성으로 구성됩니다.
예를 들어, flex: 1;은 flex: 1 1 0;의 단축입니다,
이는 아이템이 자유롭게 성장하고 수축할 수 있음을 의미합니다.
따라서, Flexbox를 사용할 때, 우선 부모 요소를 Flex Container로 설정하고,
필요에 따라 주축과 횡단축을 정의한 후, 자식 요소인 Flex Items의 유연성을 조절합니다.2. 반복문을 사용한 LIST 만들어 보기
시나리오 코드 - 2 (반복문을 활용한 리스트 생성)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Modern List</title>
<style>
body {
font-family: "Arial", sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
display: flex; /* Flexbox 레이아웃을 시작합니다. */
flex-direction: column; /* Flexbox의 방향을 세로로 설정합니다. */
align-items: center; /* 센터 정렬합니다. */
}
button {
background-color: #4caf50;
color: white;
padding: 15px 20px;
margin: 20px;
border: none;
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: #45a045;
}
.container {
display: flex; /* Flexbox 레이아웃을 시작합니다. */
flex-wrap: wrap; /* 요소들이 컨테이너를 벗어나면 다음 줄로 이동합니다. */
padding: 20px;
width: 80%;
}
.card {
background: white;
padding: 20px;
margin: 10px;
border-radius: 8px;
/* x, y, blur-radius, rgba */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* 부모 요소의 크기에 1 만큼 차지하라 2개 1 : 1 , 3개 1: 1 : 1 */
flex: 1;
min-width: calc(33.33% - 20px); /* 카드의 최소 너비를 설정합니다. */
text-align: center; /* 카드 내 텍스트를 센터 정렬합니다. */
}
</style>
</head>
<body>
<h1>Create List with Loop</h1>
<button onclick="render()">Render</button>
<div class="container" id="container">
</div>
<script>
let count = 0; // 카드에 title에 고유한 id값 생성하기 위한 변수
function render() {
const container = document.getElementById('container');
// 반복문을 통해서 div를 만들어주세요
for (let i = 1; i<=3; i++) {
count++;
const card = createCard(count);
container.append(card)
}
}
function createCard(id) {
const card = document.createElement('div');
card.className = 'card';
card.id = 'card-'+id;
card.innerHTML = `
<h2>Title ${id}</h2>
<p>Content ${id}</p>
<buttontoken interpolation">${id}')">Delete</button>`;
return card;
}
function deleteCard(id) {
const card = document.getElementById('card-'+id);
if(card != null) {
card.remove();
}
}
</script>
</body>
</html>