Table은 격자를 통해서 레이아웃을 잡곤 했었다
레이아웃으로 사용된 것인지 레이아웃으로 사용된 건지 알 수 없었다
변경하는 것이 굉장히 어려웠다
그래서 나온 기능이 Position
포지션으로 적당한 위치로 옮겨놓는거
그리고 Float 이미지 옆에 글씨가 흘러가게 하는 효과
인류는 레이아웃을 코드로 표현하는 것에서 갈팡질팡
궁극의 레이아웃 방법이 FLEX
Container와 item 역할을 하는 태그가 필요하다
flex의 기본
flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다.
flex-direction:row-reverse라고하면 반대로 배치된다 flex-direction:row가 기본값이다
flex-direction:column으로 바꾸면 수직으로 정렬된다
<!DOCTYPE html>
<html>
<head>
<style>
.container{
background-color:powerderblue;
height:200px;
display:flex;
flex-direction:column-reverse;
}
.item{
background-color:tomato;
color:white;
border:1px solid white;
}
</style>
</head>
<body>
<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>
</body>
</html>
grow&shrink
아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다. 이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다. 여기서는 이 속성들에 대해서 알아보겠습니다.
flex-grow:1을 하면 공평하게 화면을 분할한다 하나만 flex-grow:2를 하면 더 많은 여백을 가져간다
여백이 없어지면 작아진다 shrink를 주면 화면이 작아져도 덜 작아진다 0을 주면 작아지지 않고 1을 주면 조금 작아진다
하나에 shrink값을 1 다른 것에 2를 주면 하나는 1/3만큼 작아지고 다른 것은 2/3만큼 작아진다
Holy Grail layout
Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display:flex;
flex-direction:column;
}
header{
border:bottom:1px solid gray;
padding-leftt:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align:center;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray
}
nav,aside{
flex-basis:50px;
flex-shrink:0;
main{
padding:10px;
}
}
</style>
</head>
<body>
<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>
AD
</aside>
</section>
<footer>
<a href="http://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>
</html>
flex의 여러가지 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
display:flex;
align-items:center;
justify-content:center;
}
.container{
display:flex;
flex-direction:column;
width:800px;
border:1px solid gray;
}
header{
border:bottom:1px solid gray;
padding-leftt:20px;
}
footer{
border-top:1px solid gray;
padding:20px;
text-align:center;
}
.content{
display:flex;
}
.content nav{
border-right:1px solid gray;
}
.content aside{
border-left:1px solid gray
}
nav,aside{
flex-basis:50px;
flex-shrink:0;
main{
padding:10px;
}
nav{
order:-1;
}
main:{
order:1;
}
aside{
order:2;
}
</style>
</head>
<body>
<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>
AD
</aside>
</section>
<footer>
<a href="http://opentutorials.org/course/1">홈페이지</a>
</footer>
</div>
</body>
</html>
'웹(Web) > CSS' 카테고리의 다른 글
| float (0) | 2021.04.15 |
|---|---|
| media query (0) | 2021.04.15 |
| 포지션 (0) | 2021.04.15 |
| 마진겹침 현상 (0) | 2021.04.15 |
| Box-sizing (0) | 2021.04.15 |
댓글