flex와 grid

 

 

오늘은 3일차수업! 클론코딩을 같이 만들어보았다.

숙제로 블로그 안올려도 된다고하셨지만....

나는 성실한 잇티제이기 때무네 숙제까지 해서 결과물을 착착 올린다 (헤헤)

 

이번엔 css까지도 같이 다루었는데

flex, grid 를 잘쓰는 편이라 어렵진않았지만,

역시나 축약형같은건 쓰지않은터라 모르는부분들은 따로 디깅해보았다.

 

 

오늘의 클론코딩

귀찮았지만 시킨대로 피그마에서 그룹핑해보기

 

무난하게 1시간 안되서 만들수 있었는데 결과물은 git에 업로드해놓았으니 궁금한사람은 봐두되구..

https://lyla-bae.github.io/goorm_FE/HTML-CSS/html-3/products.html

Products

 

 

flex: 1 1 0;

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형으로

- grow는 유연하게 늘리기(기본값 0)
- shrink는 유연하게 줄이기(기본값 1)
- basis(기본값 auto)는 해당요소의 기본 크기를 뜻한다.

 

고로 flex: 1 1 0;의 뜻은 grow값을 1비율로 늘리고 shrink,basis값은 기본크기 없이 가져가겠다는 뜻이되므로
요소들의 비율을 1:1:1... 즉 1비율로 가져가고싶을때 쓴다.
참고로 display:flex은 내가 나열하고싶은 부모요소에 쓰는 속성이지만
flex: 1 1 0;은 내가 나열하고싶은 해당요소(자기자신)에게 쓰는 속성이다.

좌측 sns 아이콘 무더기를 제외하고 사이트맵 부분들을 flex:1 1 0; 이용해 적용시켜보았다.

 

 

 

grid-template-columns: repeat(auto-fit, minmax(30%,1fr));

grid도 자주 쓰고는 있었지만 repeat 함수(?)로 쓸 생각은 못했는데 실습해보니 왜 안썼나 싶다.

- repeat은 말그대로 반복하다.

- auto-fit는 최대 너비에 fit하게

- minmax(30%,1fr)은 최소 30% 영역을 가져가되, 남는 영역의 1비율로 라는 뜻으로

반복되는 article 요소들을 repeat함수로 반복시키고 너비에 핏시켜 3컬럼씩 나누었다.

 

적용해보면 실제로 이렇게 3컬럼으로 나눌수있다.

30%라고 쓴 이유는 article의 여백(gap) 영역도 고려해서 대충 계산했다.

33.3%라고 썼으면 분명 2컬럼으로 나누어졌을것이다.

 

 

 

 

참고자료

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

flex와 grid는 매번 1분코딩님의 아티클을 보게된다. 최고👍