scss_layout-master_class's Introduction

SCSS Layout 마스터클래스

CSS 마스터를 위한 모든 것.
SCSS, Flexbox, CSS Grid.
Flexbox, Grid에 대한 개념이해와 실전연습.

🎉노마드코더 CSS 챌린지 33기 우수 졸업생으로 선정🎉
(https://nomadcoders.co/community/thread/7962)

노마드 코더 정책 상 강의요약은 괜찮으나, 코드와 필기는 공개적인 곳에 올리면 안 됨.
필기 요약지는 암호화된 .zip 파일로 저장함.

<'Code Challenge' 클릭 시 해당 작품 확인 가능>

23-05-29 : #0.0 ~ #1.3 / Flexbox(1) (+ Quiz)
- display: flex, flex-container
- flex-direction, justify-content, align-items / main axis, cross axis
23-05-30 : #1.4 ~ #1.9 / Flexbox(2) (+ Code Challenge)
- align-self, order
- flex-wrap, align-content
- flex-shrink, flex-grow, flex-basis
23-05-31 : #2.1 ~ #2.5 / Grid(1) (+ Code Challenge)
- display: grid, fr단위, repeat
- grid-template-columns, grid-template-rows
- column-gap, row-gap, gap
- grid-template-areas, grid-area
- Rows & Columns : grid-column(-start, -end) , grid-row(-start, -end), span
23-06-01 : #2.5 ~ #2.9 / Grid(2) (+ Code Challenge)
- line naming, fr단위, grid-template
- item들의 위치 정렬 : {justify-items, align-items, place-items}
- Gird Container의 위치 정렬 : {justify-content, align-content, place-content}
23-06-02 : #2.9 ~ #2.15 / Grid(3) (+ Code Challenge)
- align-self, justify-self, place-self
- grid-auto-rows, grid-auto-flow, grid-auto-columns
- minmax
- auto-fill, auto-fit
- min-content, max-content
23-06-03 : #3.0 ~ #3.4 / SCSS (+ Quiz)
- SCSS, variable{$변수명}, nesting, mixin{@include, $변수명}, extend{%, @extend, @content}
23-06-05 : (+ Code Challenge)
23-06-07 : (+ Code Challenge(2 days)[2nd day])
23-06-08 : (+ Code Challenge)
23-06-10 : (+ Code Challenge(2 days)[2nd day])
23-06-11 : (+ Code Challenge)

Recommend Projects