🙃 HTML 이메일 템플릿 폼 작업 시 유의사항

네이버 클라우드 플랫폼(NCP)에 HTML 통짜로 작업된 이메일 인증 폼 코드 삽입 시 

```ts
<style></style>
<html>
   <head></head>
</html>
```
태그들이 자동삭제 된다.

그 외에도 HTML 이메일 템플릿을 만들 때 고려해야 할 사항들이 많다.
어떻게 작업해야 좋을지 알아보자!



### 스타일

- 스타일은 **인라인 스타일 (inline-style)**로 작업해야한다.


- `display:flex` 관련한 스타일 속성은 적용이 안된다. 크로스 브라우징을 고려해서 **모든 브라우저에서 사용 가능한 스타일 속성을 적용 시켜야 한다.** 

- 반응형 미디어쿼리는 지원 안해주니 그런 부분들도 고려해서 작업해야합니다. 모바일 PC에 따른 반응형으로 작업하고 싶다면 `style="max-width: 100%"`를 넣어 모바일 기기에서도 깨지지 않도록 합니다.

### 이미지

- 이미지 확장자는 jpg, png로 해야 엑박 현상이 일어나지 않는다. 

- `svg`를 사용할 시 엑박 현상이 일어난다. 

- `width` 와 `height` 와 `alt` 값은 필수로 입력해야한다. 

- 이미지 주소는 **절대경로**로 작성하기

### 마크업
- 몇몇 이메일 클라이언트는 `<div>` 태그를 제공해주지 않기 때문에 이메일의 구조를 정상적으로 제공하려면 `<div>`를 사용하지 않고 `<table>`로 작성해야 합니다.



### 🌟 코드 예시

```html
<tr>
      <td>
        <p style="color:#424C5E;
        font-family: Pretendard;
        font-size: 17px;
        font-weight: 400;
        line-height: 160%;
        margin: 0;
        letter-spacing: -0.255px;">
         고객님의 이메일 주소를 통해
        </p>
        <p style="color:#424C5E;
        font-family: Pretendard;
        font-size: 17px;
        font-weight: 400;
        line-height: 160%;
        margin: 0;
        letter-spacing: -0.255px;">
          계정 <strong style="font-weight: 600"> ${userEmail}</strong>에 대한 접근이 요청되었습니다.
        </p>
        <p style="color:#424C5E;
          font-family: Pretendard;
          font-size: 17px;
          font-weight: 400;
          line-height: 160%;
          margin: 0;
          letter-spacing: -0.255px;">
            아래 버튼을 클릭하여 이메일 인증을 완료해 주세요.
          </p>
        </td>
    </tr>
```

이와 같이 **table** 태그를 사용해서 작업 해야하고 **인라인 스타일**로 작성해야 하는 등
이메일 템플릿을 만들 때 고려해야 될 점들이 한 두 가지가 아닙니다. 


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🙃 HTML 이메일 템플릿 폼 작업 시 유의사항 #87

스타일

이미지

마크업

🌟 코드 예시

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

🙃 HTML 이메일 템플릿 폼 작업 시 유의사항 #87

Description

스타일

이미지

마크업

🌟 코드 예시

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions