repeat3 03/23 HTML/CSS grid 아이템 배치 그리드 속 아이템 배치 column이 두개 이상 존재할 때, grid 사용이 효율적이다 아이템이 없는 상태에서 트랙을 만들어놓고 사용할 수 있다는 장점 * 고정 크기 단위 minmax ( minimun값 , maximum값 ) 2021. 3. 23. 03/16 HTML/CSS Grid 레이아웃2 heropy.blog/2019/08/17/css-grid/ 콘텐츠가 아니더라도 빈 공간이 있게 됨 콘텐츠가 없는 빈 공간은 없게 됨 그리드 : 좌표 시스템 Grid Track #5 자동 트랙(칼럼) 만들기 Grid Track #6 배치하기 화면에 맞춰서 그대로 늘어나고 줄어든다 2021. 3. 16. 03/15 HTML/CSS Grid 레이아웃 Grid 레이아웃 grid 시스템을 이해하려면 반응형이 무엇인지 알아야 한다. 그리드 시스템을 사용하면 픽셀이 아니라 column의 개수로 바꿔 씀 Gutter : column 사이의 간극, gap Grid Track #1 고정크기 트랙(column)만들기 -> 격자형을 만드는 것에 포커스를 맞추자 ↓ 칸 만들기 Grid Track #2 가변크기 트랙(column)만들기 대략적인 비율로 크기를 정해놓아야지 px로 박아버리면 반응형 만들 수 없어 fr -> 그리드 시스템에서의 한 조각, 여백을 나눠가진 것이 아님 여백이 아니고 화면을 똑같이 나눠서 몇조각씩을 가질 것인지.. flex-grow : 여백의 크기에 컨텐츠의 크기까지 합쳐져서 크기가 똑같이 배분되지 않음 Grid Track #3 repeat를 이.. 2021. 3. 15. 이전 1 다음
