SMALL 프론트엔드 개발자80 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. 자바스크립트 javascript 12. (6) 버튼 활용해서 다양한 이벤트 만들기 Page1 Page2 Page3 Page4 위로가기 page1 page2 page3 page4 2023. 4. 13. 이전 1 2 3 4 ··· 20 다음 LIST
