크기 측정
제도 눈금으로 브라우저의 실제 너비와 높이를 읽습니다.
실시간 경계 크기
Content bounds
Content bounds
Collection panel
The subject stays inside its measured boundary.
The rule reports the actual rendered box. At narrow widths, the available space can be less than the requested width.
참조 견본 안에서
고정 너비 또는 유동 너비 설정
점선 윤곽은 작성한 포함 블록입니다. 파란색 테두리 상자의 실제 너비를 부모 요소와 함께 확인하세요.
사용 위치: 컨테이너 크기 레퍼런스.
사용법과 인터페이스
DemoMeasure는 자식을 div.ui-measure로 감쌉니다. 레이블과 측정한 너비·높이를 표시하는 output이 있는 ui-measure-head, ui-measure-rule, 측정 대상 상자로 구성됩니다. ResizeObserver가 측정값을 최신 상태로 유지합니다.
<DemoMeasure label="Content bounds"> <DemoSurface className="p-md">…</DemoSurface></DemoMeasure><div class="ui-measure"> <div class="ui-measure-head"><span>Content bounds</span><output>300 × 96 px</output></div> <div class="ui-measure-rule" aria-hidden="true"></div> <div>…</div></div>레이아웃 부모와 항목 사이에 래퍼를 넣지 마세요. 부모 요소나 측정 전용 래퍼를 측정하세요.