Grid system
이번 프로젝트에 grid system을 사용할꺼 같아 공부 하고 정리한다.
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다.
CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈입니다.
CSS Grid
Grid Container Properties
Grid Container를 위한 속성들은 다음과 같습니다.
속성 의미
display 그리드 컨테이너(Container)를 정의
grid-template-rows 명시적 행(Track)의 크기를 정의
grid-template-columns 명시적 열(Track)의 크기를 정의
grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
grid-template grid-template-xxx의 단축 속성
row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정의
gap(grid-gap) xxx-gap의 단축 속성
grid-auto-rows 암시적인 행(Track)의 크기를 정의
grid-auto-columns 암시적인 열(Track)의 크기를 정의
grid-auto-flow 자동 배치 알고리즘 방식을 정의
grid grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
place-content align-content와 justify-content의 단축 속성
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items 그리드 아이템들을 수평(행 축) 정렬
place-items align-items와 justify-items의 단축 속성Grid Item Properties
Grid Item을 위한 속성들은 다음과 같습니다.
속성 의미
grid-row-start 그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end 그리드 아이템의 행 끝 위치 지정
grid-row grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start 그리드 아이템의 열 시작 위치 지정
grid-column-end 그리드 아이템의 열 끝 위치 지정
grid-column grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self 단일 그리드 아이템을 수직(열 축) 정렬
justify-self 단일 그리드 아이템을 수평(행 축) 정렬
place-self align-self와 justify-self의 단축 속성
order 그리드 아이템의 배치 순서를 지정
z-index 그리드 아이템의 쌓이는 순서를 지정
한주를 마무리하며
이번주는 실전이 시작 되는 주이기도 했고 사실 걱정이 많이 됬다.
(나의 실력이 과연 실전을 할만한 실력일까? 매일 매시 매분 되물었던거같다.)
나름 시작은 순조로운거같았다.
걱정하던 실력은 질문해가며 해결해 나갔다.
(사실 시작 전에 공부할 시간이 전혀 없고 실전을 할수있는 실력이 기본으로 갖춰줘야된다고만 생각했다.)
하지만 꼭 그런건 아니였다 공부 할시간은 꽤있었다.
(사실 조원 중 잘하시는 분이 있어서 그런것일수도 있다. 아니 그런거 같다.😅
덕분에 질문하며 맡은 부분 기능 구현은 어느정도 한거같았다.
사실상 이번주가 제일 기능 구현하는데 가장 공부가 된거 같다.
이제 슬슬 보이기 시작하는거 같다.
다 할줄 아는건 아니지만 어느정도 이해하고 보는 눈이 생긴거 같긴하다.
정말 큰 발전이라고 생각한다.
그래서 일까 이번주말 쯤엔 전혀 집중을 못하고 멀해야할지 모르는 사람 처럼
내가 해야할부분을 찾아서 하지 않은거 같았다.
오늘은 grid system을 사용한다는 말을 듣고 부랴부랴 강의를 듣고 사용법을
강의를 보며 공부했다.
매주 그랬듯 팀에 도움이 되도록 미친듯이 노력하자.
많이 몰라도 팀에 도움일 될수있다.
나 자신을 발전시켜 팀에 도움이 될수있도록 노력하자
