TIL

코딩테스트 문제 7일차 문제 풀이 완료

문제풀이 내용은 github을 창조
https://github.com/jyc-coder/coding-test/commit/30bb4623242945caf4837ac40a3f79e8c5acae71

Grid

grid-template-rows : 명시적 행(Track)의 크기를 정의

grid-template-columns : 명시적 열(Track)의 크기를 정의

grid-auto-rows: 만약 grid-template-row를 설정하지 않았다면 해당 값을 통해서 알아서 채워준다.

grid-auto-flow: 암시적으로 빈공간이 발생하면 자동으로 채워 넣는 설정

gap(grid-gap) : xxx-gap의 단축속성

justify-content

• center : 수평 가운데 정렬
• end : 끝점 정렬
• space-around : 각열 좌우에 여백을 고르게 정렬
• space-between : 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
• space-evenly : 모든 여백을 고르게 정렬

align-conetent

• center : 수평 가운데 정렬
• end : 끝점 정렬
• space-around : 각열 좌우에 여백을 고르게 정렬
• space-between : 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
• space-evenly : 모든 여백을 고르게 정렬

grid 단점

== 테이블 코딩의 단점 -> 가변성이 떨어지게 되어 다른 수정을 할 때 어려움이 생길수 있다.

align-item

• start: 시작점 정렬
• center: 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
  justify-item와 비슷한 점이 많다.

grid-template-areas

css 에서 grid-area로 선언한 변수를 사용해서 칸을 나누어서 배치가 가능하다.

위의 예시에서 보면 header와 main과 footer만 배치시킨 모습이다. 3x3으로 나누었기 때문에 변수의 배치도 3x3으로 작성해서 변수를 연속적으로 작성한 곳은 하나로 합쳐질 수 있고, 공백을 원한다면 .를 입력해서 공백으로 표시가 가능해진다.