HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블)

 

미디어쿼리 없이 테이블로 반응형 레이아웃을 구성이 가능하다는 걸 알고 계셨나요? 아니 그것보다 왜 그런 방법을 써야 하냐고 물으실 거 같습니다. 사실 미디어쿼리를 쓰면 되기 때문에 이 방법은 딱히 효용이 없다고 느끼실 수도 있습니다. 다만 레가시한 환경에서 반응형 구성이 필요할 때 유용한 방법이 될 수 있습니다. 미디어쿼리가 적용되지 않는 예전 Ie 브라우저에 최적화를 해야 하는 웹페이지이거나, 특히 '이메일' 템플릿을 구성하는 데 있어서 여러 클라이언트와 아웃룩 등의 독특한 랜더링 환경에서 정상적으로 웹페이지를 표시하는 데에 있어서 특히 유용할 수 있습니다.

반응형 테이블: 이메일 템플릿 제작에 유용

용도에 대해 앞서 말씀드렸는데 사실 주된 용도는 바로 이 이메일 템플릿 제작에 활용하는 것이라고 볼 수 있습니다. 이메일의 경우 css와 js 사용이 불가능한 작업 환경이 계속 이어지고 있습니다. 그럼에도 이메일은 모바일 환경에 영향을 받았고, 대부분 이메일 클라이언트들이 모바일 전용 버전으로 출시가 된 반면, 이메일 템플릿 그에 걸맞은 모던화가 이루어지고 있지 않은 실정입니다. 더군다나 아웃룩같은 경우에는 최신 버전을 쓴다고 하더라도 어떤 이유에선지 이메일 랜더링 방식은 과거의 그것을 그대로 사용하고 있는 것으로 보입니다. 그래서 레가시한 환경에 적응하면서도, 모바일에도 대응할 수 있는 방법으로서 '반응형 테이블'의 가능성이 있는 것입니다.

 

<table align="center">
  <tr>
    <td width="16" style="min-width: 16px;"></td>
    <td width="288">
      Test
    </td>
    <td width="16" style="min-width: 16px;"></td>
  </tr>
</table>

 

 

반응형 테이블의 구성 원리는 세 개의 셀을 구성하는 것으로 이루어집니다. 이 중 양쪽 셀의 너비를 고정해야 합니다. 이는 양측의 여백으로 활용될 수 있습니다. 가운데 셀의 너비 또한 지정해 주어야 합니다. 이 경우 css에서의 max-width와 같은 식으로 작동할 수 있습니다. 지정한 너비만큼 커지지만, 그 이상으로 커지지 않습니다. 양쪽 셀의 스타일에는 너비를 유지하기 위한 목적으로 min-width를 함께 삽입합니다. 하지만 이는 일부 클라이언트에서는 무시될 수 있습니다.

참고자료

Creating a Future-Proof Responsive Email Without Media Queries

The Fab Four technique to create Responsive Emails without Media Queries

Responsive Email template made easy without media queries