レイアウト選択とレスポンシブの確認

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

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

flex: 1 과 flex: auto 의 차이는?

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

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

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

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

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

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

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

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

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