data life

그리드 형태를 자동으로 정의 : grid-auto-columns : grid-auto-rows grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성 grid-auto-colums .container { display: grid; grid-template-columns: repeat(2, 30px); grid-template-rows:repeat(2, 30px); grid-auto-flow:column; grid-auto-columns:100px; gap: 3px; } HTML 삽입 미리보기할 수 없는 소스 grid-auto-rows .container { display: grid; grid-template-columns:..

개별 아이템 세로 정렬 : align-self .item { align-self: stretch; align-self: start; align-self: center; align-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 개별 아이템 가로 정렬 : justify-self .item { justify-self: stretch; justify-self: start; justify-self: center; justify-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스..

아이템 그룹 세로 정렬 : align-content .container { align-content: stretch; align-content: start; align-content: center; align-content: end; align-content: space-between; align-content: space-around; align-content: space-evenly; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 5️⃣ space-between HTML 삽입 미리보기할 수 없는 소스 6️⃣ spac..

세로 방향 : align-items .container { align-items: stretch; /*default*/ align-items: start; align-items: center; align-items: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 가로 방향 : justify-items .container { justify-items: stretch; /*default*/ justify-items: start; justify-items: center; justify-items: end; } 1️⃣..

grid 각 셀의 영역 지정 grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정 Grid 라인 번호를 이용해서 column과 row의 범위를 결정 .grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { grid-column-start: 1; grid-column-end: 5; /*grid-column: 1 / 5;*/ /*grid-column: 1 / -1;*/ } .cont..

영역 이름으로 그리드 정의 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법 .container { display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 100px repeat(2, 200px) 100px; grid-template-areas: "header header header header" "content content content nav" ". . . ." "footer footer footer footer"; } HTML 삽입 미리보기할 수 없는 소스 빈칸은 마침표(.) 나 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 됨! ⭐️ 중요 ⭐️ >> 해당 아이템 요소에 ..

Grid 간격 생성 column-gap row-gap gap >> Grid cell 사이에 간격을 만들어 줌 .container { row-gap: 10px; /* row의 간격을 10px로 */ column-gap: 20px; /* column의 간격을 20px로 */ gap : 10px 20px; /* row 10px, column 20px */ } HTML 삽입 미리보기할 수 없는 소스

flex : 한번에 한 방향의 레이아웃 (1차원) grid : 한번에 두 방향(가로,세로) 레이아웃 (2차원) Grid flex보다 복잡한 레이아웃 표현이 가능 기본 구성 Grid Container(그리드 컨테이너) : Grid의 전체 영역 Grid Item(그리드 아이템) : Grid Container의 자식 영역 1 2 3 4 5 6 7 8 9 Grid 적용하기 .container { display:grid; } Grid 형태 grid-template-columns gird-template-rows 직접 크기 설정 / auto .container { display:grid; grid-template-columns:auto auto auto; grid-template-rows: 20px 40px 60p..