HTML 이메일 인라인 CSS 변환기

HTML 이메일 인라인 CSS 변환기 사용법

HTML 이메일은 일반 웹페이지보다 CSS 지원 범위가 제한적이어서 외부 스타일시트나 <style> 태그만으로 작성한 디자인이 일부 메일 클라이언트에서 깨질 수 있습니다. HTML과 CSS를 입력하면 선택자에 일치하는 태그를 찾아 style 속성으로 변환해 이메일 발송 전 코드를 정리할 수 있습니다.

HTML 안에 이미 <style> 태그가 있다면 별도로 복사하지 않아도 됩니다. 외부 CSS 파일을 사용하는 경우에는 CSS 코드를 CSS 입력란에 붙여 넣어 주세요.

계산 방법

각 HTML 요소에 적용되는 CSS 선택자를 분석한 뒤 CSS 우선순위와 선언 순서를 반영해 최종 inline style을 만듭니다.

!important 선언은 일반 선언보다 높은 우선순위로 처리하며 기존 inline style도 함께 고려합니다. @media, :hover, :visited처럼 일반 속성으로 완전히 대체하기 어려운 규칙은 결과 HTML의 <style> 블록에 보존합니다.

계산 예시

• 상황 1: CSS에 .card { color: red; }를 입력하고 <div class="card">내용</div>를 변환하면 <div class="card" style="color: red;">내용</div>이 됩니다.
• 상황 2: #notice { font-size: 16px; color: #333; }를 <p id="notice">안내 문구</p>에 적용하면 두 CSS 선언이 하나의 inline style 속성으로 합쳐집니다.

사용 시 주의사항 및 활용 팁

• 외부 CSS 파일의 URL을 직접 입력하는 방식이 아니라 CSS 코드 자체를 복사해 사용합니다.
• 이메일 클라이언트마다 지원하는 HTML과 CSS가 다르므로 변환 후 실제 발송 테스트를 권장합니다.
• 이미지 경로, 웹폰트, 배경 이미지, 미디어 쿼리는 메일 서비스의 보안 정책과 지원 범위를 별도로 확인하세요.
• 변환 결과는 HTML 원문을 재구성하므로 발송 전에 링크, 이미지, 특수문자가 정상적으로 유지되는지 검토해 주세요.