좌충우돌 처음 해보는 메일 HTML 코딩 💌

들어가며..📝

메일 코딩을 하게 됐다. 메일도 코딩하는 건 상상도 못했는데, 하게 됐다 !! WOW
처음에는 색다르고 재미있었는데, 하다 보니 아주 소소한 것들(1, 2 픽셀이 왜 안맞을까, 지메일에서는 되는데 아웃룩에서는 안되네, 아웃룩 웹으로 켜면 되는데 앱으로 켜면 안되네 등) 때문에 머리를 싸매게 됐다..
평소에 편하게 쓰는데 메일 코딩에서 안되는 HTML 요소/속성과 CSS 속성이 많아서, 시간이 생각보다 오래 걸렸다. 그래도 종종 메일 코딩을 하게 될텐데 한번 해봐서 좋았고, 색다른 경험이었다! 

개요 😆

• 메일 코딩은 HTML + css로 한다. 아 CSS는 인라인으로 해야 한다 ^^ Javascript 는 못 쓴다. ㅠ 
• 다행히 html 요소에 클래스를 주고, 클래스에 css를 주면 인라인 css 바꿔주는 사이트가 있다. 내가 사용한 건 parcel ! 눈으로 바로 바로 볼 수 있어서 편했다.
• 메일 앱마다 사용할 수 있는 HTML 속성이 다 다르다.. - 그건 https://www.caniemail.com/ 에서 알아볼 수 있다.

Tips 🔖

• 평소에 편하게 사용하는 flex는 사용할 수가 없다. 레이아웃은 table로 맞춰야 한다.
  • table 레이아웃 코드를 짜주는 사이트(https://www.tablesgenerator.com/html_tables)를 사용했다. 구글에 'html table generator, maker' 이런 식으로 검색하면 다른 사이트도 나온다.
• margin (X) padding(O) : 다른 메일 서비스도 그럴 수도 있지만, 내가 경험한 바로는 네이버 메일에서는 margin도 적용되지 않는다. padding으로 해야 한다!
• 주의!! outlook 이 안되는 게 많다. 주의하고 확인을 해봐야 한다 ~ 해보니까 outlook 브라우저보다 특히 outlook app에서 안되는 게 더 많은 것 같다.
• border-radius 안 된다. 버튼이나 컨테이너에 많이 사용하는, 테두리를 둥글둥글하게 해주는 속성. 다른 메일들은 되는데, 아웃룩에서 안된다. 그래서 아웃룩에서도 동작하는 속성이 있어서 아웃룩일 때만 그걸 활용하면 된다. 이 영어 포스팅에 설명이 나와있다.
  • 아웃룩에도, 다른 메일에도 적용되는 버튼 코드를 만들어주는 사이트가 있다. https://buttons.cm/
• css reset 을 안하고 해서 1px, 2px 안맞아서 고생했다. 맨 위에서 padding, margin 등 리셋하고 시작하기
• 덧붙여서, box-sizing: border-box; 기본은 content-box인데 콘텐츠 영역 기준으로 크기를 정해서, 패딩을 주면 그만큼 크기가 더 커진다. border-box로 하면, 패딩도 포함한 크기를 지정할 수 있다. 
• 브라우저에서 다른 곳에서 받은 이메일을 열고, inspect 해서 코드를 보면 참고가 된다. 

추신..

• 메일 코딩을 html 로 하는데, 안에 데이터는 어떻게 바꾸는지 궁금했다. 그건 백엔드에서 해준다고 한다~ (내일 백엔드 분이 하시는 거 구경해보고, 포스팅할 수 있으면 해보겠다 ..ㅎㅎ)
• 생각보다 시간이 오래 걸렸다.. 하루 예상했는데 5일 걸렸다.. 여러 메일 사이트에서 확인해보고, 어디는 되고 어디는 안되고.. 다크모드일 때 곤란한 상황이 생기고, 모바일일 때도 너무 글자가 작게 보인다든지 등등... 자꾸만 문제가 생겼다. 

 

메일 코딩을 하는 분들..
모두 행복과 행운이 가득하시길... 화이팅