🎨 CSS

Postion

• static

• relative

• sticky

• absolute : 컨테이닝 기준이 블록

• fixed : 컨테이닝 기준이 블록

html에서 <div>요소로 만들어져 display값이 이미 block으로 지정된 요소

display: inline // 인라인 요소로 바뀜
position: relative // 반응 없음
  
position: absolute  // display값이 블록으로 변경됨
position: fixed // display값이 블록으로 변경됨

position에 absolute, fixed 있는 경우 display가 블록으로 바뀐다

---

📌 Flex와 Grid는 Container와 Items로 구분하여 사용

Flex Container

display: flex, inline-flex

container의 자식요소items

container의 속성들

• flex-direction : item이 정렬된 주축을 지정

• flex-wrap : item을 한줄에 표현할 것인지, 줄바꿈을 할 것인지 지정

• justify-content : 주축에 해당하는 정렬

• align-items : 교차축에 해당하는 정렬 지정, 1줄을 제어

• aling-content : 교차축에 해당하는 정렬 지정, 2줄 이상을 제어

Flex Items

Items의 속성들

• flex-grow : 요소의 증가 너비 비율

• flex-shrink : 요소의 감소 너비 비율

• flex-basis : 요소의 기본너비 설정

• flex 단축 속성
  grow, shrink, basis (0, 1, auto 생략 시: 0)

• order : flex Items의 순서를 임의로 변경, 양수와 음수 사용, 작은 수가 앞으로

• align-self(align-items) : container에 지정할 수 있는 align-items에 대한 속성을 개별로 지정

Grid Containers

Flex는 1차원 배열, Grid는 2차원 배열에서 사용

각 축에 빈 공간이 존재할 때 사용 가능

• justify-content : 행축에 해당하는 정렬

• align-content : 열축에 해당하는 정렬

• 속성

  • normal(stretch)
  • start, center, end
  • sapce-between, around, evenly

Grid Container 안의 모든 itmes들을 한번에 제어하는 속성

• justify-items : 하나의 그리드 영역 내의 셀 안에 빈공간에서 셀 내부 정렬

  • align-items에서는 sapce로 시작하는 속성값을 제외하고 사용가능

• justify-self : 개별적인 item을 제어하는 속성

• align-self

• 속성

  • normal(stretch)
  • start, center, end

Grid Items

row와 column은 각 축마다 번호를 가진다.
순서대로 1, 2, 3 혹은 역순으로 -3, -2, -1 형식

특정한 라인에서 시작과 끝을 지정할 수 있다.

• grid-row-start : 행축에 시작하는 번호

• grid-row-end : 행축에 끝나는 번호

• grid-column-start : 열축에 시작하는 번호

• grid-column-end : 열축에 끝나는 번호

• 단축 속성

  • grid-row: start / end
  • grid-column: start / end

• 속성

  • span: 아이템의 위치에서 확장, 기본1

---

오늘의 마무리

🖤 Flex와 Grid의 다양한 속성들에 대해 공부해 보았다.
🖤 외우면 사용하기 편하겠지만 반복적으로 사용하면서 공부하다 보면 자연스럽게 외워지는 날이 오겠지...? 🤔