온라인 CSS 인라이너

CSS 인라이너의 주요 기능

이 도구는 HTML 문서 내의 style 요소에 정의된 CSS 규칙을 각 요소의 style 속성으로 변환합니다. 예를 들어, <style>p{color:red}</style><p>Hello</p> 입력 시 <p style="color: red;">Hello</p>가 생성됩니다.

작동 방식

브라우저가 HTML을 파싱하고, 모든 style 요소의 텍스트와 추가 CSS를 연결합니다. 그런 다음 중괄호 패턴을 기반으로 간단한 선택자 블록을 찾아 일치하는 선언을 각 요소의 인라인 스타일에 적용합니다. '스타일 제거' 옵션이 선택된 경우 모든 style 요소가 제거되고, 결과는 doctype으로 시작하는 완전한 문서로 직렬화됩니다.

제한 사항

이 변환은 가볍게 설계되어 CSS 계단식, 특이성, 미디어 쿼리, 키프레임, 의사 요소, 중첩 CSS, 외부 링크 스타일시트 또는 계산된 스타일을 완전히 구현하지 않습니다. 유효하지 않은 선택자는 건너뜁니다. 브라우저는 파싱 중 HTML을 정규화할 수 있습니다.

개인 정보 보호

변환은 로컬에서 실행되며 외부 스타일시트나 원격 자산을 로드하지 않습니다.

FAQ

Q1: CSS 인라이너가 미디어 쿼리나 애니메이션을 지원하나요?

아니요. 이 도구는 간단한 선택자 블록만 처리하며 미디어 쿼리, 키프레임, 의사 요소, 중첩 CSS 등을 지원하지 않습니다. 복잡한 CSS는 인라인으로 변환되지 않을 수 있습니다.

Q2: '스타일 제거' 옵션을 선택하지 않으면 어떻게 되나요?

선택하지 않으면 원본 style 요소가 결과 문서에 유지됩니다. 선택하면 모든 style 요소가 제거되어 인라인 스타일만 남습니다.

Q3: 결과가 원본과 다르게 보일 수 있나요?

네, 이 도구는 CSS의 전체적인 동작을 재현하지 않으므로 시각적 렌더링이 변경될 수 있습니다. 출력을 대상 이메일 클라이언트나 브라우저에서 확인하는 것이 좋습니다.

체크리스트

• HTML에 style 요소가 포함되어 있는지 확인
• 추가 CSS가 필요한 경우 두 번째 소스에 입력
• 스타일 제거 옵션 선택 여부 결정
• 변환 결과를 이메일 클라이언트에서 테스트