이메일 HTML 권장 콘텐츠 너비는?

모든 이메일 클라이언트에서 안전한 최대 콘텐츠 너비는 600px입니다.

Outlook에서 CSS Grid·Flexbox가 작동하지 않는 이유는?

Outlook은 Word 기반 렌더링 엔진을 사용해 최신 CSS를 지원하지 않습니다. Table 기반 레이아웃이 권장됩니다.

이메일 클라이언트	최소 (px)	권장 (px)	최대 (px)	비고
Gmail (웹)	600	600	640	640px 초과 시 스크롤 발생
Outlook 2016+	600	600	600	600px가 안전한 최대값
Apple Mail	600	600	자유	넓은 화면에서 유동 폭 허용
Yahoo Mail	600	600	640	600~640px 권장
Gmail App (Android/iOS)	320	375	600	기기 폭에 맞게 100% 표시
iOS Mail	320	375	600	자동 반응형 지원
Outlook App (모바일)	320	375	600	기기 폭에 맞게 표시

모든 클라이언트에서 안전한 콘텐츠 너비: 600px. 좌우 패딩 20px 적용 시 실제 콘텐츠 폭: 560px.

이메일 클라이언트마다 HTML 렌더링 방식이 달라 레이아웃이 깨질 수 있습니다. 모든 클라이언트에서 안전한 이메일 콘텐츠 최대 너비는 600px입니다. 좌우 패딩 20px씩 적용하면 실제 콘텐츠 폭은 560px가 됩니다.

Outlook은 HTML/CSS 지원이 제한적이어서 Flexbox·CSS Grid는 사용할 수 없습니다. Table 기반 레이아웃이 가장 안전합니다. 모바일 최적화를 위해 미디어 쿼리(@media)로 단일 컬럼 레이아웃으로 변환하는 것이 권장됩니다.

버튼은 최소 44px 높이를 확보해야 터치 친화적입니다. 이미지에 alt 텍스트를 추가하고 HTML 파일 크기를 102KB 이하로 유지해야 Gmail 클리핑을 방지할 수 있습니다.

Outlook에서 Flexbox가 작동하지 않는 이유는?

Outlook은 오래된 Word 렌더링 엔진을 사용해 최신 CSS를 지원하지 않습니다. Table 기반 레이아웃을 사용하세요.

이메일 HTML에서 인라인 스타일을 써야 하나요?

많은 클라이언트가 head의 style 태그를 제거합니다. 인라인 스타일(style 속성)을 사용하거나 CSS 인라이너 도구를 활용하세요.

Gmail이 이메일을 클리핑하는 기준은?

Gmail은 HTML 파일이 102KB를 초과하면 자동으로 클리핑합니다. 이미지는 외부 URL을 사용하고 코드를 최적화하세요.