[2020] 깨끗한 모바일 퍼스트 방탄 이메일을 만드는 방법🛡️ 🔫 ?

30503 단어 mjmlnewbieemailwebdev
flexbox, div 또는 grid 포석 이전에 table 포석이 표준이다.사이트의 레이아웃은 표를 이용하여 만들어진 것이기 때문에 일부 사람들에게 매우 어려운 시기이다.Frontpage를 사용할 때 정말 미쳤던 기억이 나요:).
곧 2020년이 되면 웹 디자인 레이아웃은 더욱 쉽게 창설되고 관리될 것이다.Tailwind, Bulma, Bootstrap 등 좋은 프레임워크 덕분에 웹 레이아웃을 쉽게 만들 수 있습니다.
이 세부 사항을 건너뛰고 싶으면 튜토리얼 click here으로 이동하십시오
이제 방 안의 코끼리 -> HTML 이메일에 대해 이야기합시다.
HTML 전자 메일은 여전히 <table> 레이아웃을 사용하거나 최소한 모든 전자 메일 클라이언트와 호환됩니다.
e, g는 아래의 Outlook(Windows) 그림을 보면 지원이 얼마나 엉망인지 깨닫게 됩니다.( Source )

더 좋은 시각을 얻기 위해 이 목록을 보십시오.

따라서 이 모든 전자 메일 클라이언트를 위해 특정한 HTML 코드를 작성하는 것은 쉽지 않다. 이것이 바로 우리가 전자 메일 표시 언어를 사용하여 전자 메일 클라이언트의 특정한 HTML 코드를 처리해야 하는 이유이다.
e-메일 태그 언어는 모든 e-메일 클라이언트 (적어도 가장 자주 사용하는 클라이언트 이상) 에서 e-메일 응답을 작성하는 고통을 줄이기 위한 것입니다.
다음은 2020년 8월까지 최고의 이메일 클라이언트 목록(Source)입니다.

MJML, 전자 메일 기초 등 몇 가지 전자 메일 표기 언어가 있습니다. 그러나 오늘 강좌에서는 MJML을 전자 메일 표기 언어로 사용합니다.

시작합시다!

This is going to be the final look of our email:

인코딩을 시작합시다!


이 강좌에서, 나는 우리가 사용할 mjml 구성 요소만 토론할 것이다.자세한 내용은 MJML Documentation 을 참조하십시오.

This email is one of 60+ free email templates available on Codedmails


마찬가지로 간단하게 보기 위해서, 우리는 Try it Live by MJML을 사용하여 mjml를 쉽게 작성하여 의미 HTML 코드로 생성할 것이다.
"Hello World"로 출력되는 전자 메일을 만듭니다.다음은 MJML을 사용하여 작성하는 방법입니다.
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
편집기에서 HTML 보기를 클릭하면 태그 언어를 사용하여 작업량을 얼마나 절약할 수 있는지 알 수 있습니다.10선 대 121선.MJML은 의미 코드를 만들고 먼저 이동합니다. 이것은 모든 전자메일이 응답한다는 것을 의미합니다.
e-메일 태그 언어의 이점은 다음과 같습니다.
전자 우편 디자인으로 돌아가서 자세히 보시면, 이미지, 단추, 텍스트, 소셜 미디어 아이콘, 응용 프로그램 아이콘 같은 항목을 사용하고 있습니다.
MJML에는 미리 정의된 구성 요소가 있습니다. 이 구성 요소를 사용하여 부분을 만들 것입니다. <mj-section>은 이미지를 삽입하는 데 사용되고, <mj-image>은 모든 텍스트에 사용됩니다. 제목과 단락을 포함하고, <mj-text>은 단추를 추가하고, <mj-button>은 소셜 아이콘과 링크를 만드는 데 사용되며, <mj-social>은 빈 수직 공간을 만드는 데 사용됩니다.<mj-spacer>을 <mj-section>을 첨가한 용기로 상상합니다.

기본 구조


MJML은 <mj-column>으로 시작됩니다.<mjml>과 <mj-head>이 유일한 아이입니다.<mj-body>은 전역 속성을 추가하는 데 사용됩니다. 예를 들어 전역 글꼴 시리즈, 글꼴 크기 등을 설명합니다. 모든 mjml 태그에 기본값을 추가하는 데도 사용됩니다.모든 내용은 <mj-head> 라벨에 있어야 합니다.<mj-body> 태그를 사용하여 구글 글꼴을 직접 추가할 수도 있습니다.

You can also use normal HTML tags inside the MJML tags e.g using an H1 text inside a <mj-text><h1>Heading</h1></mj-text>is also allowed and semantically correct.


<mjml>
  <mj-head>
    <!-- Define global attributes -->
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f" />
      <mj-button border-radius="8px" background-color="#656285" color="white" align="center" />
      <mj-text font-weight="400" line-height="22px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>

        <!-- Content --->

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in live MJML Editor

열 만들기


만약 우리가 두 열의 크기가 같은 부분을 포함하고 싶다면, 우리는 이렇게 쓸 것이다
<mjml>
  <mj-body>
    <mj-section>
      <mj-column background-color="#dadada">
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">50% Width</mj-text>
      </mj-column>
      <mj-column background-color="#cacaca">
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">50% Width</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
이 열은 이동되므로 작은 화면에서 기본적으로 겹쳐집니다.따라서 bootstrap, Bulma와 같은 CSS 프레임워크를 사용했다면 줄과 열로 간주하면 됩니다.

추가 내용


이미지를 추가하기 위해 <mj-font> 태그를 사용합니다.이와 유사하게 대부분의 UI 요소에 대해 <mj-image>을 사용할 수 있습니다.모든 구성 요소에 대한 추가 정보: Official MJML Documentation
<mjml>
  <mj-head>
    <!-- Define global attributes -->
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f" />
      <mj-button border-radius="8px" line-height="30px" background-color="#656285" color="white" align="center" />
      <mj-text font-weight="400" line-height="22px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>
        <mj-image align="center" padding="8px 0" width="150px" src="https://codedmails.com/images/logo-white.png"></mj-image>
      </mj-column>
    </mj-section>

    <mj-section border-radius="20px 20px 0 0" css-class="noradius" background-size="cover" background-repeat="no-repeat" background-url="https://images.unsplash.com/flagged/photo-1575665081424-b9ebebfd7eee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
      <mj-column>
        <mj-spacer height="250px"></mj-spacer>
      </mj-column>
    </mj-section>

    <mj-section background-color="#fff" border-radius="0 0 20px 20px">
      <mj-column>

        <mj-text>Content goes here</mj-text>
        <mj-button align="left">This is a Button</mj-button>
         <mj-social mode="horizontal" align="left">
          <mj-social-element alt="twitter-logo" icon-size="32px" src="https://codedmails.com/images/social/color/twitter-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="facebook-logo" icon-size="32px" src="https://codedmails.com/images/social/color/facebook-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="instagram-logo" icon-size="32px" src="https://codedmails.com/images/social/color/insta-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="youtube-logo" icon-size="32px" src="https://codedmails.com/images/social/color/youtube-logo-transparent.png" href="#"></mj-social-element>
        </mj-social>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
Open in MJML Live Editor
mjml 구성 요소(예를 들어 소셜 미디어와 <mj-component)를 사용하여 더 많은 내용을 추가한 후에 우리는 지금까지 다음과 같은 성과를 거두었다

현재 최종 버전입니다. 더 많은 조정과 내용이 있습니다.

사진은 Artur Wayne에서 Unsplash으로 촬영되었다
<mjml lang="en">
  <mj-head>
    <mj-title>Welcome to [Coded Mails]</mj-title>
    <mj-preview>Preview -You have a new support message</mj-preview>
    <mj-font name="Nunito" href="https://fonts.googleapis.com/css?family=Nunito:100,400,700"></mj-font>
    <mj-attributes>
      <mj-all font-family="Nunito, Helvetica, Arial, sans-serif" font-size="16px" color="#54595f"></mj-all>
      <mj-button border-radius="8px" line-height="30px" background-color="#656285" color="white" align="center"></mj-button>
      <mj-text font-weight="400" line-height="22px"></mj-text>
      <mj-class name="heading" font-weight="400" font-size="18px" line-height="30px" />
      <mj-class name="footer-text" color="#D0DBEA" font-size="14px" line-height="18px" />
    </mj-attributes>
    <mj-style inline="inline">
      h1, h2 { margin: 0; font-size: 24px; line-height: normal; font-weight: bold; } h2 { font-size: 20px; } p { margin: 0; } a { color: #54595f; text-decoration: underline; } .footer-link{color: #D0DBEA;}
    </mj-style>
    <mj-style>
      a, span, td, th { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } @media only screen and (max-width: 600px) { .noradius {border-radius: 0 !important;} }
    </mj-style>
  </mj-head>
  <mj-body background-color="#656285">
    <mj-section>
      <mj-column>
        <mj-image align="center" padding="8px 0" width="150px" src="https://codedmails.com/images/logo-white.png"></mj-image>

      </mj-column>
    </mj-section>
    <mj-section border-radius="20px 20px 0 0" css-class="noradius" background-size="cover" background-repeat="no-repeat" background-url="https://images.unsplash.com/flagged/photo-1575665081424-b9ebebfd7eee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
      <mj-column>
        <mj-spacer height="250px"></mj-spacer>
      </mj-column>
    </mj-section>


    <mj-section background-color="#ffffff" border-radius="0 0 20px 20px" css-class="noradius">
      <mj-column width="100%">

        <mj-text mj-class="heading">
          <h2> Hey Mike,</h2>
        </mj-text>
        <mj-text>
          <h1>You have a new support message.</h1>
        </mj-text>

        <mj-text font-style="italic">
          <p><strong> Message </strong> : It has survived not only five centuries, but the normal behaviour of the loream is not about just the values you get from the mathamatical equation but also... </p>
        </mj-text>

        <mj-button align="center" href="https://google.com">
          Read the complete message
        </mj-button>

        <mj-text>If you have any questions simply reply to this email and we would be more than happy to reply. :)</mj-text>

      </mj-column>

    </mj-section>

    <mj-section padding-bottom="0px">
      <mj-column width="100%">
        <mj-text align="center">
          <a href="#" style="display: inline-block; text-decoration: none;">
        <img src="https://codedmails.com/images/google-play.png" alt="play-store-logo" width="150px" />
      </a>
          <a href="#" style="display: inline-block; text-decoration: none;">
        <img src="https://codedmails.com/images/app-store.png" alt="app-store-logo" width="150px" />
      </a>
        </mj-text>
      </mj-column>
      <mj-column width="100%">
        <mj-social mode="horizontal" align="center">
          <mj-social-element alt="twitter-logo" icon-size="32px" src="https://codedmails.com/images/social/color/twitter-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="facebook-logo" icon-size="32px" src="https://codedmails.com/images/social/color/facebook-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="instagram-logo" icon-size="32px" src="https://codedmails.com/images/social/color/insta-logo-transparent.png" href="#"></mj-social-element>
          <mj-social-element alt="youtube-logo" icon-size="32px" src="https://codedmails.com/images/social/color/youtube-logo-transparent.png" href="#"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>

    <mj-section padding-top="0px">
      <mj-column>

        <mj-text align="center" mj-class="footer-text">
          123 Medalling Jr., Suite 100, Parrot Park, CA 12345<br /> © 2020 [Coded Mails] Inc.</mj-text>
        <mj-text mj-class="footer-text" align="center">
          Update your <a class="footer-link" href="https://google.com">email preferences</a> to choose the types of emails you receive, or you can <a class="footer-link" href="https://google.com"> unsubscribe </a>from all future emails.
        </mj-text>

      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-spacer height="1px"></mj-spacer>
      </mj-column>
    </mj-section>


  </mj-body>
</mjml>
Edit the final version online

HTML 이메일이 전송될 준비가 되었습니다.


Mailchimp,Sendgrid,WordPress,소인 등으로 방탄 메일을 보낼 수 있습니다.

다음은 뭐예요?


만약 당신이 전자 우편의 발전에 관한 더 많은 정보를 알고 싶다면, 따라가는 것을 잊지 마세요.
또한 의견이나 피드백이 있으면 언제든지 의견을 발표하십시오.

마지막 일😍


Codedmails이라는 전자 메일 템플릿 라이브러리를 만들었습니다. 같은 정책과 프레임워크를 사용하여 60여 개의 전자 메일 템플릿과 테마를 만들었습니다.여기에서 자세한 내용을 확인할 수 있습니다.

HTML 전자 메일을 만드는 데 많은 시간을 들였습니까?

아스람 사아・ 20년 9월 15일・ 1분 읽기

#email #newsletter #webdev #beginners
LeetCode 145 [Binary Tree Postorder Traversal]
POJ2255 Tree Recovery 두 갈래 나무 범람

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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