신예리의 개발자취

grid: auto-placement 005.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 005.html .grid { background-color: black; color: white; display: grid; gap: 5px; height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .item:nth-child(odd) { background-color: springgre..

Grid Item 정렬하기 justify-self align-self place-self -content, -items, -self 비교하기 참고 justify-self - CSS: Cascading Style Sheets | MDN The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. developer.mozilla.org align-self - CSS: Cascading Style Sheets | MDN The align-self CSS property overrides a grid or flex item's align-items value..

Grid Container 정렬하기 004.html header content nav footer 004.css .grid { background-color: black; color: white; display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } ju..

Grid Items 정렬하기 004.html header content nav footer 004.css .grid { display: grid; gap: 10px; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } justify-items align-items place-items Block 요소와 ..

Grid Template fr(fraction) 004.html 004.css .grid { display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } 004.css .grid { display: grid; gap: 10px; height: 50vh; grid..

Child Elements (Items) grid container에 포함된 grid items. 축약형(grid-column, grid-row) Grid Layout Module Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는.. shinye0213.tistory.com 004.html grid-column grid-row 004.css .grid { display: grid; grid-template-columns: repeat(4, 100px); grid-t..

Grid Container display: grid;와 display: inline-grid; grid-template-columns column의 너비와 개수를 정한다. grid-template-rows row의 높이와 개수를 정한다. 추가 속성 반복(repeat) minmax auto-fill auto-fit max-content와 min-content 참고 repeat() - CSS: Cascading Style Sheets | MDN The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring patte..

Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는 column의 번호 grid-column-end 특정 영역의 끝점이 되는 column의 번호 grid-row-start 특정 영역의 시작점이 되는 row의 번호 grid-row-end 특정 영역의 끝점이 되는 row의 번호 참고 CSS Grid Layout W3Schools offers free online tutorials, references and exercises in all the major language..