Overflow Fix — CSS 탐색·추출·진단

웹 요소의 CSS·HTML을 추출하고 반응형·호버를 재현하세요. Grid 표시, Tailwind 출력과 가로 넘침 진단을 제공합니다.

웹 요소의 스타일을 살펴보고, 내 프로젝트에 가져갈 CSS·HTML을 정리하세요. Overflow Fix는 프런트엔드 개발자를 위한 CSS 탐색·추출·레이아웃 진단 도구입니다. 요소를 선택해 필요한 스타일과 의존성을 모으고, 복사 결과를 독립 문서에서 확인할 수 있습니다. CSS 탐색과 재사용 • 마우스를 올려 CSS와 요소 크기 확인, 클릭/Space로 고정 • 방향키로 부모·자식·형제 선택, 최대 네 요소의 계산값 비교 • 선택 요소와 하위 요소의 HTML·CSS 복사 • 읽을 수 있는 원본 규칙의 %, rem, 변수·폰트·미디어·상태·키프레임 보존 • 비관련 규칙과 미사용 변수·폰트·키프레임 제외 • 현재 페이지의 CSS 임시 편집·원복 복사 결과 확인과 내보내기 • 360~1440px 및 원본 너비에서 독립 미리보기, 호버·포커스 직접 확인 • HTML 파일 저장 • 안전한 기본 선언을 Tailwind v4 arbitrary property 클래스로 변환. 복잡한 상태·조건부 규칙은 동봉 CSS로 보존 • CodePen용 전달 파일 저장. 저장한 파일에서 사용자가 전송 버튼을 눌러야 CodePen으로 코드가 전달됩니다 레이아웃 점검 • Grid: 전체 요소의 실제 테두리 표시 • Guidelines: 선택 요소의 정렬선 표시 • 동일 출처 iframe 탐색 • 글자 대비·요소 이름·이미지 설명의 간단 점검. WCAG 전체 준수 판정은 아닙니다 • 기존 가로 넘침 원인 탐색, 수정 CSS 임시 적용·재측정·원복 사용 방법 1. 일반 웹사이트나 localhost에서 확장 프로그램을 엽니다. 2. ‘페이지에서 CSS 탐색 시작’을 누르고 요소를 선택합니다. 3. 복사하거나 ‘복사 결과 미리보기’에서 확인한 뒤 저장합니다. 데이터와 권한 기본 탐색·추출·검사는 기기 안에서 처리합니다. 계정·AI API 키·분석 추적이 없으며, activeTab과 scripting 권한만 사용합니다. 원격 코드는 실행하지 않습니다. 미리보기의 외부 이미지·폰트는 기본 차단하며, 허용하면 원래 리소스 서버에 요청합니다. 클립보드·파일 저장과 CodePen 전송은 사용자 동작으로 실행됩니다. 지원 범위 컴포넌트는 최대 200개 요소까지 지원합니다. 읽기 제한된 외부 CSS는 현재 화면 계산값으로 일부 대체하므로 원래 반응형·상태 규칙이 보존되지 않을 수 있습니다. Shadow DOM·교차 출처 iframe·실행형 미디어·복잡한 조건부 규칙에는 제한이 있습니다. 사이트의 JavaScript 동작이나 프로젝트 파일을 자동 재생성하지 않습니다. 추출 경고와 미리보기를 확인하고 통합할 사이트에서 다시 검증하세요. 홈페이지: https://overflow-fix.pages.dev/ 개인정보 처리방침: https://overflow-fix.pages.dev/privacy 문의: define4u@gmail.com