HTML 이메일에서 일부 스타일이 삭제되는 이유

외부 스타일시트 사용 불가
- <style> 태그는 대부분의 메일 클라이언트에서 제대로 작동하지 않음
- 해결 방법: <style> 태그 대신 inline-style을 사용
일부 CSS 속성 미지원
- max-width, min-width, flex, flex-wrap, calc() 같은 속성은 일부 이메일 클라이언트(특히 Outlook)에서 지원되지 않음
- 해결 방법: 고정된 width 값을 사용하고 table 기반 레이아웃을 고려
폰트 관련 문제
- font-family:Pretendard Variable; → Gmail, Outlook 등에서 폰트가 삭제될 가능성이 있음
- 해결 방법: Arial, Helvetica, sans-serif 같은 기본 폰트로 대체
중복된 font-family 속성
- <p> 태그의 font-family 지정이 잘못됨
- 예제:
  
  <p style="font-size: 20px; font-weight: 500; color: #848484; font-family: Arial, Helvetica, sans-serif;">
  
  → 기존 코드에는 font-family 속성이 여러 번 지정됨
img 태그 스타일 손실
- <img> 태그의 width, height, display: block; 등이 없을 경우 Outlook 등에서 제대로 정렬되지 않음
- 해결 방법:
  
  <img src="logo.png" alt="logo" style="display: block; width: 100px; height: auto; margin: 0 auto;">
div 내부의 padding 문제
- 일부 이메일 클라이언트는 padding을 무시
- 해결 방법: <table> 기반 레이아웃 사용
색상 관련 문제
- color: #848484; 같은 색상이 일부 메일 클라이언트에서 변경될 가능성 있음
- 해결 방법: HEX 코드 대신 RGB 값 사용 (color: rgb(132, 132, 132);)

수정이 필요한 스타일 목록

✅ max-width, min-width, calc() → 테이블 기반 레이아웃 고려
✅ font-family: Pretendard Variable; → Arial, Helvetica, sans-serif로 변경
✅ img 태그에 display: block; width 지정
✅ flex, flex-wrap → 테이블 기반으로 변경 고려