[ Flex ]
기존의 table이나 div를 쓰고 position Float를 사용하던 방식에서 벗어나 Flex를 이용한 레이아웃을 구성하는 방법에 대해서알아봅시다.
1. flex 기본(display:flex, flex-direction, flex-basis) & flex-grow, flex-shrink 속성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Flex Study</title>
<style media="screen">
.container{
background-color:powderblue;
display:flex;
}
</style>
</head>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
|
2. 위에서 공부한 속성을 활용해서 대표적인 레이아웃 디자인인 Holy Grail Layout을 구성해보도록 하자.
이러한 구조를 만들어 볼 건데
먼저, (Header), (Nav, Main, AD), (Footer)로 구성되어 있다.
크게 태그로
1) header, section, footer 시멘틱 태그로 구성하고 section에는 nav, main, aside(광고부분) 시멘틱 태그를 배치한다.
<div class="container">
<header>헤더</header>
<section>
<nav></nav>
<main></main>
<aside></asdie>
</section>
<footer>푸터</footer>
</div>
2) 먼저 Flex를 사용하기 위해 가장 부모인 container에 플렉스를 사용하겠다고 display:flex를 지정한다.
그리고, 그 자식들은 수직으로 배치되어야 함으로 flex-direction:column을 지정해 준다.
3) 헌데 section 태그 내의 자식들(nav,main,aside)는 가로로 배치되어야한다.
따라서, 그들의 부모인 section에 flex를 사용하기 위해 display:flex를 지정하고, flex-direction:row를 지정한다.
4) 마지막으로, 화면을 줄여도 nav부분과 aside부분은 줄어들지 않기 위해서 flex-shrink를 지정할 건데
지정하지 않을 경우 flex-shrink:1 로 되어있다. 따라서 나머지 부분은 그대로 두고
nav와 aside만 flex-shrink:0 을 지정해 창을 줄여도 그 크기는 줄어들지 않도록 설정하도록 한다.
또한 nav와 aside는 일정 크기를 가지도록 flex-basis:150px; 정도를 할당하도록 하자.
5) 기타사항
만약, section 태그 내에서 지금은 nav, main, aside 순으로 되어 있는데 이 순서를 main nav aside로 바꾸고 싶은 경우는 어떻게 할까
태그의 위치를 바꿀 수도 있지만 order라는 속성을 사용하면 된다.
main{
order:0;
}
nav{
order:1;
}
aside{
order:2;
}
로 지정하면 된다.
Ex)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Holy Grail Layout</title>
<style media="screen">
.container {
display:flex;
flex-direction: column;
}
header{
border-bottom: 1px solid gray;
padding-left:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align: center;
}
.content{
}
main{
padding:10px;
}
</style>
</head>
<div class="container">
<header>
<h1>생활코딩</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
생활코딩은 일반인을 위한 코딩 수업입니다.
</main>
<aside>
광고
</aside>
</section>
<footer>
</footer>
</div>
|
