2/8 공부

position 

 

sticky :

- 기존의 자리를 유지하다가, 스크롤을 하여 웹 브라우저의 상단에 닿으면 fixed 처럼 움직임.

- 다시 제자리로 돌아가면 고정.

- 기본적으로 static처럼 작동.

- top : 0;  ->>  브라우저 기준 맨 위에 닿았을 때 작동한다.

 

backdrop-filter : 배경필터. 배경을 흐리게 또는 색상이동과 같은 그래픽 효과를 줌

 

flex :

- 기본 축(Main Axis) - 왼쪽에서 오른쪽으로 가는 수평 축.

- 교차 축(Cross Axis) - 위쪽에서 아래쪽으로 가는 수직 축. 

* 그러나 direction에 따라 기본축과 교차축의 내용이 서로 바뀐다.

*-reverse를 하면 방향도 바뀐다.

* 기본적으로 요소들은 기본 축 방향으로 진행하며, 교차축은 꽉 채운다.

 

- flex-direction : 배치할 방향

  - 기본적으로 가로 방향.(row행)

  - 세로방향(column열)

  - 왼쪽에서 오른쪽으로, 위에서 아래로 가는데, -reverse를 하면 반대로 동작.

 

- justify-content, align-items : 정렬

  - justify-content :

    - 기본축 방향 정렬

    - center : 중앙정렬

    - flex-end : 기본축의 맨 끝을 기준으로 정렬

    - flex-start : 기본축에서 맨 앞(기본)

    - space-around : 기본축에서 띄엄띄엄 배치. 서로 양 옆에 같은 공간을 가짐. : 

    - space-between : 기본축에서 양 끝에 배치.

    - space-evenly : 기본축에서 띄엄띄엄 배치. 서로 양 옆의 총 공간이 같음. 

  - align-items :

    - 교차축 방향 정렬

    - center : 중앙정렬

    - flex-end : 교차축의 맨 끝을 기준으로 정렬

    - flex-start : 교차축에서 맨 앞

    - stretch : 교차축에서 늘려서 배치(기본)

 

- flex-wrap : 요소가 넘칠 때

  -wrap : 넘치는건 줄바꿈됨.

 

- gap :  요소 간격

  - gap : 세로px 가로px 근데 마진처럼 전방향으 동작하는게 아니라, 요소가 있다면, 요소간의 간격에만 적용된다.

 

- flex-grow, flex-shrink,flex-basis : 크기 늘이거나 줄이기. 유연한 배치

  - flex-grow : 상대적인 값(기본값 0, 숫자에 비례하여 크기가 늘어남.)

  - flex-shirink : 공간이 넘칠때  width를 강제로 줄이는 정도(기본값 1, 0일때는 크기를 줄이지 않음. 숫자가 클 수록 많이 줄임.)

  - flex-basis : 요소의 시작 크기.(기본값 auto) 

  - flex-grow, flex-shrink, flex-basis를 동시에 사용 가능 : flex : 1 0 100px

 

Grid

- 가로 세로 두 방향(2차원) 으로 배치할 수 있는 것.

- 왼쪽에서 오른쪽으로(column),위에서 아래(row)

- 각 칸을 나누는 줄 : grid line

- 각 칸 : grid cell

 

 

- grid-template-rows 

- grid-template-columns : 격자 나누기 = 한 줄을 입력한 값으로 나눈다.

ex) grid-template-rows : 10px 10px 10px; -> 10px 세칸

grid-template : 10px 10px 10px / 20px 20px 20px

-> 가로(columns) / 세로(rows)

 

Q.크기를 유동적으로는 불가능한가

A. 가능.

 

gird-template : 1fr 1fr 1fr ; - 1 : 1: 1의 비율. 상대적인  수치를 넣으면 됨.

 

*유동 크기를 정해줄 수도 있음.

grid-template : minmax(200px,300px) - minmax에도 fr 단위를 쓸 수 있는데, MAX값에만 사용 가능.

*반복적인 처리

repeat(횟수, 사이즈)

 

- gap : 간격

flex 와 사용법이 완전히 같음.

 

- grid-auto-rows

- grid-auto-columns: 크기 미리 정하기

따로 rows/columns의 값을 정하지 않았을때 사용.

 

우선 grid-template-rows/columns 로 값 선언 후 

grid-auto-rows/columns : 값.

ex) gid-auto-rows : 200px; -> 모든 로우값이 200px 

 grid-auto-rows : 100px 200px 300px; -> 100,200,300px 이 번갈아가면서 나옴.

 

- grid-row/column, span : 원하는 위치에, 여러 칸에 걸쳐서 배치

grid는 왼쪽 위 모서리가 (1.1)이다. 그래서 1씩 증가하며 칸을 찾을 수도 있고,

           우측 아래 모서리는 (-1,-1)로 -1씩 감소하며 칸을 찾을 수도 있다.

ex) 5X5 cell의 grid는 (3,3)과 (-3,-3)이 같다.

사용법

- div를 (3,3)의 자리로 옮기고 싶을때

<div>

  <style>

    grid-row : 3;

    grid-column : 3;

  </style>

</div>

*주의할점. grid 모서리 격자의 번호지 셀의 번호가 아님. 4x5의 칸을 가지고 있는 그리드의 경우

(1,1)~(5,6) 까지의 모서리 격자 번호가 존재. 

예를 들어 ex)

 

(2,3)cell ~ (4,5)cell 의 자리까지 같은 색으로 채우고 싶을때

<div>

  <style>

    grid-row : 2 / 5;  /* row 2번줄 ~ 5번줄까지 */

    grid-column : 3 / 5;  /* column 3번줄 ~ 6번줄까지 */ 

또는

    grid-row : 2 / span 3; /* row 2번줄부터 아래로 3칸 */

    grid-column : 3 / span 3; /* column 3번줄부터 오른쪽으로 3칸 */

  </style>

</div>

 

- grid-area, grid-template-areas : 이름으로 배치

 

  grid-area : 이름;   - 이름 선정.

  grid-template-areas : "이름, 이름" "이름,이름"; - "앞은 row,뒤는 column값"

 

ex)

<div class = "a">

  <div class = "b">

  </div>

  <div class = "c">

  </div>

</div>

 

css

.a{

  display : grid;

  grid-template:

    repeat(2, 1fr) / repeat(2, 1fr)

    grid-template-areas : "r g" "r g";

}

 

.b{

gird-area : r;

}

.c{

grid-area : g;

}