(9)CSS_레이아웃_3_Grid-2-px단위와 fr단위,minmax()메소드,repeat()메소드,셀에 gap 주기
＃Default 상황 :Div Container > Div Box 5개 (1,2,3,4,5)Container Box : display : grid , grid-template-rows : 100px 300px 100px / grid-template-columns : 200px 200px 100px상황1_ 2-px 단위 vs fr단위● 만약 Container Box의 width : 100% (브라우저 창 기준) 된다면, 창을 축소 확대할때 어떻게 될까셀의 크기는 고정된 px로 설정됐기 때문에, 튀어나온다.따라서 상대적 비율제로 하고싶다면, 맞춤 단위가 존재한다, ● grid - template : 100px 300px 100 / 200px 200px 100px=> grid - template : 1fr..
2024. 11. 5.
(8)CSS_레이아웃_3_Grid-1-grid 속성적용 방법 : grid-template(-columns/rows) + repeat()메소드
1-display : grid + grid-template-columns/rows＃Default 상황 :Div Container > Div Box 5개 (1,2,3,4,5)＃알아야 할 개념 :● 개념1_ display : grid 의 정의부모 Box에 요소들을 쇼핑몰이나, 체스판 마냥 일정한 크기로 판을 나누어 배치하는 속성● 개념2_ display : grid 의 사용방법1 :순서1_ 부모 Box에 display : grid; 적용순서2_ 부모 Box에 가로, 세로 셀 나누기 - 세로 => grid - template - rows : a px, b px, c px .. ; - 가로 => grid - template - columns : a px, b px, c px ...
2024. 11. 4.
