flex
레이아웃(컨텐츠를 구조화)을 할때 쓰는 기능. 레이블의 변화 Table(격자, 표) 많은 정보 저장, 정보 과다로 나중에 바꾸기가 어려움 -->position, float --> FLEX는 conatainer 류의 태그들과 item류의 태그들이 있다. ```1
2
3
4
5
플렉스가 없을 떄에는 이렇고
있을 때에는.
이렇다.
없을 떄에는 기본으로 블럭 속성을 가지므로 화면 전체를 쓰고 플렉스가 적용이 되면. 이것들이 정렬이 되는 것 만약 이것들을 반대쪽으로 정렬하고 싶다면.
flex-direction:row-reverse;
중요한 것은 reverse, 리버스가 없으면 바뀌지 않는다.
flex-direction:column;을 하면 칼럼 형식으로 배치도 가능.
이제 컨테이너가 아닌 아이템에 들어가는 것을 알아보자.
basis & grow & shrink
<!doctype><html><head><style>
.container{
background-color: powderblue;
height:200px;
display:flex;
flex-direction:row;
}
.item{
background-color: tomato;
color:white;
border:1px solid white;
}
.item:nth-child(1){
flex-basis: 150px;
flex-shrink: 1;
}
.item:nth-child(2){
flex-basis: 150px;
flex-shrink: 2;
}
</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>.item:nth-child(1)는 클래스가 아이템인 것중 두번쨰를 지정.
flex-basis의 역할은 플렉스의 방향에 대한 엘리먼트의 크기 지정.
flex-grow의 역할은 비어있는 여백 부분을 요소들에게 n빵으로 분배해줌.flex-grow:1;을 하면.
이렇게 화면이 차게 됨.
flex-shrink: 1;로 하게 되면 브라우저 크기에 따라 줄어듬, 0으로 하면 브라우저가 줄어들어도 요소의 크기가 줄어들지 않는다.
Holy Grail Layout
많은 사람들이 찾아낸 웹페이지 레이아웃의 성배, 표준. 
<!doctype> <html> <head> <meta charset="utf-8"> <style>
.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 {
display: flex;
}
.content nav {
border-right: 1px solid gray;
}
.content aside {
border-left: 1px solid gray;
}
nav,
aside {
flex-basis: 150px;
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="https://opentutorials.org/course/1">홈페이지</a>
</footer> </div>
</body></html>결과물
플렉스의 기타 속성들. 홈페이지에 들어가서 직접 해보자.
https://opentutorials.org/module/2367/13526
css-- multi column
칼럼을 나눠서 조각조각 정보를 나눔. .column {
column-count: 4;
/* 화면이 n개로 쪼개져서 보임.width와 같이 사용시 최대 칼럼의 수를 제어 할 수 있다.*/
text-align: justify;
/*글자가 들쑥날쑥 한게 아니라 옆으로 정렬.;*/
column-width: 200px;
/*칼럼의 폭을 200픽셀로 지정해서 자동으로 단을 나눠주기.-- 브라우저 크기에 맞춰서 칼럼수를 자동으로 조정함.*/
column-gap:30px;
/*칼럼 사이의 간격.*/
column-rule-style:solid;
/*칼럼 사이에 솔리드한 단선 생성. dotted 라고 하면 점선.dashed라고 하면 절취선이 된다.*/
column-rule-width: 5px;/*단선의 폭.*/
column-rule-color: red;/*단선의 색.*/
}
h1{ column-span: all; /*제목이 칼럼의 구분을 뛰어넘게 만들기.*/}
</style> </head> <body>
<div class="column">
<h1>아이스크림</h1>
중요-- column-count: 4;
/ 화면이 n개로 쪼개져서 보임.width와 같이 사용시 최대 칼럼의 수를 제어 할 수 있다./
text-align: justify;
/글자가 들쑥날쑥 한게 아니라 옆으로 정렬.;/
왕초보