[css] css 체크사항

박스모델  > content-box 와 border-box의 차이

position > static relative absolute fixed sticky 활용성에 대한 이해

z-index > 이게 개념은 간단한데 부모자식 그런 경우에 따라 적용되는 차이가 있더라

flex > 주축 보조축 개념 , 적용사항 익숨해지면됨

filter: blur 처음봄

 

grid > 세로로 여러개로 쪼개서 사용하더라고 ? 나는 그냥 복잡한 레이아웃 부분 잡는 용도로만 생각하고 있었는데 이게 박스형태 반응형 작업할때 좋다 이정도 였는데 이해도랑 활용하는 부분에 대해서 많이 부족한듯

 

grid 

부모에 display: grid 주고 

이게또 columns 이랑 row 가 좀 헤깔리더라고 나는 행 열행열행열 행이 row지 가로길게 열이 column 세로길게 이게또 인덱스처럼 안쓰고 1부터 쓰기도 하고 좀 그래 ㅎㅎ 자꾸 날 헤깔리게해

 

2단계 grid-template-rows , grid-template-colums 설정

부모에서 해주면 부모영역이 설정한대로 나눠짐

grid-template-columns: 100px 100px; || 100px 200px 100px || repeat(5, 300px) || repeat(3, 1fr) || 1fr 1fr 1fr

보통 칼럼은 정해주고 row는 박스의 높이를 auto로 잡고 많이 쓰는듯

 

그리고 자식에서도 grid 내에서 위치를 정해줄수 있다.

grid-column-start, grid-column-end : 3; 이런 형식으로 볼수 있음 개발자도구에서 grid 영역 분리 된거 보고 해도 되고 머리속에서 해도되고 편할대로   

gird-column-start : 2, grid-column-end: 4 면 grid-column : 2 / 4  이런식으로 쓸수있음  row 도 마찬가지고

column-gap , row-gap 속성있음

 

아니면 나눠논 대로 배치를 네이밍으로 지정해줄수도있음

grid-template-areas: 

  "h h h h"

  "m m m m "

요런 느낌으로 부모에 주고 자식에서는 grid-area: m; grid-area: h; 이런식으로 주면 배치됨 > 반응형 재배치할때 편함