레이아웃 선택과 반응형 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

1. 머리·옆·본문·꼬리로 이루어진 페이지 골격에 알맞은 것은?

   1. flex — 내용 크기에서 출발하는 것이 골격에 맞다
   2. flex 를 중첩해 행과 열을 각각 만든다
   3. float 와 clearfix — 골격은 오래된 기법이 안전하다
   4. grid — 행과 열을 둘 다 정하는 것이 골격이다

2. `flex: 1` 과 `flex: auto` 의 차이는?

   1. flex: 1 은 flex-basis 가 0% 라 내용 크기를 무시하고 공간을 똑같이 나눈다
   2. flex: 1 은 늘어나기만 하고 줄어들지 않는다
   3. flex: auto 는 grow 가 0 이라 남는 공간을 받지 않는다
   4. 두 값은 같은 축약이고 이름만 다르다

3. flex 컨테이너 안에 긴 표를 넣었더니 컨테이너가 밀려나며 가로 스크롤이 생깁니다. 가장 흔한 원인은?

   1. flex-wrap 이 nowrap 이라 줄바꿈이 막혀 있다
   2. gap 이 아이템 폭 계산에 포함되지 않는다
   3. flex 아이템의 min-width 기본값이 auto 라 내용보다 작아지지 않는다
   4. 부모의 box-sizing 이 content-box 로 남아 있다

4. `repeat(auto-fit, minmax(240px, 1fr))` 와 `auto-fill` 의 차이는?

   1. auto-fit 은 세로 방향으로도 칸을 만든다
   2. auto-fit 은 빈 칸을 접어 남은 아이템이 늘어나고 auto-fill 은 빈 칸을 남긴다
   3. auto-fill 은 최소 크기를 무시하고 칸을 무한히 만든다
   4. auto-fit 은 grid 에서, auto-fill 은 flex 에서 쓴다

5. 같은 카드 컴포넌트가 본문에서는 멀쩡한데 좁은 사이드바에서만 망가집니다. 구조적으로 맞는 해결은?

   1. 사이드바 전용 클래스를 만들어 카드 스타일을 덮어쓴다
   2. 미디어 쿼리 중단점을 사이드바 폭에 맞춰 하나 더 만든다
   3. 카드에 min-width 를 주어 사이드바에서 넘치게 둔다
   4. 래퍼에 container-type 을 주고 카드가 자기 상자 폭을 묻게 한다

6. `container-type: inline-size` 를 준 요소 자신에게 `@container` 규칙을 걸면 어떻게 됩니까?

   1. 적용되지 않는다 — 질의는 컨테이너의 자손에만 걸린다
   2. 적용되지만 값이 한 프레임 늦게 반영된다
   3. 무한 루프로 판단되어 브라우저가 규칙을 버린다
   4. 적용된다 — 자기 자신도 질의 대상에 포함된다