마지막 업데이트 날짜: 2025년 10월 9일
사용자 지정 코딩된 마케팅 이메일을 만든 경우 위치 또는 간격 문제와 같이 이메일이 Outlook에서 렌더링되는 방식에 차이가 있을 수 있습니다.
간격 문제 해결
Outlook에서 이미지 주위의 간격을 조정하는 방법에는 hspace 또는 vspace 사용과 표 사용의 두 가지가 있습니다.
hspace 및 vspace 사용
HTML 속성 vspace는 세로 공간을 정의하며 이미지의 위쪽과 아래쪽에 동일한 간격을 추가합니다. hspace 속성은 가로 공간을 정의하며 이미지의 오른쪽과 왼쪽에 동일한 간격을 추가합니다.
- HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
- 사용자 지정 코딩 템플릿을 사용하여 초안 작성된 이메일의 이름을 클릭합니다.
- 이메일 편집기에서 편집하려는 모듈을 클릭합니다.
- 서식 있는 텍스트 도구 모음에서 고급 드롭다운 메뉴를 클릭하고 소스 코드를 선택합니다.
- 대화 상자에서 이미지 코드 끝에
hspace="10" vspace="10"을 추가합니다.10을 원하는 간격으로 바꿉니다.
표 사용
3열 표를 사용하여 이미지, 간격 및 텍스트를 균일하게 포함할 수 있습니다.
- HubSpot 계정에서 마케팅 > 이메일로 이동합니다.
- 사용자 지정 코딩 템플릿을 사용하여 초안 작성된 이메일의 이름을 클릭합니다.
- 이메일 편집기에서 편집하려는 모듈을 클릭합니다.
- 서식 있는 텍스트 도구 모음에서 삽입 드롭다운 메뉴를 클릭하고 표를 선택한 다음 3x1 표를 만듭니다.
-
서식 있는 텍스트 편집기 도구 모음에서 고급 드롭다운 메뉴를 클릭하고 소스 코드를 선택합니다.
- 대화 상자에서 빈 셀의 너비(예:
<td width="10">)를추가하여 이미지와 텍스트 사이의 간격을 설정합니다. - 지정하지 않으면 Outlook에서 자체 스타일을 추가하므로 글꼴 모음, 크기 및 색상과 줄 높이를 설정합니다.
예기치 않은 가로줄 문제 해결
일부 Outlook 버전에서 알려진 문제로 인해 이메일의 섹션 사이에 가로줄이 나타날 수 있습니다. 이 문제가 발생하면 다음 단계를 시도해 보세요:- 이메일의 배경색을 본문 색상과 동일하게 설정합니다.
- 콘텐츠의 글꼴 크기와 줄 높이를 짝수가 되도록 업데이트합니다.
- 이메일 템플릿의 헤드 섹션에다음 CSS 스타일 을추가합니다:
ms-text-size-adjust: none; mso-line-height-rule: exactly;
