04.29.2022 TIL

😸 CSS TIL

 

😽 Done it

😼 Grid container

:2차원 layout에서 사용

justify-content: normal : column 위치 조작
align-content: normal : row 위치 조작
(normal == stretch)

명시적

딱 정해 놓고 있는 부분
grid-template-rows, grid-template-columns

암시적

명시적 이외의 부분
grid-auto-rows, grid-auto-columns

grid-auto-flow

grid-auto-flow: row: row 방향으로 쌓이게 만들겠다.
grid-auto-flow: column: column 방향으로 쌓이게 만들겠다.
grid-auto-flow: (row) dense: 빈공간 제거하며 row 방향으로 정렬 (앞에 row 생략 가능)
grid-auto-flow: column dense: 빈공간 제거하며 column 방향으로 정렬

Cell 내부에 빈 공간이 있을 경우 사용가능 한 것(cell: grid 한칸)

justify-items: normal: item 전체 Cell 내부에서 column 위치 조작
align-items: normal: item 전체 Cell 내부에서 row 위치 조작

grid-template-areas

: 영역 이름을 통해 설정

1. 영역 이름 설정

.container header {
  grid-area: header;
}

2. .container에서 grid-template-areas로 구조 만들기
   header, main, aside, footer을 1. 과 같이 영역 이름을 설정하였습니다.
   aside는 자동으로 위아래 합쳐집니다.
   . 은 아무것도 없는 것(= none)

.container {
  grid-template-areas:
    'header header haeder'
    'main main aside'
    '. . aside'
    'footer footer footer';
}

grid item들 사이사이 여백 주기

grid-row-gap: 0: item들 row 여백
grid-column-gap: 0: item들 column 여백
grid-gap: 0px 0px: grid-row-gap, grid-column-gap합쳐 놓는 것

단 여기서 grid, flex를 같이 처리할 수 있는 gap이라는 것이 있습니다. 옛날 버전에서는 안되지만 잘 보고 사용하면 좋을 것 같습니다.

😼 Grid item

grid item 늘리고 줄이기

line 번호의 역순은 -를 붙여서 쉽게 파악할 수 있다.
grid-row-start: line번호: 몇번 row line에서 시작할 것인가.
grid-row-end: line번호: 몇번 row line에서 끝낼 것인가.
grid-row: grid-row-start / grid-row-end: grid-row-start, grid-row-end를 합친 것

grid-column-start: line번호: 몇번 column line에서 시작할 것인가
grid-column-end: line번호: 몇번 column line에서 끝낼 것인가
grid-column: grid-column-start / grid-column-end: grid-column-start, grid-column-end를 합친 것

span 3: 3개 확장해라

• 위의 속성 뒤에 작성을 한다.
• span: 확장
• 3: line 개수(line 번호 x)

grid item 옮기기

justify-self: normal: 개별 item Cell내부에서 column위치 조작
align-self: normal: 개별 item Cell내부에서 row위치 조작

grid item 쌓기

우선 item을 쌓기 위해서는 grid-row or grid-column을 확실히 지정해줘야 합니다. 그 후 z-index를 통해 원하는 순서대로 쌓으면 됩니다.

😼 Grid function, units

container

repeat(횟수, 단위(여러개 가능)): 반복해서 써줍니다.
minmax(최솟값, 최댓값): 최소/최대 너비 설정(최대 너비로 만들어지고 최소 너비보다 작아질 수 X)
fit-content(제한 너비): 내부 글자 등을 grid-item에 딱 맞춰주는 함수(제한 너비까지)

fr: fraction으로 사용가능한 공간(빈 공간) 너비 비율
min-content: content의 최소 너비 사용
max-content: content의 최대 너비 사용
word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 overflow할 때 줄을 바꿀지 결정

• keep-all: 들어가는 값으로 해당 값을 넣으면 한글일 경우 단어 단위로 묶어서 줄바꿈 처리를 해줍니다.

유동적으로 container의 크기에 맞게 row, column의 개수를 자동으로 조정해줄 수 있는 단위(주로 repeat()와 minmax()함께 사용)

repeat(auto-fill or auto-fit, minmax(100px, 1fr))
auto-fill: minmax로 지정된 최소 너비 우선 적용
auto-fit: minmax로 지정된 최대 너비 우선 적용

 

😺 Feeling

grid에 관해서 그냥 보는 것보다 훨씬 잘 설명을 해주셔서 이해가 잘 되었습니다.
그런데... 역시 직접 해보는것이 제일 인 것 같습니다. 이제 곧 css과제가 생기는 데 잘 해결할 수 있도록 복습을 열심히 해야 겠습니다. :)
vue 공부한 부분을 더 넣고 싶은데... 너무 더러워져서 다음에는 정리하는 방법을 생각해서 많이 작성하도록 하겠습니다. :)  그리고 오늘 뭔가 머리가 상쾌하지 않고 누가 짓누르는 것 같습니다. 조금 쉬어야 하는 타이밍인가... 우선 할 것 하고 앞으로의 일을 생각하지 않고 좀 쉬도록 해야겠습니다. ㅎㅎ

 

📖 REF

https://developer.mozilla.org/en-US/docs/Web/CSS/grid
https://v3.ko.vuejs.org/guide/introduction.html