HTML Academy · 강의

표 기반 레이아웃 방식

HTML 이메일에서 div 대신 표를 사용하는 이유 이해하기

표 기반 레이아웃 방식은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이메일에 표를 사용하는 이유

이메일 클라이언트, 특히 Microsoft Word의 렌더링 엔진을 사용하는 Windows용 Outlook은 flexbox, grid, 심지어 안정적인 블록 수준 레이아웃도 지원하지 않습니다. 표는 모든 주요 메일 클라이언트에서 일관되게 렌더링되는 유일한 구조 요소입니다.

단일 외부 표

모든 반응형 이메일은 이메일 본문 역할을 하는 너비 100%의 외부 <table>로 시작하고, 실제 콘텐츠를 담는 고정 너비의 내부 표(일반적으로 600px)가 이어집니다. 이 2단계 패턴은 거의 모든 상용 템플릿의 기반입니다.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content goes here</td></tr>
      </table>
    </td>
  </tr>
</table>

필수 표 속성

모든 표에 항상 cellpadding="0" cellspacing="0" border="0"를 포함하십시오. 이 속성이 없으면 Outlook이 예상하지 못한 간격을 삽입합니다. role="presentation"을 추가하면 레이아웃 표는 데이터 표가 아니므로 스크린 리더가 표의 의미를 건너뛰도록 할 수 있습니다.

열을 위한 중첩 표

여러 열을 만들려면 콘텐츠 행 안에 두 개의 <td> 셀이 있는 표를 중첩하십시오. 각 셀이 하나의 열을 담습니다. div+float 방식은 피하십시오. Outlook은 float를 무시하고 열을 세로로 쌓기 때문에 디자인이 깨집니다.

600px가 표준 너비인 이유

사실상 표준인 데스크톱 미리 보기 창의 너비는 약 600px입니다. 이 너비를 기준으로 설계하면 Outlook, Gmail 데스크톱, Apple Mail, Yahoo, Thunderbird에서 가로로 스크롤하지 않아도 이메일을 편안하게 볼 수 있습니다.

미디어 쿼리로 모바일에서 열 쌓기

작은 화면에서는 미디어 쿼리로 내부 표의 셀을 대상으로 지정하고 너비를 100%, display를 block으로 설정하여 열이 세로로 쌓이게 하십시오. iOS Mail과 Gmail Android는 미디어 쿼리를 따르지만 Outlook 365 데스크톱은 이를 무시하고 600px 데스크톱 레이아웃을 유지합니다.

@media (max-width: 600px) {
  .col {
    display: block !important;
    width: 100% !important;
  }
}

셀 수준 배경

배경색과 배경 이미지는 div가 아니라 <td> 셀에 적용해야 합니다. Outlook은 td의 bgcolor 속성을 안정적으로 지원하지만, div의 CSS background-color는 클라이언트에 따라 제거되거나 완전히 무시될 수 있습니다.

Outlook 배경을 위한 VML

Outlook에서 배경 이미지를 사용하려면 VML이 필요합니다. 최신 CSS background-image를 조건부  주석으로 감싸고 인라인 v:rect 대체 처리를 추가하십시오. 그러면 Outlook은 이미지를 렌더링하고 다른 모든 클라이언트는 CSS를 사용합니다.

내부 간격에 cellpadding 사용하기

내부 여백에는 cellpadding 속성과 여백을 지정한 단일 <td>를 사용하십시오. 표 셀의 margin은 Outlook에서 안정적으로 작동하지 않지만 td의 padding은 모든 클라이언트에서 작동합니다. div 없이 ‘카드’ 구성 요소를 만들 때 같은 td에 bgcolor와 padding을 함께 지정하십시오.

접근성

모든 레이아웃 표에 role="presentation"을 추가하여 스크린 리더가 ‘행, 2개 중 1번째 열’이라고 읽지 않도록 하십시오. 또한 모든 이미지에 대체 텍스트를 넣고, 모든 콘텐츠에는 이미지가 아닌 실제 텍스트를 사용하며, 명확한 계층 구조의 제목 순서를 지키십시오.

지식 확인

이메일 레이아웃에 CSS flexbox를 사용하는 div가 아니라 표를 사용하는 이유는 무엇인가요?

요약

HTML 이메일 레이아웃은 cellpadding/cellspacing/border를 0으로 설정하고 role="presentation"을 지정한 중첩 표를 사용합니다. 너비 100%의 외부 표가 600px 내부 표를 가운데에 배치하고, 중첩된 td 셀이 열을 구성하며 미디어 쿼리로 모바일에서 열을 쌓을 수 있습니다. flexbox와 grid는 피하고 td에는 bgcolor를 사용하며 Outlook 배경에는 VML 대체 처리를 추가하십시오.

자주 묻는 질문