반응형 HTML 레이아웃 검사기
HTML과 CSS를 입력하고 쉼표로 화면 폭을 지정하면 격리된 미리보기에서 각 폭의 문서 너비, 넘침 요소와 서로 닿는 콘텐츠 요소를 측정합니다. 실제 웹사이트를 불러오거나 모바일 기기를 완전히 에뮬레이션하지 않습니다. 겹침은 위치에 따른 후보이므로 의도된 디자인인지 직접 확인하세요.
주요 기능
- 240~1920px 범위에서 최대 6개 화면 폭 순차 측정
- 각 폭의 실제 문서 너비와 가로 넘침 픽셀 계산
- 화면 밖으로 나간 요소의 태그·클래스·경계 좌표 표시
- 콘텐츠 요소 쌍의 위치 기반 겹침 후보 제시
- 프레임 안의 HTML·CSS 미리보기와 JSON 결과 다운로드
사용 방법
- 검사할 HTML과 CSS를 입력하거나 고정 폭 예제를 불러옵니다.
- 쉼표로 구분한 화면 폭을 입력합니다. 예: 320,390,768,1280.
- 레이아웃 검사를 눌러 각 폭의 넘침과 겹침 후보를 확인합니다.
- 폭을 골라 미리보기를 살펴보고 상세 요소 좌표를 확인합니다.
- 필요하면 JSON 결과를 내려받아 수정 전후를 비교합니다.
활용 예시
- 모바일 화면에서 고정 너비 카드가 가로로 밀리는지 찾기
- 겹쳐 보이는 배지·버튼의 위치를 폭마다 비교
- CSS 미디어 쿼리 수정 전후의 로컬 시안을 점검
자주 묻는 질문
실제 웹사이트 URL을 검사하나요?
아니요. 붙여 넣은 HTML과 CSS만 로컬 프레임에서 검사합니다. 외부 CSS·이미지·폰트는 불러오지 않으므로 실제 사이트의 전체 스타일과 다를 수 있습니다.
스크립트를 실행할 수 있나요?
아니요. 프레임은 스크립트 권한 없이 격리하고 콘텐츠 보안 정책으로 실행과 원격 요청을 차단합니다. 자바스크립트가 만들어 내는 레이아웃은 재현되지 않습니다.
가로 넘침은 어떻게 계산하나요?
각 폭에서 문서 스크롤 너비와 화면 폭의 차이를 계산합니다. 요소의 경계가 왼쪽 또는 오른쪽을 벗어나면 목록에도 표시합니다.
겹침 결과가 모두 오류인가요?
아니요. 보이는 잎 요소의 사각형이 충분히 교차할 때 후보로 표시합니다. 의도된 레이어, 투명 요소, 글꼴 차이 때문에 오탐·누락이 있을 수 있습니다.
몇 개 화면 폭과 요소를 검사하나요?
240~1920px 사이의 서로 다른 폭 최대 6개, 한 번에 요소 최대 500개를 검사합니다. 넘침과 겹침 세부 목록은 폭당 각각 최대 25개입니다.
보고서에 원본 코드가 포함되나요?
아니요. JSON에는 폭별 너비와 문제 요소의 짧은 선택자·좌표·겹침 면적만 포함됩니다. 민감한 ID나 클래스명은 들어갈 수 있으므로 공유 전에 확인하세요.
개인정보 안내
입력한 HTML과 CSS는 브라우저 메모리의 격리된 프레임에서만 처리합니다. 프레임의 스크립트 실행, 외부 이미지·글꼴·네트워크 요청, 폼 제출을 차단합니다. JSON 보고서를 내려받으면 입력 코드는 포함되지 않고 측정 결과만 저장됩니다.
댓글과 질문