입력 CSS

인라인 스타일 코드

CSS를 인라인 스타일로 변환이란?

CSS 스타일시트 규칙을 인라인 style 속성으로 변환해야 하나요? 이 도구가 정확히 그 역할을 합니다. CSS 규칙을 받아 HTML 요소에 바로 붙여넣을 수 있는 인라인 스타일 코드로 변환합니다.

인라인 스타일은 Gmail, Outlook 등의 이메일 클라이언트가 외부 스타일시트를 제거하는 HTML 이메일 작업 시 필수입니다. 또한 이메일 테스트 도구, HTML-to-이미지 변환기, 연결된 CSS를 지원하지 않는 레거시 HTML 생성 시스템에도 꼭 필요합니다. 이 도구는 번거로운 수작업을 자동화합니다.

변환기는 모든 CSS 속성, 벤더 프리픽스, !important 플래그, font·margin 같은 단축 속성, 미디어 쿼리를 처리합니다. 모든 것이 브라우저 내에서 즉시 처리됩니다 — 서버 업로드 없음, 데이터 보관 없음, 완전히 안전합니다.

CSS를 인라인 스타일로 변환하는 방법

CSS 규칙을 인라인 스타일 코드로 변환하려면 아래 단계를 따르세요. 각 단계에서는 이 페이지의 실제 버튼과 패널을 사용합니다.

붙여넣기, 업로드 또는 샘플 불러오기

왼쪽 입력 CSS 패널에 CSS를 붙여넣거나, 업로드를 클릭해 .css 파일을 불러오세요. 샘플을 클릭하면 통신사 구독자 대시보드 예제 스타일을 확인할 수 있습니다. 예시:

.subscriber-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 8px;
}
.plan-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e3f2fd;
}

인라인 스타일 코드 확인

오른쪽 인라인 스타일 코드 패널에 각 선택자가 style="property: value; ..." 형식으로 표시됩니다. HTML 요소, 이메일 템플릿, 또는 인라인 스타일이 필요한 레거시 시스템용으로 코드를 복사하세요.

복사 또는 다운로드

복사를 클릭해 클립보드에 복사하거나, 다운로드를 클릭해 저장하세요. 지우기로 처음부터 다시 시작할 수 있습니다. 모든 처리는 브라우저에서 실행됩니다.

실제로 유용한 경우

HTML 이메일 디자인

이메일 클라이언트는 외부 스타일시트를 제거합니다. CSS로 이메일 디자인을 완성한 뒤 이 도구로 인라인 스타일로 변환하세요. Campaign Monitor, Mailchimp 같은 이메일 플랫폼과 완벽하게 연동됩니다.

HTML-to-이미지 변환

HTML을 이미지나 PDF로 변환하는 도구는 외부 CSS 파일을 불러오지 않으므로 인라인 스타일이 필요합니다. 이런 변환기에 HTML을 전달하기 전에 스타일시트를 인라인 스타일로 변환하면 완벽하게 렌더링됩니다.

레거시 시스템 마이그레이션

최신 웹 프레임워크에서 인라인 스타일만 지원하는 레거시 시스템으로 마이그레이션하고 있나요? 이 도구로 자동 변환하면 수작업으로 스타일을 복사하고 정리하는 수 시간의 작업을 절약할 수 있습니다.

동적 HTML 생성

모든 요소에 인라인 스타일이 필요한 HTML 생성기나 템플릿 시스템을 구축하고 있나요? 마스터 CSS를 한 번만 변환한 뒤 생성 코드 전체에서 인라인 스타일 코드를 참조할 수 있습니다.

자주 묻는 질문

HTML 이메일에서 CSS 파일을 링크하면 안 되나요?

대부분의 이메일 클라이언트(Gmail, Outlook, Apple Mail)는 보안과 일관성을 위해 <link> 및 <style> 태그를 제거합니다. 인라인 스타일은 이메일 HTML을 안정적으로 스타일링할 수 있는 몇 안 되는 방법 중 하나입니다. 이메일 클라이언트의 CSS 지원 현황은 Campaign Monitor CSS 지원 가이드를 참고하세요.

복잡한 선택자도 변환되나요?

변환기는 대부분의 CSS 선택자를 처리합니다. 단순 선택자(요소, 클래스, ID)는 직접 변환됩니다. 복잡한 선택자는 어떤 규칙이 어떤 요소에 적용되는지 알 수 있도록 표시됩니다. :hover 같은 인라인화할 수 없는 의사 선택자는 변환 불가로 안내됩니다.

미디어 쿼리를 인라인 스타일로 변환할 수 있나요?

미디어 쿼리는 인라인 스타일로 표현할 수 없으며 별도의 <style> 블록이 필요합니다. 변환기는 미디어 쿼리 규칙을 식별해 인라인화 가능한 스타일과 분리하므로, 별도 처리가 필요한 항목을 쉽게 파악할 수 있습니다.

단축 속성을 지원하나요?

물론입니다. margin: 10px 20px, padding: 5px, font: bold 12px Arial 같은 단축 속성은 이메일 클라이언트와의 최대 호환성을 위해 자동으로 개별 속성으로 확장됩니다.

!important 선언은 어떻게 처리되나요?

!important 플래그는 인라인 스타일에 그대로 유지됩니다. 작성한 대로 작동하여 높은 명시도를 강제하고 충돌하는 스타일을 재정의합니다. 스타일 우선순위를 보장해야 할 때 사용하세요.

CSS 데이터가 저장되거나 분석되나요?

아니요. 모든 변환은 JavaScript를 사용해 브라우저 내에서 이루어집니다. CSS가 컴퓨터 밖으로 나가지 않으며 데이터를 저장하거나 분석하거나 기록하지 않습니다. 완전한 개인 정보 보호가 보장됩니다.

CSS를 인라인 스타일로 변환