[7주차] CSS 심화

2023.07.14~15 day32

1. Float

Float 위 아래
Float 양쪽
Float block

2. Position

Position position-fixed
Positon Stacking context->쌓임맥락
Position display: inline이 block 속성을 가지게 되는 경우

3. Flex(1차원)

Flex 개념
Flex flex-direction / flex-wrap
Flex justify-content
Flex align-items
Flex align-content
Flex flex-grow
Flex flex-shrink
Flex flex-basis
Flex 단축속성(grow, shrink, basis)
Flex order
Flex align-self
Flex gap

4. Grid(2차원)

Grid grid-template-rows/columns & grid-row/column
Grid repeat
Grid grid-template-rows에서의 fr사용
Grid grid-auto-columns/rows
Grid grid-auto-flow & span
Grid justify-content / align-content
Grid justify-items / align-items
Grid grid-area / grid-template-areas / grid-gap
Grid grid-row/column-start/end
Grid grid-row-start & span
Grid grid-auto-flow
Grid grid-row/column 단축속성
Grid container와 item 정렬
Grid grid-order
Grid 요소쌓임 z-index
Grid repeat() & minmax()
Grid grid-auto-rows: minmax()
Grid fit-content
Grid grid-template-rows/columns & fr
Grid grid-template-rows/columns: repeat(개수, min/max-content) & word-break
Grid grid-template-rows/columns: repeat(auto-fill/fit, minmax())

5. etc

transform & perspective
transform-style: preserve-3d
backface-visibility: hidden
multi columns 다단
filter
변수
@supports
@media