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

DAY 16

🔖 오늘 읽은 범위 :

☃️01/26(월) 진도표 알림
❄️공부 내용: 11장 되새김 문제
❄️ 쪽수: 370~371쪽

---

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

• 플렉스 컨테이너 기본 방향 : 수평 배치
• 플렉스 컨테이너 정의 : display:flex;
• 플렉스 항목 수평 방향 나열 속성 : flex-direction: row;
• 플렉스 항목 세로축 중앙 정렬 : align-items: center;
• align-content 속성 : 여러 줄로 된 플렉스 항목 사이의 간격을 지정함.
• align-self 속성 : 특정 플렉스 항목의 세로 정렬을 지정.
• flex-shrink 기본값은 1
• 모든 플렉스 항목은 동일한 크기로 설정 되지 않음.

  <style>
    /* 이미지 스타일링 */
    .pic img {
      width: 100%;
      /* 이미지가 .pic 에 가득차도록 */
      height: auto;
      /* 이미지의 비율을 유지 */
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .pic {
      flex-basis: 30%;
    }

    @media screen and (min-width:769px) and (max-width:1024px) {
      .pic {
        flex-basis: 50%;
      }
    }

    @media screen and (max-width: 768px) {
      .pic {
        flex-basis: 100%;
      }
    }
  </style>

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

• 8 문제 중에 4개 맞춤. ㅠ.ㅠ
• CSS 항목들은 헷갈리지만, 요소마다 어떤게 있고 어떤 역할을 한다는 것만 알아도, 그 흐름과 느낌만 알아도 될 것 같기도 하다. 찾아보면서 진행하면 되니까.
• 복습 다시 한번 더!

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

---

🤟소감 3줄 요약

• 춥네요. 추워.