bootstrap4

부트스트랩3에서 부트스트랩4로 버전업이 되면서 바뀐 변화
1)스크린 사이즈가 재정의
2)Flexbox 사용가능
3)그리드 단위가 px->em(포토샵 소스 작업시 유의), 미디어쿼리도 px->em, 폰트단위도 rem을 사용
4)글리피콘 미지원->open source인 SVG를 icons으로 활용
5)일부 클래스명의 변화(.panel, .well 없어지고 .cards 새로생김, .table-condensed->.table-sm으로 변경 등..)
6)Tooltip 및 popovers의 기능향상(자동배치)

그리드 시스템은 한 요소가 차지할 크기를 해상도별로 따로 지정해줄 수 있는데 부트스트랩4에서 사용하는 그리드 시스템의 클래스명은 col-xl-*, col-lg-*, col-md-*, col-sm-*, col이다.

em단위는 본인의 바로 직계부모가 가지고 있는 font-size의 크기*본인의 font-size 사이즈 크기에 비례해서 전체크기를 계산한다.

rem의 활용
최상위 root인 html이 가지고 있는 font-size 크기에 비례해서 본인의 크기를 계산한다.

flex-flow:flex-direction flex-wrap속성 ; 두가지를 한꺼번에 지정하는 속성이나 부트스트랩은 가지지 않은 클래스명이다.

1.부모요소에 지정하는 속성

1)기본축 속성 display:flex
2)기본축 속성 display:inline-flex
3)기본축 속성 display:flex+flex-direction:row(기본값)
.d-flex를 가지고 있는 부모요소에 .flex-row를 주면 자식요소가 가로로 배치되면서 기본축이 가로축이 된다.=>기본값
3)기본축 속성 display:flex+flex-direction:column
.d-flex를 가지고 있는 부모요소에 .flex-column을 주면 자식요소가 세로로 배치되면서 기본축이 세로축이 된다
4)기본축 속성 display:flex+flex-direction:row-reverse
.d-flex를 가지고 있는 부모요소에 .flex-row-reverse를 주면 자식요소가 가로로 배치되면서 기본축이 가로축이 되면서 아이템의 순서가 반대로 바뀌면서 우측정렬이 된다.
5)기본축 속성 display:flex+flex-wrap:nowrap(기본값)
.d-flex를 가지고 있는 부모요소에 .flex-wrap:nowrap(기본값)를 주면 자식요소의 갯수가 많으면 부모가 감싸지 못해서 부모 밖으로 아이템이 흘러넘친다.
6)기본축 속성 display:flex+flex-wrap:wrap
.d-flex를 가지고 있는 부모요소에 .flex-wrap:wrap를 주면 자식요소의 갯수가 많았을 때 부모가 감싸면서 자동으로 아이템이 밑으로 떨어지고 부모 요소안에 감싸진다.
7)기본축 속성 display:flex+flex-wrap:wrap-reverse
.d-flex를 가지고 있는 부모요소에 .flex-wrap:wrap를 주면 자식요소의 갯수가 많았을 때 부모가 감싸면서 자동으로 아이템이 밑으로 떨어지고 <mark>아이템의 위아래 순서가 바뀌면서 부모 요소안에 감싸진다.
8)기본축 속성 display:flex+flex-flow:direction과 wrap을 속기법으로 작성할 수 있다.
flex-flow는 부트스트랩에는 없지만 flex-direction과 flex-wrap을 한꺼번에 지정할 수 있다.
9)기본축 속성 display:flex+justify-content:center
아이템들을 부모 기준 기본축 기준으로 중간에 배치한다.
10)기본축 속성 display:flex+justify-content:space-around
아이템들을 부모 기준 기본축 기준으로 배치를 하면서 좌우의 공간을 포함해서 남은 공간을 균등하게 분배해서 배치된다. 아이템간의 간격은 부모 좌우 패딩공간의 2배이다.
11)기본축 속성 display:flex+justify-content:space-between
아이템들을 부모 기준 기본축 기준으로 배치를 하면서 좌우의 아이템들은 좌우에 붙이고 남은 아이템들간의 간격을 동일하게 유지한다.
12)서브축 속성 display:flex+align-items:stretch
부모요소의 높이에 따라 자식요소의 높이가 같이 늘어난다.
13)서브축 속성 display:flex+align-items:flex-start
자식요소의 길이가 서로 다를때 본인축 기준으로 앞쪽으로 배치가 된다.
14)서브축 속성 display:flex+align-items:flex-center
자식요소의 길이가 서로 다를때 본인축 기준으로 중간으로 배치가 된다.
15)서브축 속성 display:flex+align-items:flex-end
자식요소의 길이가 서로 다를때 본인축 기준으로 뒤쪽으로 배치가 된다.
16)서브축 속성 display:flex+align-items:baseline
자식요소의 길이가 서로 다를때 텍스트의 위치를 기준으로 같은 위치에 정렬한다.
17)서브축 속성 display:flex+align-content:flex-end
align-items-*는 한 줄을 기준으로 정렬하고 align-content-*는 아이템들을 두 줄 이상일 때 그룹으로 묶어서 정렬한다.

flexbox(자식인 item 본인에게 지정하는 속성들)
1)order-숫자(0~12)
아이템의 순서를 바꾸기 위해서는 .order-0~.order-12까지를 부여할 수 있고 기본값은 0이다. .order-fisrt:-1을 가지므로 가장 앞으로 이동한다. .order-last:13을 가지므로 가장 뒤로 이동한다.
2)flex-grow-숫자
아이템의 길이를 부모요소에 남아있는 빈공간을 균등하게 분배해서 flex-grow-넘버에 부여한 수치만큼 배수로 본인의 길이가 늘어난다. 기본값은 flex-grow-0이고 flex-grow-1을 가진 아이템이 나머지 빈공간을 모두 차지하면서 늘어난다.
3)flex-shrink-숫자
아이템의 길이를 담는 부모요소의 길이기ㅏ 좁을 때 flex-shrink-숫자를 부여한 요소의 너비는 숫자/1로 줄어들고 flex-shrink-0을 주었을 때에는 다른 요소의 2배 너비로 늘어난다.
4)flex-fill/align-self
.flex-fill은 아이템의 길이를 담는 부모요소의 길이가 더 넓을 때 flex-fill을 아이템 모두에게 주면 균등하게 너비를 분배하여 할당한다.
.align-self-center를 주면 자기자신 item의 정렬값을 센터로 정렬한다.
.align-self-end를 주면 자기자신의 item정렬값을 뒤로 정렬한다.
.align-self-start가 기본 정렬값으로 앞으로 정렬한다.

포인트
1.flex를 활용시 박스를 감싸는 부모요소에 display:flex를 지정한다.
2.flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content는 부모와 자식 중 부모요소에 지정하는 속성이다.
3.order, flex-grow, flex-shrink, flex-basis, flex, align-self는 부모와 자식 중 자식요소에 지정하는 속성이다.
4.부모요소에 flex-direction:row로 설정하면 가로가 기본축과 서브축 중 기본축(main axis)이 된다.

1.부트스트랩4에서는 이미지를 반응형으로 구현하기 위해 클래스 .img-fluid를 모가 둥근 사각형을 만들기 위해 .rounded, 동그랗게 만들기 위해 .rounded-circle을 사용한다.
2.컨텐츠 요소를 가로기준 센터로 배치하기 위한 클래스명은 .mx-auto이고 세로기준 센터로 배치하기 위한 클래스명은 .my-auto이다.
3.회색 배경을 만들기 위해 .bg-dark클래스명과 .bg-secondary클래스명을 사용한다.
4.요소를 왼쪽, 오른쪽으로 float하기 위해 .float-left, .float-right를 사용하고 그 다음으로 오는 요소가 float되지 않도록 부모요소에 .clearfix를 준다.