반응형
Web Development · Email HTML
HTML 이벤트 메일 —
table 레이아웃 · 인라인 스타일
왜 이메일은 아직도 table과 인라인 style만 쓰는가
<body style="background:#808080"> <div style="background:#fff; margin:0 auto;"> <table> <tr><td> ... 메일 콘텐츠 ... </td></tr> </table> </div> </body>
1 왜 이메일은 table 레이아웃?
2026년에도 이메일 클라이언트(Outlook·Naver Mail·Gmail 일부)는 모던 CSS를 제대로 지원하지 않는다. flex·grid·position 등이 깨질 수 있어 1990년대 방식으로 작성하는 게 안전.
※ Outlook은 여전히 Word 렌더링 엔진을 사용하기 때문에 모던 CSS 거의 불가. table+inline style이 호환성 보장의 유일한 길.
2 이메일 HTML의 핵심 규칙
| 규칙 | 이유 |
|---|---|
| table 레이아웃 | 모든 클라이언트 호환 |
| 인라인 style만 | 외부/내부 CSS 무시되는 경우 多 |
| inline 이미지 절대경로 | 이메일 내 상대경로 X |
| 고정 width 명시 | 반응형보다 안정성 우선 |
| 이미지 alt 필수 | 차단 시 텍스트 표시 |
| border-collapse: collapse | Outlook 1px 갭 제거 |
3 이번 코드의 구조
중첩 table 구조 — 큰 table 안에 작은 table들이 들어간다.
┌── 외부 table (전체) ──┐
│ 로고 이미지 │
│ 안녕하세요... (본문) │
│ ┌── 내부 table (출간) ┐│
│ │ 빨간 제목 + 책 목록 ││
│ └────────────────────┘│
│ ┌── 내부 table (공지) ┐│
│ │ colspan="2" 헤더 ││
│ │ 이미지 ┃ 텍스트 ││
│ └────────────────────┘│
└────────────────────────┘
│ 로고 이미지 │
│ 안녕하세요... (본문) │
│ ┌── 내부 table (출간) ┐│
│ │ 빨간 제목 + 책 목록 ││
│ └────────────────────┘│
│ ┌── 내부 table (공지) ┐│
│ │ colspan="2" 헤더 ││
│ │ 이미지 ┃ 텍스트 ││
│ └────────────────────┘│
└────────────────────────┘
4 colspan — 셀 합치기
<td colspan="2">는 "두 개 셀을 하나로 합쳐 가로로 차지"한다는 뜻. 표 안의 헤더처럼.
<tr> <td colspan="2">공지</td> ← 2칸 합쳐 헤더 </tr> <tr> <td>이미지</td> <td>텍스트</td> </tr>
반응형
5 이미지 절대 경로의 이유
이메일은 사용자 메일함에 저장되어 다양한 앱에서 열린다. 상대 경로(images/logo.png)는 작성 환경 외에서 깨진다.
※ 반드시
http://kyrieko.dothome.co.kr/images/logo.png처럼 절대 URL 사용. 이미지 호스팅 서버 별도 필요.6 모던 CSS 안 되는 것들
| 속성 | 이메일 호환 |
|---|---|
| flex / grid | X (Outlook 등) |
| position: absolute | X |
| ::before / ::after | X |
| 외부 폰트 | 제한적 |
| JavaScript | 완전 차단 (보안) |
| animation | 대부분 X |
핵심 한 줄 요약
이메일 = table호환성을 위한 옛 방식
인라인 style외부/내부 CSS 무시 가능
절대 URL이미지 경로는 풀 URL
colspan셀 가로 합치기
flex/grid XOutlook 등 미지원
JS 차단보안상 완전 X
실무 도구Mailchimp · MJML 등 사용
Tags
#이메일HTML #table layout #인라인스타일 #뉴스레터 #EDM #colspan #이벤트메일 #table #td #CSS #HTML #메일링 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
이메일HTML, table layout, 인라인스타일, 뉴스레터, EDM, colspan, 이벤트메일, table, CSS, HTML, 메일링, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS 3단 레이아웃 — 좌측 사이드 · 본문 · 우측 사이드 완전 정리 (0) | 2026.05.04 |
|---|---|
| 외부 CSS와 float 레이아웃 — 2단·3단 구조 완전 정리 (0) | 2026.05.04 |
| CSS Background — clip · origin · position 완전 정리 (0) | 2026.05.04 |
| CSS display — block · inline · inline-block 완전 정리 (0) | 2026.05.04 |
| CSS box-shadow — 박스 그림자 완전 정리 (0) | 2026.05.04 |
댓글