What I Learned Today
오늘 오전에는 Grid에 대해 자세하게 배웠다.
- Grid Template : 공백으로 구분된 값 리스트를 해석하여 그리드 행, 열을 설정한다.
- grid-template-rows : 열 크기
- grid-template-rows : <열의 첫번째 그리드> <열의 두번째 그리드> <...>
- grid-template-columns : 행 크기
- grid-template-colums : <행의 첫번째 그리드> <행의 두번째 그리드> <...>
- fr 단위 : 그리드 컨테이너 내의 공간 비율을 분수로 나타낸다.
- repeat(4, 1fr) : 1fr을 4번 반복한다는 뜻이다.
- minmax(최소크기, 최대크기) : 최소한 최소크기, 최대는 최대크기로 늘어나도록 범위를 준다.
- grid-template-rows : 열 크기
- Grid Item : 그리드 컨테이너의 자식 요소들
- grid-row-start 또는 end : 열의 처음과 끝
- gird-column-start 또는 end : 행의 처음과 끝
- cell 하나에 아이템을 배치할거면 start만 알려줘도 된다.
- grid-row : start / end : grid-row-start와 end를 합쳐서 줄인 방법이다.
- grid-column : start / end : grid-column-start와 end를 합쳐서 줄인 방법이다.
- grid-area : row-start / column-start / row-end / column-end
- 위에 언급한 모든것을 줄인 속성이다.
- grid-template-areas : 실제 표처럼 하나하나 배치를 할 수 있는 방법이다.
- 대신 속성의 이름을 지정해줘야 한다.
- Grid Align : 말 그대로 그리드에서 정렬을 하는 방법이다. flex와 같은 방법은 서술하지 않겠다.
- 콘텐츠 정렬
- justify-content : 그리드 컨테이너 가로축 정렬
- align-content : 그리드 컨테이너 세로축 정렬
- 아이템 정렬
- justify-items : 그리드 아이템 가로축 정렬
- align-items : 그리드 아이템 세로축 정렬
- place-items : align-items와 justify-items를 같이 사용할 수 있다.
- place-items : <align-items 속성값> <justify-items 속성값>
- 개별 아이템 정렬 : 자식 요소에서만 사용이 가능하다
- justify-self : 자식중에서도 자신만 가로축 정렬
- align-self : 자식중에서도 자신만 세로축 정렬
- place-self : 자식 요소에 사용하면 개별 적용할 수 있다.
- place-self : <align-self 속성값> <justify-self 속성값>
- 콘텐츠 정렬
오후에는 Grid 실습을 했다. 그리고 애니메이션 기초를 배웠다.
- Transition : 전달되는 중간 사이의 효과를 보여준다.
- transition-property : 스타일링 속성들을 속성값에 넣으면 애니메이션이 적용된다.
- 예) transition-property: background, border-radius;
- transition-duration : 애니메이션이 실행되는 시간을 밀리초 또는 초 단위를 사용한다.
- 이때 순서는 transition-property에 입력한 순서대로 적용된다.
- 예) transition-duration: 1s, 1000ms;
- transtion-delay : 애니메이션이 시작하기까지의 딜레이를 준다.
- transition-duration과 마찬가지로 밀리초 또는 초 단위를 사용한다.
- 예) transition-delay: 1000ms, 1s
- transition-property : 스타일링 속성들을 속성값에 넣으면 애니메이션이 적용된다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
grid를 사용하니 확실히 flex보다는 쉬운것같으면서도 어려웠다.
flex와 grid 사용 방향에 있어서 어느것을 사용할지 생각을 잘 하고 사용해야겠다.
반응형
