[ 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 는 내용이 많고 알아야 할 구성 요소가 넘쳐나서 전문 영역인 게 맞다.