Containing Block
포함 블록
포함 블록은 요소가 자신의 위치와 백분율 크기를 계산할 때 사용하는 직사각형입니다.
다른 예시
판매 배지를 블록 시작점에서 8px, 인라인 끝에서 8px 떨어진 곳에 배치합니다. 카드에 `position: relative`를 설정하면 올바른 포함 블록이 됩니다. 변형된 캐러셀 조상 요소는 더 이상 배지를 멀리 코너로 당길 수 없습니다.
주요 부분
- 01상위 항목 설정
- 02참조 사각형
- 03해결된 삽입 또는 백분율
사용할 때
백분율 크기, 절대 위치나 스티키 위치, 또는 변형된 상위 요소를 수정하기 전에 실제 포함 블록을 찾으세요.
다음 경우에는 사용하지 마세요
항상 가장 가까운 DOM 부모나 뷰포트라고 가정하지 마세요. 위치와 포함 규칙이 이를 바꿀 수 있습니다.
코드에서 사용된 이름
positioning scheme + containing-block-establishing ancestor 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 포함 블록 (Containing Block)。 User context：판매 배지를 블록 시작점에서 8px, 인라인 끝에서 8px 떨어진 곳에 배치합니다. 카드에 `position: relative`를 설정하면 올바른 포함 블록이 됩니다. 변형된 캐러셀 조상 요소는 더 이상 배지를 멀리 코너로 당길 수 없습니다. Design concept to apply：포함 블록 (Containing Block)。 Why it fits：백분율 크기, 절대 위치나 스티키 위치, 또는 변형된 상위 요소를 수정하기 전에 실제 포함 블록을 찾으세요. Do not use it when：항상 가장 가까운 DOM 부모나 뷰포트라고 가정하지 마세요. 위치와 포함 규칙이 이를 바꿀 수 있습니다. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 포함 블록 (Containing Block) is used now. Definition: 포함 블록은 요소가 자신의 위치와 백분율 크기를 계산할 때 사용하는 직사각형입니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.