공부기록용

🔴align-content 🔴justify-content align-content & justify-content flex box 방식과 유사하게 사용한다. grid container의 수직축과 수평축에서의 item 정렬 방식을 결정한다. container에 여유 공간이 있을 때 사용할 수 있다. ⭐내용실습⭐ 1 2 3 4 5 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align-items: center; background-color: beig..

🔴align-items 🔴align-self 🔴justify-items 🔴justify-self align-items flex box방식에서와 유사한 역할을 한다. grid container 행 트랙의 높이를 기준으로 grid item의 배치를 결정한다. 트랙 행과 열을 의미한다. align-self 각각의 grid item이 어떤 식으로 배치될 것인지를 스스로 결정한다. (즉, item에 직접 지정하는 속성!) justify-items 수평축(행)을 따라 grid item을 정렬하고자 할 때 사용할 수 있는 속성으로, grid container에 지정한다. 아이템에 할당된 열 방향 너비가 기준이 된다. justify-self 수평축(행)을 따라 grid item을 정렬하고자 할 떄 사용할 수 있는 속성..

🔴grid-template-areas 🔴grid-area grid-template-areas grid 영역 즉, item의 이름을 이용해 layout의 형태를 정의할 수 있다. grid-area grid 영역 즉, item의 이름을 지정할 때 사용하는 속성이다. grid-area 속성은 CSS 그리드 레이아웃에서 사용되는 속성으로, 그리드 셀의 행과 열을 한 번에 지정하여 그리드 아이템의 위치와 범위를 설정하는 데 사용되기도 한다. 이를 통해 요소를 그리드 컨테이너 내에서 원하는 위치와 크기로 배치할 수 있습니다. 요소 { grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝; } /* 행 시작: 요소가 시작하는 행의 위치를 나타냅니다. grid-row-start 열 시작: 요소가 시작하는 열의..

🔴grid-column 🔴grid-row grid-column과 grid-row는 grid item을 지정해주는 속성으로 grid container의 줄 번호를 이용해 item을 배치할 수 있다. 줄 번호는 시작하는 부분부터 끝나는 부분까지 경계선 하나하나마다 번호가 지정되어 있으며 grid-column과 grid-row의 속성 값으로 이 줄 번호를 사용한다. ⭐내용실습⭐ 1 2 3 4 5 6 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align..

트랙관련함수 grid container의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수들이 있다. repeat( ) : 반복되는 값을 자동으로 처리할 수 있는 함수 minmax( ) : 최솟값과 최댓값을 각각 지정할 수 있는 함수 auto - fill & auto - fit : 반응형을 고려해 사용할 수 있는 키워드(함수❌) ⭐내용실습⭐ 1 2 3 4 5 /*style.css*/ *{ box-sizing: border-box; } body{ margin: 0; } ul{ padding: 0; list-style-type: none; border: 5px solid teal; } li{ display: flex; justify-content: center; align-items: cente..

🔴grid-template-columns 🔴grid-template-rows 🔴grid-gap grid-template-columns grid container의 트랙 중 열(column) 트랙 내 item들의 크기를 지정할 수 있는 속성이다.(트랙이란 행 또는 열을 의미) grid-template-rows grid container의 트랙 중 행(row) 트랙 내 item들의 크기를 지정할 수 있는 속성이다. grid-gap(gap) grid item 사이의 간격을 지정하는 속성이다. 행에서의 간격과 열에서의 간격을 똑같이 지정할 수도 있고, 각자 따로 지정할 수도 있다. row-gap과 column-gap의 단축속성이다. ⭐내용복습⭐ 1 2 3 4 5 /*style.css*/ *{ box-sizing..