[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 12장 되새김 문제

DAY 18

🔖 오늘 읽은 범위 :

☃️01/28(수) 진도표 알림
❄️공부 내용: 12장 되새김 문제
❄️ 쪽수: 393~395쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

12장 되새김 문제

• 그리드 템플릿 열을 정의하는 속성 : grid-template-columns
• repeat() 함수 역할 : 정의된 횟수만큼 열이나 행을 반복 생성.
• 그리드 항목을 템플릿 영역에 배치할 때 사용하는 : grid-area
• gap 속성 : 그리드 레이아웃에서 항목 간의 간격을 설정.
• CSS 그리드 레이아웃에서 minmax() 함수의 목적 : 열이나 행의 최소 및 최대 크기를 설정하기 위해
• CSS 그리드 레이아웃 : display 속성에 grid 값을 설정함.
• CSS 그리드 레이아웃 : auto-fill 은 빈 공간을 남기고, auto-fit 은 빈 공간을 채움.
• quiz-1
• body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { width: 600px; height: 500px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; } .container > div { border: 1px solid #222; text-align: center; } .container > :nth-child(odd) { background-color: pink; } .container > :nth-child(even) { background-color: lightcoral; }
• quiz-2
• body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: black; /* 배경색 */ margin: 0; } .container { width: 600px; height: 500px; display: grid; grid-template-columns: repeat(4, 1fr); /* 3열 그리드 */ grid-template-rows: repeat(3, 1fr); /* 2행 그리드 */ gap: 10px; /* 그리드 아이템 간격 */ grid-template-areas: "item1 item1 item2 item2" "item1 item1 item3 item4" "item5 item5 item3 item4"; /* 그리드 영역 지정 */ } .item1 { grid-area: item1; } .item2 { grid-area: item2; } .item3 { grid-area: item3; } .item4 { grid-area: item4; } .item5 { grid-area: item5; } .grid-item { background-color: yellow; /* 아이템 배경색 */ padding: 20px; text-align: center; font-size: 1.5em; }

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 헷갈려서 자주 봐야겠다.
• 새로운 속성은 추가로 찾아봄.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Selectors/:nth-child

---

🤟소감 3줄 요약

• 어렵네…
• CSS 는 내용이 많고 알아야 할 구성 요소가 넘쳐나서 전문 영역인 게 맞다.