HTML 파일 분리기

✂️ HTML 파일 분리기 — AI가 CSS·JS를 한 파일에 합쳐서 만들어 줬을 때, 업로드 한 번으로 index.html / style.css / app.js(+ firebaseConfig가 있으면 config.js)로 분리해 줍니다. 파일 이름을 바꾸면 관리자 페이지(admin.html·admin.js)나 설문 결과 페이지(results.*) 구성도 똑같이 만들 수 있습니다. 연결 태그(<link>·<script src>)까지 자동으로 들어가며, 모든 처리는 브라우저 안에서만 이루어집니다.

📄 HTML 업로드

📄

HTML 파일을 끌어다 놓거나 클릭해서 선택

.html · .htm — 서버에 업로드되지 않고 브라우저에서만 처리됩니다

또는 HTML 코드를 직접 붙여넣기 ▾

파일 이름

CSS 분리 firebaseConfig를 config.js로 분리

✂️ 분리 결과

💡 알아두면 좋은 점

<style> 블록 전부 → CSS 파일, 인라인 <script> 전부 → JS 파일로 모아 원래 위치에 연결 태그를 넣습니다. 파일 이름은 위 입력값을 따릅니다 (index → style.css·app.js, 그 외 → 이름.css·이름.js).
관리자 페이지 프리셋은 Firestore 빌더의 조회 페이지 규격(admin.html + admin.js, CSS는 HTML 안 유지)에 맞춰 CSS 분리를 자동으로 끕니다.
src가 있는 외부 스크립트(CDN 등)와 외부 CSS <link>는 그대로 유지됩니다.
firebaseConfig 분리를 켜면 const firebaseConfig = {...}를 config.js로 빼고, module 스크립트면 export/import를 자동으로 연결합니다 — Firestore 앱 빌더의 4파일 구성과 동일해집니다.
JSON·importmap 등 자바스크립트가 아닌 <script> 타입은 건드리지 않습니다.
분리 후에는 반드시 브라우저에서 열어 동작 확인을 하세요. 아주 특수한 구조(주석 속 태그 등)에서는 수동 확인이 필요할 수 있습니다.