log weekly february 2024 email html

table만으로 Email html 만들기

2024년 2월 16일 금요일

# Today I Learned

## 날짜

2024년 2월 16일 금요일

## 내용

### Email Template를 깨달은 남자

난 더이상 Email에 담을 HTML을 만드는 게 두렵지 않다. 깨달아버렸기 때문이다. 2가지 과정에서 깨달음이 있었다.

### Div가 아닌 Table

이메일 서버가 HTML을 출력할 때 의도하지 않게 해석하는 경우가 많다. <head> 나 <body>를 읽지 않는 경우도 많고 <div>를 제대로 처리하지 않아 padding이나 margin이 엉망이 되기도 한다. 검색해보면 가장 많이 나오는 말은 <table>, <tr>, <td> 태그를 사용하라는 것.

이 태그는 테이블을 만드는데 사용되는데, tr은 table row의 약자로 행을 의미하고 td는 table data로 행 내에 들어갈 정보를 의미한다. 사실 가로(열)로 이해해도 무방하다.

  • 테이블로 나누는 과정(장문, 그림판주의)

    1. 가장 큰 테이블로 나누기

      1

      위 사진은 메일에 담겨야 할 HTML이다. 전체 body를 테이블로 구성해야한다. 3x3 테이블로 나누었다.

      패딩 패딩 패딩
      패딩 흰색 box 패딩
      패딩 footer 패딩

      이렇게 나눌 수 있다. 그림으로 보면 아래와 같다.

      2

    2. 가운데 있는 흰색 box도, 밑에 footer도 table로 구성해야한다. box는 사진과 글이 나타날 곳으로 나눌 수 있다. 아래 회색 영역에 있는 footer는 위아래로 padding이 있기 떄문이다.

      3

      가운데 흰색박스영역은 파란색 선을 기준으로 위,아래 한칸씩 있는 테이블이 되었다. 아래 fotter부분은 실제 글자 위치와 무관하게 별이 그려져 있는 부분에 내용이 들어갈 것이다. 따라서 상하좌우 패딩이 있기 떄문에 3x3 테이블로 만들었다. 반면 파란색 테이블은 패딩이 없다. 빨간색 테이블의 패딩과 헷갈리지 말자. 표로 표현하면 다음과 같다.

      패딩 패딩 패딩
      패딩 2x1 테이블 패딩
      패딩 3x3 테이블 패딩

    3. 사진은 저 칸을 꽉 채우면 된다. 하지만 아래 글이 나타날 부분은 꽤나 복잡하다. 가운데 나열하는 요소까지 생각하면 7곳에 글자가 구분되서 나타난다. 위아래 패딩을 생각하면 꽤 많은 행을 가진 테이블이 생성되야 한다. 열은 3개면 충분하다. 좌우패딩만 있으면 되니까.

      4

      손가락이 아닌 달을 보자.. 이미지 밑에 나타나는 흰색 부분을 확대한 모습이다. 똑같이 좌우 패딩이 필요하므로 3열이 필요하다. 위아래 패딩, 입력될 문장사이의 간격 하나하나를 행으로 줘야하므로 15개의 행이 필요하다.

      가운데 Activation 부분은 또 내부에 패딩이 들어가야하므로 table을 내부에 하나 더 만들어야 한다. 그럼 전체적으로 봤을때, 5개의 테이블이 생성된다.

      1. 전체에서 흰색부분을 가운데에 두는 가장 큰 테이블(빨간색(1))
      2. 1번에서 만든 테이블안에 이미지와 글 부분을 나누는 테이블(파란색)
      3. 1번에서 만든 테이블안에 footer를 표시하기 위한 테이블(초록색)
      4. 2번에서 만든 테이블안에 글을 간격에 맞춰 출력하기 위한 테이블(빨간색(2))
      5. 4번에서 만든 테이블안에 나열된 글을 표시하기위한 테이블(그림없음)

      마지막으로, 이 전체를 감싸는 테이블을 하나 추가하여 총 6개를 만들면 된다. 전체를 감싸는 이유는 이전 버전의 outlook 플랫폼 등은 html 태그의 body를 인식하지 않기 때문이다.. body역할을 해줄 예비 테이블을 생성하는 것.

### 테이블 중첩

테이블을 중첩할 떄는 항상 <td> 내부에서 생성해야 한다. 예를 들어 위아래만 패딩이 있는 4x1 테이블을 아래와 같이 작성한다.

1
2
3
4
5
6

  <table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </table>

좌우 패딩이 없기 떄문에, 각 <tr>에는 <td>가 1개만 필요하다. 굳이 <td> 태그를 입력해야 할 이유가 있을까? 두번째 <tr> 태그에는 이미지를 넣으면 되고 세번쨰 <tr> 태그에는 위 4번에서 만든, 글을 작성하기 위한 테이블을 생성하여 넣으면 된다. 첫번째, 네번째 <tr>은 패딩을 위해 만든 행이므로 내용을 넣지 않고 height만 설정한다.

1
2
3
4
5
6
7
8
9

  <table>
    <tr height="20px"></tr> 
    <tr background-image: url('...')>
    </tr>
    <tr>
      <table>(중략)</table>
    </tr>
    <tr height="15px"></tr>
  </table>

위에는 20px만큼, 아래는 15px만큼 패딩을 넣어주었다. 완성일까?

내가 처음에 이렇게 작성하였는데, Gmail web에선 잘 출력된 반면 Outlook이나 다른 플랫폼에선 엉망으로 짤려서 알아볼 수가 없었다. 내용을 넣을떄는 항상 <td> 태그를 넣어야 한다. 내용이 없는 셀에는 물론 넣지 않아도 된다. 하지만 헷갈리니 우선 넣고 나중에 제거하는 게 편하다. 내부에 중첩되는 테이블이 3x3 테이블이라고 가정하고 작성해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

  <table>
    <tr height="20px">
      <td></td>
    </tr>
    <tr>
      <td background-image: url('...')>
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td>(글의 좌측 패딩)</td>
            <td>글</td>
            <td>(글의 우측 패딩)</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr height="15px">
      <td></td>
    </tr>
  </table>

이렇게 작성된다. 중첩된 table에서 첫번째 행(<tr>)과 3번째 행(<tr>)에는 내용이 들어가지 않으므로 <td> 는 지워줘도 무방하다. 글의 좌우패딩이 될 <td>들은 지우지 않고 width를 설정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  <table>
    <tr height="20px">
    </tr>
    <tr>
      <td background-image: url('...')>
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr height="10px">
          </tr>
          <tr>
            <td width="22px"></td>
            <td>글</td>
            <td width="22px"></td>
          </tr>
          <tr height="10px">
          </tr>
        </table>
      </td>
    </tr>
    <tr height="15px">
      <td></td>
    </tr>
  </table>

## 회고

꺠달았지만 재밌짆않다. 왜 outlook은 혼자 튈려고 할까?

CATALOG
    weekly