레이아웃
다중 칼럼(multi-column) 레이아웃
다중 칼럼 속성
columns
모든 columns 속성을 이용한 스타일을 한 줄에 설정 가능
column-count
해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정
<style>
#origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>
column-gap
칼럼(column) 사이의 간격을 설정
<style>
#gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>
column-width
칼럼의 너비를 설정
웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정
<style>
#gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>
column-span
해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정
<style>
#merge { -webkit-column-span: all; column-span: all; }
</style>
column-fill
칼럼을 어떻게 채울지 설정
column-rule
모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정
<style>
#line {
-webkit-column-rule: 5px solid #6495ED;
-moz-column-rule: 5px solid #6495ED;
column-rule: 5px solid #6495ED;
}
</style>
column-rule-style
칼럼 사이에 들어갈 라인의 스타일을 설정
<style>
#line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>
column-rule-width
칼럼 사이에 들어갈 라인의 두께를 설정
<style>
#line {
-webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
}
</style>
column-rule-color
칼럼 사이에 들어갈 라인의 색상을 설정
<style>
#line {
-webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
-webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
}
</style>
플렉서블 박스(flexible box) 레이아웃
= 플렉스 박스(flex box)
플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성
서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬
웹 페이지의 레이아웃을 언제나 똑같이 유지
플렉스 컨테이너의 외부와 플렉스 요소의 내부의 모든 것들은 평소처럼 동작
플렉스 박스(flex box)는 오직 플렉스 요소가 플렉스 컨테이너의 내부에서 어떻게 위치하는가만을 정의
플렉스 컨테이너
해당 HTML 요소의 display 속성을 설정
해당 요소를 블록 타입으로 정의하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정
플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함
플렉스 요소
플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치
기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가짐
direction 속성
플렉스 라인(flex line)의 방향 전환
ex) direction 속성값 rtl(right-to-left)
페이지 내의 모든 텍스트 요소는 오른쪽에서 왼쪽 방향으로 작성
그와 동시에 플렉스 라인(flex line)의 방향도 바뀌게 되어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽
플렉스 박스 속성
display
HTML 요소에 대한 박스의 타입을 명시
flex-direction
플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정
속성 값
row : 기본 설정, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치
row-reverse : 만약 direction 속성값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치
column : 만약 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치
column-reverse : 만약 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치
justify-content
플렉스 요소의 수평 방향 정렬 방식을 설정
속성 값
flex-start : 기본 설정, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치
flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치
center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치
space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치
space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치
align-items
플렉스 요소의 수직 방향 정렬 방식을 설정
두 줄 이상을 가지는 플렉스 박스에서만 효과 있음
속성 값
stretch : 기본 설정, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치
center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치
flex-wrap
플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정
속성 값
nowrap : 기본 설정, 플렉스 요소가 다음 줄로 넘어가지 않고 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치
wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치
wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래쪽이 아닌 위쪽으로 넘어감
flex-flow
flex-direction 속성과 flex-wrap 속성을 이용한 스타일을 한 줄에 설정
align-content
flex-wrap 속성의 동작을 변경할 수 있음
align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬
속성 값
stretch : 기본 설정, 플렉스 라인의 높이가 남는 공간을 전부 차지
flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉침
flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉침
center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉침
space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포
space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포. 단, 양쪽 끝에 약간의 공간을 남겨둠
플렉스 요소 속성
order
플렉스 컨테이너 안에 있는 플렉스 요소들의 순서를 설정
margin
속성값을 auto로 설정시 수평 방향의 여유 공간을 없앨 수 있음
렉스 요소들을 서로 반대 방향으로 밀어내거나 수직과 수평 방향의 가운데 정렬을 손쉽게 설정 가능
align-self
플렉스 요소마다 서로 다른 align 속성값을 설정
align-self 속성은 플렉스 컨테이너의 align-items 속성보다 우선 적용
flex
같은 플렉스 컨테이너 안에 있는 플렉스 요소의 너비를 상대적으로 설정
https://www.tcpschool.com/css/css3_expand_flexbox
https://www.tcpschool.com/css/css3_expand_multicolumn
