Gmail에서 HTML 메일 CSS가 작동하지 않는 문제 해결

5550 단어 HTMLCSSgmail
CSS로 얽히고 스타일을 지정한 세련된 HTML 메일을 만들었는데, Gmail로 열어 보면···「아레, 스타일이 효과가 없어?!」라고 하는 때의 대처법입니다.

Gmail에서 HTML 메일 CSS가 작동하지 않는 원인



Gmail을 대표하는 웹메일 클라이언트는 메일을 볼 때 보안 위협으로 간주되는 모든 요소를 ​​삭제합니다.
일반적으로 제거되는 요소는
  • JavaScript
  • object 태그 : 문서에 외부 리소스를 포함
  • embed 태그 : 동영상 및 오디오와 같은 플러그인이 필요한 데이터를 페이지에 삽입합니다.
  • Flash

    • 있습니다.

    이 외에도 Gmail은 <head> 및 <body>에 설명 된 <style> 태그를 삭제합니다.

    CSS 스타일 지정 방법



    HTML로 스타일시트 파일 로드


    <head> 태그에 로드할 스타일시트를 지정합니다.
    <link href="<CSSファイルのURL>" rel="stylesheet" type="text/css">

    hogehoge.css 파일을 로드하는 경우
    <html>
  <head>
　 　<link href="hogehoge.css" rel="stylesheet" type="text/css">
  </head>
</html>

    HTML 파일에 직접 쓰기


    <head> 또는 <body> 안에 스타일 시트 설정을 설명합니다.
    <style type="text/css">
  スタイルの設定を記述!
</style>

    h1의 문자색을 빨강으로 하는 경우
    <html>
  <head>
    <style type="text/css">
      h1 {color:red;}
    </style>
   </head>

   <!-- または -->

  <body>
    <style type="text/css">
      h1 {color:red;}
    </style>
  </body>
</html>

    인라인 형식



    직접 태그에 style="属性:値;"를 씁니다.

    h1의 문자색을 빨강으로 하는 경우
    <html>
  <body>
    <h1 style="color:red;">赤色で表示されます</h1>
  </body>
<html>

    세 가지 지정 방법에서 알 수 있듯이 인라인 형식 이외의 방법은 Gmail에 의해 삭제됩니다.

    해결 방법: CSS 스펙을 인라인화



    각 태그에 style="属性:値;"를 쓰면 Gmail에서 볼 수 있습니다.
    하지만 이것이 상당히 힘들다.

    자동으로 인라인화


  • htps : // / ㅇㅇㅇ r. 및 rch 보 x. 이 m/styぇr/안녕 rt/

    • 변환 사이트를 사용하면 자동으로 변환해줍니다.

    사용법


  • Choose your source from a URL 에 사이트 링크를 붙이거나 Enter your source HTML 에 소스 코드 작성
  • Convert를 클릭합니다.


    • 실제로 변환된 코드를 붙여넣습니다.

    변환 전
    <html>
  <head>
    <style type="text/css">
      h1 {color:red;}
    </style>
   </head>
   <body>
     <h1>赤色で表示されます</h1>
   </body>
</html>

    변환 후
    <html>
  <head>
  </head>
   <body>
     <h1 style="color: red">赤色で表示されます</h1>
   </body>
</html>

    요약



    일반적인 웹 메일 클라이언트는 메일을 볼 때 보안 위협으로 간주되는 모든 요소를 ​​삭제합니다.
    또한 Gmail은 <head> 및 <body>에 설명된 <style> 태그를 삭제합니다.

    CSS를 사용하여 HTML 메일을 보내고 싶다면 CSS를 인라인 형식으로 작성해야합니다.
    이 작업은 매우 꾸준하기 때문에 HTML 파일에 직접 CSS를 작성하고 나중에 자동으로 변환하는 것이 좋습니다!
    GmailAPI+Ruby+Slack으로 메일 확인 촉구 BOT!
    Gmail에서 수신한 예약 완료 이메일에서 Google 캘린더에 이벤트를 추가하는 GAS 스크립트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage