SMALL 프론트엔드 개발자/CSS40 GRID 끝판왕 클론코딩으로 완벽 파헤치기 , GRID 완벽 분석하기 grid를 사용해보자 (3) 대표사진 삭제 사진 편집 작게작게문서 너비문서 너비옆트임옆트임 삭제삭제 사진 설명을 입력하세요. * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } li { list-style: none; } .list { width: 1372px; margin: 0 auto; border-bottom: 10px solid #000; display: grid; grid-template-columns: 325px 325px 674px; grid-template-rows: 300px 300px; gap:24px; } .list li { background-color: #fc0; } .list li:nth-child(1) { grid-col.. 2023. 4. 18. GRID로 레이아웃 만들기 , GRID 완벽 분석하기 grid를 사용해보자 (2) * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 50px; } .spacer { height: 50px; background-color: #ccc; } .wrap1 { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 100px 300px 50px; } .wrap1 header { background-color: #fc0; grid-column-start: 1; grid-column-end: 4; } .wrap1 aside { background-color: aqua; } .wrap1 main { background-color: yellowgreen; g.. 2023. 4. 18. GRID 완벽 분석하기 grid를 사용해보자 (1) #flex와 #Grid 비교하기 // flex - 1차원배치 주축 ---배치, 정렬 보조축 ---> 정렬 // Grid - 2차원배치 - 표를 그리는것과 비슷 행과, 열을 생성 row, column 그리드컨테이너 그리드아이템 그리드 : 행과 열을 선언하여 , 레이아웃을 표현 grid-template-columns : 열을 선언 grid-template-rows : 행을 선언 grid-template-columns : 1열 2열 3열 4열 ..... 열의 넓이를 지정 grid-template-rows: 1행 2행 3행 4행 ..... 행의 높이를 지정 px , % , fr (frction) item : 셀 영역 확장하기 번호는 그리드라인 번호를 입력 grid-co.. 2023. 4. 18. flex-item 속성 flex-grow, flex-shrink , flex-basis 사용하기 대표사진 삭제 사진 설명을 입력하세요. flex-item에 설정하는 속성(아이템 크기에 영향을 줌) // flex-grow : 성장 : 아이템전체크기보다 컨테이너가 클때 : 아이템의크기를 부모컨테이너의 크기에 맞춤 flex-grow:1 --> 아이템의 개수가 N개일때 1/n, 1/n, 1/n, 1/n // flex-shrink : 수축 : 컨테이너가 아이템의 전체크기보다 작을때 : 아이템의크기를 강제로 수축시킴(컨테이너에 맞게) // flex-basis : 크기 (flex-direciton의 영향을 받음) auto: 컨텐츠의 크기만큼만 적용 : flex 아이템에만 사용하는 크기값 display:flex설정시 flex-grow:0 flex-shrink:1 flex-basis:auto flex:none : .. 2023. 4. 10. 이전 1 2 3 4 ··· 10 다음 LIST
