[React] 메일 템플릿 만들기

프론트엔드 개발하다보면 메일로 HTML 코드를 보내야하는 경우가 있다. 

간단한 디자인의 경우 문제가 없는데 복잡한 디자인의 경우 깨지는 일이 빈번하다...

 

사용할 수 있는 css 속성에 제한이 있고 반응형 작업 등에도 곤란함을 느끼는 매우 귀찮은 작업이다. 

 

그래서 이번에 몇가지 보편적인 작업을 위한 방식을 정리하려고 한다. 

 

display : flex

레이아웃을 구성할 때 가장 많이 사용하는 것 중 하나가 display : flex 일 것이다. 

해당 스타일 자체는 인라인 태그로 설정해도 문제가 없다. 

 

하지만 Google Gmail에게 html 코드로 flex 속성 중 하나인 justify-content / align-item을 사용하면 

스타일이 적용되지 않는 문제를 확인했다. 

 

네이버에서의 justify-content

네이버에서는 정상적으로 작동한다. 

하지만 메일로 사용했을 때 당연히 gmail 역시 무시할 수 없기 때문에 해당 속성을 사용하는 것은 포기해야했다. 

 

margin : 0 auto 

좀 더 원시적인 (?) 이라고 하면 그렇고 편안함을 포기한 방식을 사용했다. 

margin의 auto 속성을 사용해서 가운데 정렬을 해줬다. 

네이버는 물론 구글도 문제없이 가운데 정렬이 되는 것을 확인했다. 

 

a 태그 width / height

a 태그를 block 속성으로 바꾸고 width 값을 줬는데 네이버에서는 스타일이 적용되지 않았다. 

이게 참 신기한데, 정확하게 width와 height 텍스트 위치가 뻥 뚤려있다 ㅋㅋㅋ

 

a 태그에서 max-width / min-width 등 몇가지 방법을 시도해봤지만 width가 들어가면 모두 "" 값으로 변경되었다. 

하지만 display 속성은 통해서 display 속성을 block으로 주고 부모 태그에서 width 값을 줘서 문제를 해결했다.

하지만 아직 한가지 문제가 남았다. 

width 값을 /7을 했다는 것은 한 줄에 7개씩 나열하길 원한다는 건데 그부분을 해결해야 했다. 

 

부모 태그에게 inline-block 속성을 줘서 해결했다.