티스토리 뷰

WebPublisher/HTML 마크업

[mail form] 메일폼 작업 시 유의점

amanda 2022. 12. 7. 10:04

1. 기본 : table 태그로 작성

 

<thead>, <tbody>, <colgroup> 과 같은 <table> 관련 태그들은 기피하고, 간단하게 <table>, <tr>, <td> 로 작업

 

<table> 태그를 적용할 경우, 위처럼 초기화를 하고 사용

  • border : 선의 유무. 1은 있음, 0은 없음.
  • cellpadding : 셀 내부 여백
  • cellspacing : 셀 사이의 너비
  • width : 테이블의 가로 너비

rowspan, colspan : 행, 열 합치기. 숫자값을 전달하며, 해당 값만큼 칸을 차지한다. (이메일 폼에선 지원이 잘 되지 않아 지양한다.)

 

 

 

 

2. margin, float 지양

 

padding으로 여백 조정

 

 

 

 

* 기본 레이아웃

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Email</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

 

 

 

 

 

*참고

https://abangpa1ace.tistory.com/entry/HTML-%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%8F%BC-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-%EC%9E%91%EC%84%B1%EC%A4%91

 

[HTML] 이메일 폼 퍼블리싱

현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다. 우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리

abangpa1ace.tistory.com

*참고

https://webdesign.tutsplus.com/ko/build-an-html-email-template-from-scratch--webdesign-12770a

 

HTML 이메일 템플릿 처음부터 제작하기 | Envato Tuts+

모든 과정을 이해하는 최고의 방법은 처음부터 끝까지 직접 제작해보는 것입니다. 오늘은 HTML 이메일 템플릿을 처음부터 구축하면서 이메일 디자인에 그 방법을 실행해 보도록 하죠. 시작 시작

webdesign.tutsplus.com

 

저작자표시

'WebPublisher > HTML 마크업' 카테고리의 다른 글

[html] 색을 나타내는 방법 (RGB, HEX, HSL)  (0) 2023.03.09
input[type=file] 커스텀  (0) 2023.02.08
[html] image 태그 속성 onError  (0) 2022.08.04
[html] a 태그 download  (0) 2022.08.03
[html] 신문기사 형태 레이아웃 (PC에서 2단, mobile 1단)  (0) 2022.06.30
공지사항