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

이 전 게시글 내용으로는 이메일 코딩 하는데 부족해서 추가로 작성하게 됐습니다.

 

이메일을 홈페이지 처럼 디테일하게 디자인/코딩 하려고 하면

모바일 대응형으로 작업하기 정말 어려워요.😥

그래서 최대한 간단하게 1, 2단 그리드로 작업하길 추천합니다.

 

우선, 이메일은 테이블 태그로 작업해야 혹시나 콘텐츠 가로값이 뷰포트를 넘어가도

콘텐츠가 잘리지 않고 뷰포트에 꾸역꾸역 맞춰져서 내용을 볼 수 있어요.

 

그리고 미디어쿼리(@media (max-width: xxxpx) {}) 이게 먹히지 않는 경우가 있으니

PC나 모바일, 어디서 봐도 문제가 없게 작업해야되요.

즉, 미디어쿼리 없이 PC/모바일에서 둘 다 문제 없이 잘 보이게 작업을 해야한다는거.

 

그러기 위해서 폰트 사이즈가 제일 문제였는데...

vw단위를 사용하면 PC에서 문제가 되서 em(부모 폰트를 기준으로 비율로 크기를 정함)을 선택.

그런데 브라우저나 이메일 앱에 따라서 기본적으로 최상단에 설정된 폰트 사이즈가 달라서 어떤데는

폰트가 너무 작고, 어떤데는 폰트가 너무 큰 ㅂㄷㅂㄷ한 상황에 봉착...

그래서 낸 해결책! 폰트가 들어가는 태그에는 항상 부모 태그에 텍스트 기본값을 넣어줬어요.

 

<tr>
      <td class="text-parent" style="font-size:12px;">
          <p class="text-child" style="font-size: 1.25em">텍스트 입니다.</p>
      </td>
  </tr>

 

 이렇게 하면 부모에 폰트 사이즈가 고정적으로 들어가서 원하는 폰트 사이즈를 어디서도 표현할 수 있습니다.

 

새로운 문제 발생하면 또 추가 글 올릴께요!