CSS 인라인 스타일 ➔ 규칙으로 추출 변환
HTML 태그 내에 작성된 인라인 style 속성을 깔끔한 외부 CSS 클래스 선택자 규칙으로 리팩토링
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
빠르게 작업하느라 HTML 태그 내부에 마구 섞여 들어간 `style="..."` 인라인 속성들을 자동으로 분리하여, 깔끔한 CSS 클래스 정의문과 인라인이 제거된 순수 HTML 태그 코드로 완전히 쪼개어 정제해 주는 리팩토링 도구입니다.
사용 방법
- 인라인 스타일이 듬뿍 들어간 HTML 코드를 복사하여 입력란에 넣습니다.
- 자동 생성될 CSS 클래스명에 붙일 접두사(Prefix)를 지정합니다.
- 추출 변환 버튼을 실행하여 스타일이 제거되고 클래스가 적용된 HTML과 분리된 CSS 규칙을 각각 복사합니다.
자주 묻는 질문
- 기존에 이미 클래스가 적용되어 있던 태그는 어떻게 되나요?
- 기존 태그에 등록되어 있던 클래스는 그대로 유지하면서, 인라인 스타일에서 추출된 고유의 새로운 클래스명이 뒤에 덧붙여지므로 레이아웃 손실 없이 안전합니다.