css문법 (flex~grid)

• flex는 class를 부여하여 부모속성인 container와 내부에 개별적인 item으로 부여를 할 수 있다. 
• container의 경우 display, flex-flow, justify-content, align-item 의 속성을 부여할 수 있고, 
• item의 경우 order, flex, flex-grow, flex-shrink, flex-basis, align-self의 속성을 부여할 수 있다. 
• flex container의 display속성은 flex는 블록 요소로 수직으로 쌓고, inline-flex는 인라인 요소로 수평으로 쌓는 점을 기억하자

• 

  display : flex; 블록요소

  

flex-container 

• flex-flow = 주축으로 여러줄을 묶는다. 
• flex-direction : items의 주축으로 주요 x, y축을 설정한다. 
• flex-direction의 값 =row : 수평으로 왼쪽에서 오른쪽 row-reverse: 수평, 오->왼 column : 수직, 위 ->아래 column-reverse :수직, 아래 ->위  reverse(반대)
•  

items 들의 주축

row(행) 의 main-axis의 경우 수평으로 ,cross-axis의 경우 수직으로, column (열)의 main-axis 의 경우 수직으로, coss-axis의 경우 수평으로

방향에 따라서 주축과 교차축이 다름으로 상대적이다. 

flex-wrap : items 을 여러줄 묶음

• container에 부여함 
• no wrap : 기본값으로 모든 item을 여러줄로 묶지 않는다. 한줄로 표시함 , flex의 크기는 container에 맞춰짐 flex-bases를 auto로 가지기 때문에 가로세로가 변하는 것이다. 
• wrap : items을 여러줄로 묶음, 아이템의 크기가 유지되면서 이동됨 
• wrap-reverse : items을 역방향으로 묶음 

• 

  wrap-reverse

  justify-content =wrap 설정후 사용가능, 주축의 정렬방법을 설정함
• flex-start :  시작점(defult값) 
• flex-end :  끝점
• center : 가운데
• space-between : 끝에 양쪽을 맞추고 나머지 여백을 균등하게 분배함
• space-around : 앞쪽부터 여백을 균등하게 분배함

align-content = 주축의 정렬방식을 확인하며, 교차축의 정렬방식을 설정함, 1줄의 경우 align-items을 사용함, 주의점으로 flex-wrap이 items가 2줄이상이고, 여백이 있어야지 사용이 가능하다. 

• stretch : 기본값으로 container의 내용을 채우기 위해 items을 여백없이 늘려서 꽉꽉채움, 높이값이 정해지지 않으면 자동으로 설정되며, 높이값을 fix시킨다면 여백이 생기게 된다.
• flex-start : 전체적으로 위쪽 정렬 , 주축이 달라지면 위치가 달라진다
• flex-end : 전체적으로 아랫쪽 정렬 , 주축이 달라지면 위치가 달라진다
• center : 가운데
• space-between : 위아래 items을 끝에 설정하고 여백이 균등하게 
• space-around : 가지고 있는 여백을 위아래 균등하게 입력함

align-items = 교차축의 items의 정렬 방법 

• align-content : 줄이 여러줄이며 2줄이상일 경우 입력해서 사용, 여백이 존재함
• align-items : 1줄인 경우 사용한다. 
• stretch : 기본값으로 한줄의 교차축을 늘린다. 
• flex-start : 한줄의 시작점에 위치
• flex-end :  한줄의 끝점에 위치 
• center : 센터에 정렬
• baseline : 문자 기준선에 정렬함, 글자의 크기는 다르지만 문자열 형태의 기준으로 정렬함.

flex-items 

• order :  순서를 설정함, items에게 숫자를 지정하여, 크기가 클수록 뒤로 밀리며, 음수 값은 허용된다. 숫자가 작으면 앞으로 오게 설정됨, html 작성과 상관없이 순서가 변경되며, 기본값은 '0'이다. order 숫자가 같으면 html의 구조를 따른다. 
• flex = flex-grow , flex-shrink, flex-basis 단축속성으로 사용
• flex-grow : 증가 너비 
• flex-shrink : 감소 너비 
• flex-basis : 공간 배분 하기 전의 기본 너비 
• align-self : cross-axis (교차축) 에서 item의 정렬 방법을 설정 align-content-items 하나의 items에 부여

flex-grow 

• 기본값은 '0' 
• item의 증가너비비율을 설정할 수 있음
• 숫자가 크면 더 많은 너비를  차지함
• item이 가변너비가 없고, 값이 0이면 효과가 없음
• flex-grow 의 값이  1 , 2,  1일 경우 총값 4로 나눠 flex-grow의 비율만큼의 너비를 정한다. 총 너비를 몰라도 너비 설정이 가능하다. 다른 너비가 px가 적용이 되어 있다면, 완벽하게 너비를 설정했다고 할 수 없다. 
• flex-grow 는 증가너비의 비율은 width 로 인해 영향을 받아, flex-basis 로 flex의 가변 범위에 입력하여 기본 값을 정하는 것이 좋다. 

flex-shrink = item이 감소하는 너비의 비율을 설정한다. 

• 숫자가 높으면 너비가 감소
• item이 가변너비가 없고, 값이 0일 경우 효과가 없음
• contain이 감소하지 않을 때는 요소가 가지고 있는 flex-basis(요소의 기본너비) width,height(고정너비)를 설정해 놓았을 때이다. 
• 기본값은 1 이다.
• flex- basis가 200px이고 flex-shrink가 2일경우 와  flex- basis가 200px이고 flex-shrink가 1일 경우 의 계산방법: flex- basis와  flex-shrink을 곱해줌 (200*2 =400 , 200*1=200 )= 4:2 = 2:1의 값이 나옴 2+1 = 3 ->2/3+1/3 으로 줄어든크기에 곱해준다. (200px-(90/3*2))=140px  (200px-(90/3*1))=170px 의 값이 나온다. shrink이 크면 더감소한다. 
• basis 200px shrink: 2 =400=4/5= 200px-(90/5*4)=128px
• basis 100px shrink: 1 = 100 =1/5 = 100px-(90/5*1)=82px

 flex-basis = item의 공간배분전의 기본너비로 값이 auto이다. 

• box 1= 100px grow:1 basis : 0 grow에만 영향 , 일정너비는 0으로 설정됨
• box 2= 100px grow:1 basis : 0 grow에만 영향 , 일정너비는 0으로 설정됨
• box 3= 200px grow:2 basis : 0 grow에만 영향 , 일정너비는 0으로 설정됨
• box 1= 100px grow:1 basis : auto content너비를 제외해서 나머지 너비로만 계산한다. content가 가지고 있는 기본너비를 사용, grow와 상관없이 기본너비 설정
• box 1 = grow:1 basis : 100px = grow의 경우 1/4 (100/4*1) =전체넓이 = 125px
• box 2 = grow:1 basis : 100px = grow의 경우 1/4 (100/4*1) =전체넓이 = 125px
• box 3 = grow:2 basis : 100px = grow의 경우 2/4=1/2 (100/2*1) =전체넓이 = 150px

flex = item의 너비를 설정하는 단축속성으로 (띄어쓰기로 구분)

• 증가너비 감소너비 기본너비; grow shrink basis; 기본값 0 1 auto
• 주의점으로는 flex : 1; 할경우 grow는 1로 변하고 shrink의 값은 0으로 basis의 값을 명시적으로 작성하지 않으면 0으로 입력이 된다. 
•  basis auto는 너비를 지정해야하며, basis=0=너비여백을 맞추게 된다. flex의 값을 auto로 설정시 flex : 1(증가 ) 1(감소) auto(단축);이렇게 작성해야한다. 

align-self = 교차축에서 개별item의 정렬을 설정함

• container에 부여하는 것은 align-items 이다. 즉, item에 부여하는 값이 아니다. 
• 특정 item에 적용하고 싶을 때 self를 사용한다. auto가 기본값으로 align-item의 속성을 물려받는다. 
• align-item보다 align-self가 우선 적용된다. 
• .container .item2{align-self:center;}
• .container .item3{align-self:center;}
• .item:nth-child(2){align-self:center;}처럼 개별적로만 속성 적용이 가능하다

Grid = 2차원의 레이아웃의 시스템을 제공한다. (행과 열)

• flexible box :  1차원의 레이아웃으로 다차원에 적용하기 어렵다. 
• css grid의 경우 Hack으로 (핵) 불린 다양한 레이아웃으로 만들어진다. 고차원의 대체 방식을 해결하기 위해 만들어 졌다. 
• css grid의 경우 firfox를 이용하여, 그리드 값을 확인 할 수 있게 작업하는 것이 좋다. 
• grid의 properties container / items은 속성에 차이가 있다. 

Grid 의 container의 경우 display값은 grid로 설정해주어야한다. grid의 경우 block요소, inline-grid 의 경우 inline 요소이다. 

grid-template-columns : 명시적 열의 크기 

• 가변하는 넓이의 양을 비율에 맞게 작성함 Fr = 비율 1:1인 경우 1fr 1fr 2:1인경우 2fr 1fr처럼 비율을 작성가능하다.

grid-template-rows : 명시적 행의 크기 

5개이상의 행과 열을 설정할 경우 실수 할 수 있기 때문에 repeat의 함수를 이용하면 좋다. 

• repeat(반복함수) (몇회? , 무엇을 반복할 것인가?)-container에 적용한다. 

grid-row  , grid-column = item을 배치하는, 특정값을 배치한다. 

• :nth-child(n)을이용하여 item을 선언할 문장을 만들고 열을 확장한다 (1/3 :1~3열) row : 1/2 (1~2행)
• .item:nth-child(n) 처럼 그리드 숫자를 이용하여, 배치가 가능하다. 

grid-template-area = 지정된 그리드 영역의 이름을 (grid-area:grid-item의 이름 )을 참조하여, 그리드 탬플릿을 생성한다. 

• {grid -template-area : "header header header"
•                             "main    main    main"
•                             "footer  footer  footer" }
• header{grid-area:header;}
• main{grid-area:main;}
• footer{grid-area:footer;} 영역을 정한다. 빈칸을 만들 경우 '.'만 입력하게 되면 빈칸이 생성된다. 
• 원하는 모양을 만들기 위하여 단어를 작성하여 칸을 생성할 수 있다. 
•  

  

  

  완성

  row-gap(grid-row-gap ) = 행과 행사이의 간격 (gutter : grid-line을 지정함)column-gap(grid-column-gap ) =열과 열사이의 간격 : 선의 크기 
• gap = row column으로 단축으로 입력가능하다 (띄어쓰기이용)
• grid-의 접두사의 경우 폐기가 되었으나 일부 브라우저 지원을 위해서 접두사를 사용해야할 경우가 있다. 

grid-auto- = 암시적 행 track의 크기를 정의한다.  row, column을 붙여 작성가능

• 명시적이란 확실하게 작성한 값을 의미, 암시적이란 명시적 밖에있는 가벽의 행과 열을 정의 하는 것이다. 
• template : 명시적, auto : 암시적
• 자동으로 늘어난 암시적의 경우 음수를 사용하지 않는다 . 
• 만들지 않은 행과 열이 만들어진 것 

• template	auto
  설정한 명시된 값	만들지 않은 행과 열이 만들어짐, 가벽
  음수, 양수 사용	양수만 사용
  배치한 item	배치하지 않은 item

   

grid-auto-flow = 배치하지 않은 아이템 , 어떤 방식의 '자동배치 알고리즘' 이용함 ->채워지거나 안채워지거나 

• row : 기본값, 수평축으로 처리 할 지 정의함
• column : 수직축으로 처리 할 지 정의함
• row-dense : 수평행을 따라서 차례로 배치되며, 빈곳을 매움
• column-dense :  수직열을 따라서 차례로 배치되며 빈곳을 매움column은 dense에서 생략이 불가능하다. 

• 

  3번행이 앞으로 간 것을 확인 할 수 있다. 

  grid-template-rows와 column 의 라인번호/ 선의 번호 나눌때 /에 유의한다. fr 와 repeat()함수로 손쉽게 이용가능하다. 

grid-template : [선의 이름 ] 1행크기 [선의 이름 ] 2행크기 [선이 이름] 3행 크기 처럼 선의 이름을 정의하면서 작성가능하다. 

• [line start] 100px [line end line start] 200px ..[중복된 이름값을 사용 할 수 있다. ]
• 너비가 중요하기 때문에 이름은 복잡함으로 특별하지 않으면 이름을 붙일 필요가 없다.
• 1. 명확하고, 중요한 부분에 사용하기, 2. 대괄호 안에 따음표는 들어가지 않는다는 점 유의하기 

grid-template-colums : 1200px의 12 column grid를 만들어야 할 경우 repeat(12, 100px)로 이용이 가능하다. repeat (4,100px 200px 50px) 크기를 다르게 입력해도 사용이 가능하며, 패턴을 입력할 때, 반복된 값을 입력할 때 사용하기 좋다. 

grid-row-start / grid -row-end = grid-row로 단축키로 사용이 가능하다. 1(시작)/4(끝으로 채워라)

• span = start (-)로 생각한다. end(+) 값으로 생각한다. 
• start : 1 end : span 3 = 1/ span 3 = 3+1 = 4칸 1~4칸까지 입력됨 
• start : span 2 end: 6 = span 2/ 6 =6-2 =4칸 4~6칸까지 입력됨
• start 는 -로 end는 +로 인식하여 위치를 알 수 있다. 

 grid-area : 

• 1 : gird-template-areas의 영역이름 으로 설정 가능하다. 
• 2 : grid-row와 grid-column의 단축속성으로 사용 가능하다. 
• 1번처럼 영역의 이름으로 사용했을 경우 , 2번의 적용은 안된다. 
• grid-area : row의 시작/ column의 시작/ row의 끝 / column의 끝 으로 사용된다.
• grid-row : 2/3 . grid-column : span2 / -1(-3~-1) =grid-area : 2/span 2/ 3 /-1 ;작성된다.

 grid-template =grid-template-rows,grid-template-column,grid-template-areas의 단축속성

• grid-template-rows / grid-template-columns = grid-template-areas;
• [1행 시작선] "AREAS"행너비(선의너비) [1행끝선이름][2행시작선이름].../grid-template-column;
• grid-template : "header header header" 80px 단축속성으로 사용함
•                     "main      .        main"   350px(행의 크기와 이름 지정)
•                     "footer  footer  footer"   130px  /2fr  100px   1fr (열의 크기도 같이지정)

grid =  grid-template- ,grid-auto- 의 단축속성이다. rows/columns이다.

• template의 문법사용이 가능하다. 
• grid-auto-flows grid-auto-rows / grid-template-columns;(행)
• grid-template-rows/grid-auto-flows grid-auto-columns;(열) 을이용하여 가벽설정가능하다. 
• grid = 100px 200px /1fr 2fr;
• /을 이용하여 구분이 가능하다. dense의 값은 auto-flows를 뒤에 붙여 작성한다. (여백없이 채우면서 작성할 것 인가?)
• grid:100px 100px /auto-flows:150px 로 암시적 여백을 지정하였고, column의 값을 입력하였다. 
• 행에 입력할 경우 grid : auto flow 150px / 100px 100px; 로 입력이 가능하다. 

grid:auto-flow dense 150px/ 100px 100px;

• grid-template-columns : 100px 100px;
• grid-auto-flows : row dense ; (앞에 채우기 ) 
• grid-auto-rows : 150px 
• 단순하게 암시적, 명시적으로 표현을 할 수 있음 
• 위에 처럼 개별로 작성해도 좋다. 

align-content = grid content 수직열을 정렬할 때 사용한다. 세로너비가 grid container보다 작아야한다. 

• normal = 기본값으로 stretch 와 값이 동일하다. 
• start : 시작점 정렬
• end : 끝점 (고르게 정렬함)
• center : 수직 가운데 
• space-around : 각행 위아래에 여백을 고르게 정렬
• space-between : 행을 시작점과 끝점에 위치한후 나머지 여백을 고르게 
• start-evenly : 모든 여백을 고르게, 동일하게 정렬함
• stretch : 열축을 채우기 위해 grid content를 늘림(수직=열) : 그냥 늘림

justify-content = grid content 수평열을 정렬할 때 사용함. 가로 너비로 grid container보다 작아야한다. 

• normal = 기본값으로 stretch 와 값이 동일하다. 
• start : 시작점 정렬
• end : 끝점 (고르게 정렬함)
• center : 수직 가운데 
• space-around : 각행 위아래에 여백을 고르게 정렬
• space-between : 행을 시작점과 끝점에 위치한후 나머지 여백을 고르게 
• start-evenly : 모든 여백을 고르게, 동일하게 정렬함
• stretch : 가로축을 채우기 위해 grid content를 늘림(수평=행) : 그냥 늘림

align-items = item의 수직정렬 grid-item의 세로 너비가 자신이 속한 행보다 작아야함. 

• normal = 기본값으로 stretch 와 값이 동일하다. 
• start : 시작점 정렬
• end : 끝점 (고르게 정렬함)
• center : 수직 가운데 
• stretch : 열축을 채우기 위해 grid content를 늘림(수직=열) : 그냥 늘림

justify-items =item의 수평정렬 grid-item의 가로 너비가 자신이 속한 행보다 작아야함. 

• normal = 기본값으로 stretch 와 값이 동일하다. 
• start : 시작점 정렬
• end : 끝점 (고르게 정렬함)
• center : 수직 가운데 
• stretch : 열축을 채우기 위해 grid content를 늘림(수직=열) : 그냥 늘림

  ---

  여기까지가 container에 입력하는 값이다. 

align-self = grid-item에 수직정렬 , 각각의 아이템들의 수직정렬을 줄 수 있음, 따로 각각

justify-self = grid-item에 수평정렬 , 각각의 아이템들의 수평정렬을 줄 수 있음, 따로 각각

.item:nth-child(n)을 많이 사용한다. 

order = 그리드 아이템의 정렬되는 순서를 변경한다. 0부터 시작하며, 숫자가 작을수록 앞으로 온다. 음수도 사용가능하다. 

z-index = position에서 사용가능하고, position이 있어야 사용이 가능하다. 아이템이 쌓이는 순서를 변경 할 수 있다. 

• .item:nth-child(1) {grid-area:1/1/2/3;}
• .item:nth-child(2) {z-index:1; grid-area:1/2/2/3;} -->맨위에 쌓임, 위치결정가능
• .item:nth-child(3) {grid-area:2/2/3/4;}

grid funtions =주요 함수들

• repeat = 반복되는 행과 열의 크기의 정의를 작성
• ('반복되는 횟수'와 , '행과 열의 크기의 정의')를 인수로 사용한다. 
• grid -template-columns: repeat (9, 100px);
• grid-template-rows: [row-start]200px[row-end row-start] 200px[row-end];
• =repeat(2 ,[row start]200px[row-end])
• grid-template-columns: (3 ,[column-start]100px[column-end])
• ==grid-template : repeat (2,[row-start] 200px [row-end]) / repeat (3[column-start] 100px [column-end]);
• column : 1fr 2fr * 6번 반복시 repeat (6, 1fr 2fr)

minmax () =행과 열의 '최소, 최대 크기'를 지정하는 함수 

• 인수 (최소값, 최댓값) 
• grid-template-rows, columns  /grid-auto-rows,columns -> min-width 와 max-width 속성을 동시지정 하는 것과 유사하다. 
• columns : minmax (100px, 1fr) minmax(200px ,1fr); 1번째열, 2번째열 
• container의 크기가 줄게 되면 overflow가 된다. 
•  

overflow

fit-content() =함수는 행/열 크기를 그리드 아이템이 포함하는 내용크기에 맞춘다. 

• 최대한의 컨텐츠에 맞춘다고 하는 함수이다. 
• minmax (auto(최소) , max-content )와 유사한 동작을 한다. 
• column: fit-content(300px) fit-content(300px) 처럼 최대크기를 제한한다. 

grid-unit =단위 

fr = fractional unit : 사용 가능한 공간에 대한 비율을 의미한다. 

• 1번째는 1/3칼럼 , 2번째는 2/3칼럼 3번째는 100px 4번째는 25%로 설정시 column = 1fr 2fr 100px 25%;
• 몇대몇으로 사용할 것 인지에 대해서 fr을 작성한다. 

min-content =아이템의 contents의 최소 너비를 의미 

• 한국어로 작성하게 될 경우 한글자씩 나오게 된다 word-break:keep-all;을 사용하게 된다면, 외국어처럼 정렬이 된다.

max-content =아이템의 contents의 최대 너비를 의미 

auto-fill ,auto-fit =행과 열의 개수를 그리드 컨테이너 및 크기에 맞게 자동으로, 임시적으로 조정함.

• repeat()함수와 함께 사용하며, 행/열 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용함(반응형 그리드) 
• auto-fill , auto-fit 간단한 차이점 제외하고,동일하게 동작함
• auto-fill = 자동으로 뭔가를 채움, 남는공간 그대로 유지
• auto-fit = 자동으로 일시적으로 행이 채워지고 만들어짐, 가변시에 아이템과 갯수를 변경해줌 남는공간 축소
• 차이점 : grid container 모든아이템을 수용하고 남는 공간이 있을 때 발생됨
•  

auto-fill

auto-fit