반응형
#2-1 파트에서는 grid의 기본적인 사용법을 설명 해주십니다.
#2-2 에서는 grid를 더욱 잘 사용 하기 위한 여라가지 내용들을 설명해주십니다.
강의내용중.
- justify-items / align-items / place-items 옵션 사용 ( container는 그대로 두고 안에 items을 움직인다. # start, center, end)
- grid-column (item쪽에도 써줘야 되는데 사용법은 grid-column: 1 / 3; )
- grid-column-start / grid-column-end 옵션 사용 (grid-column을 나눠서 사용하는 법이다.)
- Line naming (네이밍을 주는데 자주 사용 안함)
- grid-auto-flow (빈 공간 빽빽하게 올려라)
- grid-row 그리고 span
- grid-area ( 그리고 공간 지정 가능)
- justify-self / aligne-self / place-self ( item에 직접 부여해서 item을 움직인다.)
grid의 사용법을 어느정도 익혔습니다. 이제는 강의 내용기반으로 UI를 직접 만들며 연습을 필요로 하겠습니다.
배운건 사용 해보고 써먹자.
반응형
'Lecture > Develop' 카테고리의 다른 글
[css] Nicolas, CSS 마스터클래스 (#3 PostCSS/CSSNext/CSS4)(노마드코더 후기) (0) | 2018.12.29 |
---|---|
[css] Nicolas, CSS 마스터클래스 (#2-1 Css Grid)(노마드코더 후기) (0) | 2018.12.20 |
[css] Nicolas, CSS 마스터클래스 (#1 Flexbox)(노마드코더 후기) (0) | 2018.12.15 |
[수학] 선형대수학 강의 khan academy 리뷰 (벡터와 공간, 행렬변환, 기저) (0) | 2018.12.12 |
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#3)(노마드코더 후기) (0) | 2018.12.05 |