CSS 입력

인라인 스타일 스니펫

CSS 인라인 변환 예제

CSS 규칙을 이메일 또는 HTML용 인라인 style 스니펫으로 변환합니다. 예시:

제목 및 버튼 스타일

CSS 입력:

입력

인라인 스니펫 출력:

출력

위의 샘플을 사용하여 추가 예제 데이터를 불러오세요.

CSS 인라인 스타일이란?

인라인 스타일은 HTML 요소의 style 속성입니다. 이메일 클라이언트, 일부 CMS 시스템, 특정 프레임워크는 외부 스타일시트를 제거하거나 무시하기 때문에 인라인 스타일이 필요합니다. 이 도구는 CSS 규칙을 HTML에 붙여넣을 수 있는 인라인 style="..." 스니펫으로 변환합니다. W3C CSS 사양에서 소스 형식을 정의합니다.

변환은 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다. 출력은 HTML에 바로 사용할 수 있습니다. 전체 HTML 이메일 인라이닝(선택자를 요소에 맞추기)에는 Juice 같은 전용 도구를 사용하세요. 이 도구는 CSS 규칙에서 스타일 스니펫을 생성합니다.

이 도구 사용 방법

CSS 붙여넣기 또는 업로드

CSS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .css 파일을 불러올 수도 있습니다. 샘플 버튼은 예제 데이터를 불러옵니다. 잘못된 CSS는 오류를 표시합니다.

인라인 스니펫 확인

오른쪽 패널에 각 규칙에 대한 스타일 스니펫이 표시됩니다. 각 스니펫은 HTML 요소에 추가할 수 있는 <code>style="..."</code> 문자열입니다. 어떤 요소에 어떤 스타일이 적용되는지 알 수 있도록 선택자가 나열됩니다.

복사 또는 다운로드

복사 또는 다운로드를 사용하세요. 스니펫을 HTML에 붙여넣으세요. CSS 형식을 먼저 지정하려면 CSS 포매터를 사용하세요. 최소화하려면 CSS 최소화기를 사용하세요.

변환이 작동하는 방식

이 도구는 CSS 규칙을 파싱하고 각 선언 블록을 style="property: value; ..." 문자열로 변환합니다. 어떤 스니펫이 어떤 요소에 적용되는지 알 수 있도록 선택자가 나열됩니다. 출력은 HTML style 속성 문법을 따릅니다. 전체 HTML+CSS 인라이닝(선택자를 요소에 자동으로 맞추기)에는 Juice 또는 Can I Email이 이메일 클라이언트 지원을 문서화합니다.

CSS 인라인 변환이 도움이 되는 경우

이메일 HTML이 가장 일반적인 사용 사례입니다. Gmail, Outlook 및 많은 클라이언트는 <style> 태그와 외부 스타일시트를 제거합니다. 인라인 스타일은 이메일을 스타일링하는 가장 안정적인 방법입니다. 여기서 CSS를 변환하면 <td>, <div> 및 다른 요소에 추가할 스니펫을 얻을 수 있습니다.

HTML을 허용하지만 CSS 파일을 허용하지 않는 CMS 시스템, PDF 생성기 또는 레거시 도구는 종종 인라인 스타일이 필요합니다. 여기서 변환하면 필요한 형식을 얻을 수 있습니다. 인라이닝 전에 벤더 접두사를 추가하려면 CSS 접두사 추가기를 사용하세요. CSS 형식을 지정하거나 최소화하려면 CSS 포매터 또는 CSS 최소화기를 사용하세요.

자주 묻는 질문

전체 HTML에 인라인화하나요?

이 도구는 CSS 규칙에서 스타일 스니펫을 생성합니다. HTML을 파싱하거나 요소에 스타일을 적용하지 않습니다. 전체 변환(HTML + CSS를 인라인 스타일이 있는 HTML로)에는 Juice 같은 도구를 사용하세요.

데이터는 비공개인가요?

네. 변환은 브라우저에서 완전히 실행됩니다. 서버로 데이터가 전송되지 않습니다.

의사 클래스는 어떻게 되나요?

:hover 및 ::before 같은 의사 클래스는 인라인화할 수 없습니다. 인라인 스타일은 정적 속성만 지원합니다. 기본 스타일에 사용하세요. 이메일 클라이언트는 hover에 제한된 <style>을 지원할 수 있습니다.

미디어 쿼리는 어떻게 되나요?

미디어 쿼리는 인라인화할 수 없습니다. 인라인 스타일은 요소별입니다. 반응형 이메일에는 하이브리드 방식을 사용하세요: 기본 스타일은 인라인으로, 미디어 쿼리는 지원되는 경우 <style>로.

특이성과 상속은?

인라인 스타일은 높은 특이성을 가집니다. 스니펫을 요소에 붙여넣으면 대부분의 다른 스타일을 재정의합니다. 여러 규칙이 동일한 요소에 적용될 때 순서가 중요합니다.

CSS 인라인 변환기