학습 목표
- Flexbox를 사용하여 수평 및 수직 정렬을 구현할 수 있다.
- Flexbox를 활용해 네비게이션 바를 구성할 수 있다.
- Flexbox를 이용해 카드 레이아웃을 구성할 수 있다
class_flexbox_v04 생성
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
flex-direction: row; /* 수평 */
justify-content: space-between; /* 아이템 들을 양 끝단에 배치 */
padding: 10px 20px;
background-color: #333;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px;
}
.nav-item:hover { /* nav-item 에 마우스를 가져다 되면 반응한다. */
background-color: #444;
border-radius: 5px;
}
.main-container {
display: flex;
justify-content: center;
background-color: #f0f0f0;
height: 50vh;
align-items: center;
}
.box {
background-color: blue;
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.card-container {
display: flex;
flex-wrap: wrap; /* 화면 크기가 줄어들면 아래로 떨어지도록 만드는 것 */
gap: 20px; /* 카드들 사이에 간격을 설정할 수 있다. */
padding: 20px;
}
.card {
flex: 1 1 calc(33.333% - 80px);
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
/* 수평 오프셋 : 0, 수직 오프셋 : 2px, 흐림 반경 4px, 그림자 색상 10% */
box-shadow: 0 2px 4px rgba(0,0,0, 0.1); /* 0, 0, 0 <-- 검은색 */
padding: 20px;
}
@media(max-width: 800px) { /* 만약 최대 넓이기 800px 라면 */
/* 800px 이하라면 카드 레이아웃을 2열 레이아웃으로 설정 */
.card {
flex: 1 1 calc(50% - 80px);
}
}
@media(max-width: 500px) { /* 만약 최대 넓이기 500px 라면 */
/* 500px 이하라면 카드 레이아웃을 1열 레이아웃으로 설정 */
.card {
flex: 1 1 calc(100% - 80px);
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#" class="nav-item">홈</a>
<a href="#" class="nav-item">소개</a>
<a href="#" class="nav-item">서비스</a>
<a href="#" class="nav-item">연락처</a>
</div>
<div class="main-container">
<div class="box">수평 및 수직 정렬 된 아이템</div>
</div>
<div class="card-container">
<div class="card">
<h2>카드 1</h2>
<p>카드 내용 1</p>
</div>
<div class="card">
<h2>카드 2</h2>
<p>카드 내용 2</p>
</div>
<div class="card">
<h2>카드 3</h2>
<p>카드 내용 3</p>
</div>
<div class="card">
<h2>카드 4</h2>
<p>카드 내용 4</p>
</div>
<div class="card">
<h2>카드 5</h2>
<p>카드 내용 5</p>
</div>
<div class="card">
<h2>카드 6</h2>
<p>카드 내용 6</p>
</div>
</div>
</body>
</html>
