JAY⌨️CODE

1️⃣ Grid 란? display:grid 를 선언하면 자식에게 적용. 부모요소는 grid-container 자식요소는 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템. Gap 을 통해 셀과 셀사이의 간격을 설정. 2️⃣ grid-container ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정. ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정. .container{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 100px; } .container{ display:grid; grid-template-columns: 1fr ..

1️⃣ flex의 구조 flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃. 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능! 부모 요소는 flex-container 자식 요소는 flex-item 2️⃣ flex-direction 아이템을 배치할 때 주축과 방향을 지정! ➡️ row 기본값. 왼쪽에서 오른쪽 배치. ⬇️ column 위에서 아래로 배치. ⬅️ row-reverse 오른쪽에서 왼쪽 배치. ⬆️ column-reverse 아래에서 위로 배치. 3️⃣ Justify-content row, column의 주축을 기준으로 배치. flex-start 기본 값, 시작 축 기준으로 배치. flex-end 마지막 축 기준으로 ..