지난번 살펴본 Flex Box의 기본방향 'flex-direction' 을 응용해보면, 어떨까 갑자기 생각이 나서..
기본적인 홈페이지의 구성을 하나하나 잡아가보면서 진행하면 어떨까 싶어서요.
대강 막 쳤어요.
상단에 네비게이션 바, 가운데 프로모션 이미지, 아래에 메인 내용, 오른쪽에 별도의 섹션을 넣고, 아래에 footer를 달겁니다.
우리가 살펴봤던것처럼, flex의 방향만 가지고도 이렇게 배치를 잡아나갈 수 있습니다.
row로 해서 잡아나가도 상관없고, column으로 해서 잡아나가도 상관은 없어요. 우리는 일단 해볼겁니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
font-size: 2em;
line-height: 1.7;
}
.row {
display: flex;
flex-wrap: wrap;
flex-direction: column;
border: 1px solid green;
padding: 2%;
text-align: center;
}
.contents,
.navbar,
.promo,
.footer {
width: 100%;
align-items: center;
border: 1px solid blue;
}
.navbar,
.contents {
background-color: lightblue;
}
.contents {
display: flex;
flex: 0, 1, 0, 1;
}
.main {
width: 70%;
background-color: lightcyan;
flex: 0, 1, 0, 0;
}
.aside {
width: 30%;
}
</style>
</head>
<body>
<div class="row">
<div class="navbar">navbar</div>
<div class="promo">promo</div>
<div class="contents">
<div class="main">main</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>더 세부적인 내용으로는, 네비게이션 바에 내용들을 채워나간다던가, 메인 영역에 카드(이미지와 텍스트가 삽입되어 있는)를 삽입한다든가, 옆쪽에 별도의 메뉴를 넣어준다든가... footer에 여러 열을 삽입해서 각 섹션에 맞는 내용을 넣을 수 있을겁니다.
하나씩 하나씩 그것들을 채워나가기도 할건데, 일단 구성만 잡고 다른 녀석들은 옵션으로 잡아가보도록 할게요.
