XHTML
XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다. XML문서로 HTML을 정의하는 W3C(World Wide Web Consortium) 표준이다.
1. 페이지의 요소가 잘 구성되었음을 보장.
모든 브라우저에서 일관되게 보인다.
XHTML을 사용하면 페이지가 접근성 표준을 보다 쉽게 준수한다.
Boiler Plate(기본 틀)
재사용 가능하며 같은형태를 띄는 코드를 보일러플레이트 코드라고 한다. 아래는 이메일 형식의 보일러플레이트이다.
<!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 boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0">
<table
align="center"
border="1"
cellpadding="0"
cellspacing="0"
width="600"
style="border-collapse: collapse"
>
<tr>
<td width="260" valign="top">Row 1</td>
</tr>
<tr>
<td valign="top">1</td>
<td valign="top" style="font-size: 0; line-height: 0" width="20"> </td>
<td valign="top">2</td>
</tr>
<tr>
<td valign="top">Row 3</td>
</tr>
</table>
</body>
</html>
이메일 HTML 작업을 할때 알아둬야할 점
- XHTML이므로 meta태그에 Content-Type을 설정해야한다. Content-Type은 해당 문서의 문자 인코딩 방식을 명시한다.
- <p> 태그나 <div>의 여백은 실제 값보다 크게보인다. <td>를 사용하자.
- <table><tr><td> 태그로 레이아웃을 구성한다.
- <style>태그는 먹지 않으므로 인라인 스타일을 사용한다.
- 태그의 속성이 있다면 스타일보다 속성을 사용하도록 한다. ex) <table width="600">
- 모든 기기 및 브라우저에서 안전하게 보이는 <table> 태그의 넓이는 600이다.
- margin 속성은 웬만하면 사용하지 않는다(초기화 시에만 사용). td 태그에 padding을 사용하는게 안전하다.
- <img>에는 display:block 값을 꼭 넣어준다. 몇몇의 웹에서 여백이 생기는 현상을 방지해준다.
- 구글은<img>태그에서 pointer-events css를 제거해버린다. 이미지 클릭이 안되게 하려면 <div> background-image로 삽입하자.
- display:flex 생각한대로 동작하지 않는다. align-items도 마찬가지. flexbox는 사용하지않는다.
- 정렬은 <td align="center>을 사용하나, td안에 <div>가 들어가야할때에는 margin: 0 auto; 로 중앙정렬 해준다.
- 중요한 정보는 이미지보다 텍스트로 넣는다. 많은 클라이언트들이 이미지를 차단하기 때문이다.
- 하지만 복잡한 도식은 구현이 안되므로 통이미지를 사용해야한다.
- <table> 내에서 colspan이나 rowspan (셀 합치기) 은 사용하지 못한다.
- 중앙정렬을 할때는 td에 align="center"를 적용하거나, div로 감싸고 align="center"을 적용한다
- 버튼은 <a> 태그로 대체한다.
- 기본 메일앱(윈도, 맥, 아이폰, 안드), 웹메일(네이버,다음,gmail), 모바일 메일앱(gmail 아이폰, 안드, 카카오, 다음, 네이버)
이정도는 기본으로 체크하자.
- html 이메일 폼에서 미디어쿼리 사용하기? 안된다.
- html 이메일 폼에서 가상선택자? 안된다. (인라인 스타일밖에 못쓴다. 가상선택자는 인라인에서 사용할수없다)
- 작업을 완료했으면 코드를 검증 해보자.https://validator.w3.org/
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
'[IT] 프로덕트 개발 > DOM, HTML, CSS - 퍼블리싱' 카테고리의 다른 글
| [CSS] IOS 100vh 스크롤 문제 (0) | 2022.07.28 |
|---|---|
| [CSS] 카카오 인앱브라우저 IOS의 경우 스타일 안먹는 문제 (0) | 2022.07.28 |
| [HTML] html5 보일러플레이트 (0) | 2022.06.29 |
| [CSS] display grid 자동으로 채우기 - repeat auto-fill (0) | 2022.06.16 |
| [HTML] 새창으로 열기 target blank와 noopener noreferer (0) | 2022.06.10 |