CSS 추출기
HTML 파일에서 CSS 추출
HTML 입력
추출된 CSS
CSS 추출 예제
<style> 태그와 인라인 스타일에서 CSS를 추출합니다. 예시:
임베디드 스타일이 있는 HTML
HTML 입력:
추출된 CSS:
위의 샘플을 사용하여 추가 예제 데이터를 불러오세요.
CSS 추출기란?
HTML 파일은 종종 <style> 태그 또는 인라인 style 속성에 CSS를 포함합니다. CSS 추출기는 HTML을 파싱하고 모든 스타일을 하나의 CSS 파일로 추출합니다. 임베디드 스타일을 외부 스타일시트로 마이그레이션하거나, 페이지가 사용하는 CSS를 감사하거나, 스크래핑한 HTML을 편집 가능한 CSS로 변환하는 데 유용합니다. HTML 사양 및 CSS 사양이 구조를 정의합니다.
이 도구는 브라우저에서 실행됩니다. HTML을 붙여넣거나 .html 파일을 업로드하세요. <style> 블록 내용과 인라인 스타일을 추출합니다. 서버로 데이터가 전송되지 않습니다. 출력 형식을 지정하려면 CSS 포매터를 사용하세요. 여러 CSS 파일을 결합하려면 CSS 결합기를 사용하세요.
이 도구 사용 방법
HTML 붙여넣기 또는 업로드
HTML을 왼쪽 편집기에 붙여넣거나 업로드를 클릭하여 .html 또는 .htm 파일을 불러오세요. 샘플을 사용하여 임베디드 스타일이 있는 예제 HTML을 불러오세요.
추출된 CSS 확인
오른쪽 패널에 <style> 태그와 인라인 스타일에서 추출된 CSS가 표시됩니다. 유효성 검사에는 CSS 유효성 검사기를 사용하세요. 최소화에는 CSS 최소화기를 사용하세요.
복사 또는 다운로드
복사 또는 다운로드를 사용하여 CSS를 저장하세요. HTML을 Markdown으로 변환하려면 HTML을 Markdown으로를 사용하세요. CSS를 인라인으로(이메일) 변환하려면 CSS 인라인 변환을 사용하세요.
CSS 추출이 도움이 되는 경우
레거시 사이트를 마이그레이션하거나 단일 파일 HTML 문서를 구조화된 프로젝트로 변환할 때 CSS 추출이 첫 번째 단계입니다. 이메일 템플릿, CMS 내보내기 또는 스크래핑한 페이지에는 임베디드 스타일이 많습니다. 이 도구는 리팩토링의 출발점을 제공합니다. MDN HTML 및 MDN CSS에서 표준을 문서화합니다.
추출한 CSS를 다른 스타일시트와 결합하려면 CSS 결합기를 사용하세요. 벤더 접두사를 추가하려면 CSS 접두사 추가기를 사용하세요. 전처리기 변환에는 SCSS를 CSS로 또는 Stylus를 CSS로를 사용하세요.
자주 묻는 질문
데이터는 비공개인가요?
네. 추출은 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다.
@import 또는 링크된 CSS를 추출하나요?
아니요. <style> 블록 내용과 인라인 style 속성만 추출합니다. 외부 스타일시트(@import 또는 <link>)는 가져오거나 포함하지 않습니다.
인라인 스타일은 어떻게 되나요?
인라인 스타일은 추출되고 참조용으로 주석으로 래핑됩니다. 특정 요소에 적용되므로 재사용을 위해 출력을 수동으로 조정해야 할 수 있습니다.
범위 지정 스타일을 처리하나요?
범위 지정 스타일(예: Vue scoped, Angular 뷰 캡슐화)은 있는 그대로 추출됩니다. CSS를 다른 곳에서 사용할 때 범위 속성을 고려해야 할 수 있습니다.
URL에서 추출할 수 있나요?
이 도구는 붙여넣거나 업로드한 HTML로 작동합니다. URL에서 추출하려면 다른 방법으로 HTML을 가져와 여기에 붙여넣으세요.