미미 공부/취미방

탬플릿 없이 반응형 이메일 코딩 2/2부 본문

Programming

탬플릿 없이 반응형 이메일 코딩 2/2부

mionager 2021. 11. 27. 01:27

일반적으로 html에 들어가는 코드랑 비교하면서
코드에 대한 설명을 시작하겠어용.
(회색 마크는 일반적으로 쓰는 코드입니다!)
.
.

1 DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

html 유형을 알려주려고 적는 건데 이거를 토대로 규격검사 등을 하기 때문에 우리가 이메일 코딩에 사용할 XHTML을 잘 명시해야 검사하고 렌더링하는데 도움이 되겠죠?
.
.

2 HTML 태그
<html xmlns="http://www.w3.org/1999/xhtml"> </html>
<html lang="en">
.
.

3 HEAD 태그
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">

Head에서는 title, viewport 관련 코드는 다 똑같은데 xhtml로 doctype을 설정해서 content-type을 포함해 주야 한데요.
.
.

4 Body 태그
어떤 이메일 플랫폼은 <body>를 지워버리니까 <table>태그로 전체 구조를 한 번 감싸줘야지 안전해요.
이메일 플랫폼 해상도가 다 달라서 가로 넓이는 600px ~ 700px정도로 대부분 잡고 800px은 넘기지 않는게 좋다고 해요.
.
.

5 <style>
이전 글에서도 말했듯이 내부 스타일이랑 인라인 스타일 둘 다 작성해 주세요! 내부 스타일로 작성하면 인라인으로 자동 변경 해주는 라이브러리가 많은 것 같으니 구조가 복잡하거나 코드가 길면 한 번 사용해 보세요.
(저는 아직 사용해 보지 않았네요ㅎ)
.
.

6 table, tr, td
이제 테이블 태그 관련해서 공부하러 가시면 됩니다…^^ 정말 발암태그입니다 …ㅎ

테이블 태그의 기본 스타일 속성을 초기화 하고 시작하시는 걸 추천드리는데 보더는 남겨두길 추천해요! 그래야 테이블이 어떻게 나눠져 있고, 주고싶은 스타일이 왜 안 먹히는지 잘 알 수 있어요.

Table, tr, td에 스타일 말고 속성 값을 줘서 스타일을 바꿔주기도 하는데 저는 이게 더 헷갈려서 그냥 스타일로 줬습니다.
속성이라 하면 style=“뭐시기” 안에 넣은 스타일 말고
<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”></table>
Border에 “0” 선 없음 / “1” 선 있음
Cellpadding 셀(td) 내부 여백
Cellspacing 셀(td) 사이 너비
이런식으로 태그에 속성명=“무엇” 이렇게 직접 스타일을 주는거에용.
.
.

7 개별 속성 사용하기
td {padding-right: 5px; padding-top: 10px; padding-bottom: 5px; padding-left: 10px}
.
.

8 이미지 사용하기
svg 포멧은 gmail에서 안 나오니 png 사용을 추천해요.

이미지 경로는 절대경로를 사용하시고 용량은 항상 너무 크지 않게!
(www.뭐시기.com/image/picture.png) -이게 절대경로져

이미지를 넣는 경우에 대부분 한 줄을 다 쓰지만

이렇게 가로 100%

간혹 이미지랑 텍스트를 같은 줄에 넣게될 경우에는
“여기에 이미지” 바로 옆에 텍스트 - 이런 레이아웃
이미지 태그 말고 background-image로 넣어주겔 추천해요!! gmail에서는 <img>에 width만 주면 높이를 꽉 채우더라구요. 그래서 height값을 주면 내가 원하는 가로값이 안되고, 둘 다 주면 찌구러지고! 그러니까 배경에 넣어주는걸로..^^

휴... 이정도가 기본적인 이메일 코딩입니다! 짜잘하게 더 신경쓸게 많은데 이정도면 기본은 할 거예요...이모지를 사용하고 싶으면 또 뭘 해야되는데 그건 언젠가 다음번에...

'Programming' 카테고리의 다른 글

[패스트캠퍼스] 내일배움카드로 시작하는 React&Redux 프로그래밍 시작!  (0) 2022.06.18
탬플릿 없이 반응형 이메일 코딩 2.1/2  (0) 2022.06.16
탬플릿 없이 반응형 이메일 코딩 1/2부  (0) 2021.11.27
[노마드 코더] Component Life Cycle #3.2  (0) 2021.10.23
[노마드 코더] All you need to know about State #3.1  (0) 2021.10.20
'Programming' Related Articles more
Comments