> For the complete documentation index, see [llms.txt](https://docs.totlelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.totlelab.com/personal/sendingoptions/viewhtmlsource.md).

# HTML 소스 보기

아웃룩에서 HTML 소스를 보고 수정해 메일을 발송할 수 있습니다.

{% hint style="info" %}
토틀의 '**HTML 소스 보기**'를 사용하면, 아웃룩에서 HTML 이메일을 수정하고 편집할 수 있습니다. **브라우저**와 **디바이스**에서 이메일이 어떻게 보이는지 쉽게 확인할 수 있습니다.
{% endhint %}

## HTML 이메일 아웃룩에서 발송하기

* 아웃룩에서 **새 전자 메일**을 클릭합니다.
* 메시지 탭 내 위치한 토틀 섹션 내 **보기** 아이콘을 클릭합니다.
* 드롭다운 메뉴에서 **HTML 소스 보기** 아이콘을 클릭합니다.

<div align="center"><figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FlUdMZoZPzhigORn91bYN%2Fimage.png?alt=media&amp;token=bc990611-919a-4776-ab75-cf8472f1a7ff" alt="" width="563"><figcaption></figcaption></figure></div>

* 클릭과 동시에 나타나는 기존의 코드를 **모두 선택(Ctrl + A)한 후** 모두 **삭제**합니다.
* 아웃룩에서 전송하려고 하는 이메일의 **HTML 코드를 전체 복사**합니다.
* 복사한 **HTML 코드**를 토틀의 HTML 보기 창에 **붙여넣기** 합니다.
* HTML 코드를 붙여 넣기 한 후 **HTML 소스 보기** 아이콘을 **한번 더 클릭**합니다.
* HTML 소스 보기를 클릭하면  **HTML 코드 변경 및 적용 확인 팝업창**이 나타납니다.
* 이 팝업창에서 **예(Y)를 클릭**하면 **HTML 코드가 적용된 이메일을 확인**할 수 있습니다.

<div align="center"><figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FVHhWeUlKTqMdubA8GT8Y%2FHTML%20%EB%B3%80%EA%B2%BD%20%ED%8C%9D%EC%97%85.png?alt=media&amp;token=b15e4fa1-b1d5-40c6-bb41-bf6ca162eae8" alt=""><figcaption></figcaption></figure></div>

### 소스 검색 및 나가기

<div align="center"><figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FTf14jN0qVZSCkzk1TJN4%2F%EC%B0%BE%EA%B8%B0%20%EB%8B%AB%EA%B8%B0.png?alt=media&amp;token=af88f4ec-b74e-4258-85e8-e339afa7d079" alt="" width="563"><figcaption></figcaption></figure></div>

* HTML 편집 창 내에서 **찾기** 버튼을 클릭하면 원하는 소스를 손쉽게 검색할 수 있습니다.
* **닫기**  버튼을 클릭하면 HTML 편집을 취소하고 아웃룩의 기본 창으로 돌아갈 수 있습니다.

## HTML 이메일 브라우저에서 보기

<div align="center"><figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FY1jVABRXxdh22VTNOAAH%2F%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C%20%EB%B3%B4%EA%B8%B0.png?alt=media&amp;token=904066b9-fb3a-4b8b-8a96-396c913a946e" alt=""><figcaption></figcaption></figure></div>

* 메시지 탭 내 **보기** 아이콘을 클릭합니다.
* 드롭다운 메뉴에서 **브라우저에서 보기**를 클릭합니다.
* 브라우저에서 보기를 클릭하면 브라우저에서 HTML 파일이 어떻게 보이는지 아웃룩 창에서 바로 확인할 수 있습니다.

{% hint style="info" %}
**브라우저에서 보기** 기능을 활용하기 위해서는 **Edge WebView2 Runtime** 프로그램이 설치되어 있어야 합니다.\
**Windows 7** 및 **Windows 10**을 업데이트하지 않은 사용자 분들은 상기 프로그램이 설치되어 있지 않은 경우가 있습니다. 이 경우 위 화면과 같이 팝업창의 안내대로 [**Edge WebView 2 Runtime 프로그램을 다운로드 받아 설치를 완료**](https://developer.microsoft.com/ko-kr/microsoft-edge/webview2/#download-section)해주세요.
{% endhint %}

## HTML 이메일 모바일에서 보기

<div align="center"><figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FLQawXqAtn9bSwyKogZUC%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C%20%EB%B3%B4%EA%B8%B0.png?alt=media&amp;token=5456963a-9852-44da-88d2-ce1f8b17c8fe" alt=""><figcaption></figcaption></figure></div>

* 메시지 탭 내 **보기** 아이콘을 클릭합니다.
* 드롭다운 메뉴에서 **모바일에서 보기**를 클릭합니다.
* **모바일에서 보기**를 클릭하면 이메일이 다양한 모바일 및 태블릿에서 어떻게 표시 되는지 손쉽게 확인하실 수 있습니다.

<figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2F1FchAGlcUwiHiQnhsHkc%2Fimage.png?alt=media&amp;token=5e150bb8-30c3-4fe4-8533-ff3c1a2360c0" alt="" width="245"><figcaption></figcaption></figure>

* 팝업 창 상단 우측에 위치한 **화면 회전** 버튼을 **클릭**하면 모바일 및 태블릿 **회전 시 보여지는 이메일 메시지를 미리 확인**할 수 있습니다.

<figure><img src="https://2586780503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3udYtfIsLrdV0wI11kFm%2Fuploads%2FCWxxYpGdKpZVrstaRqGg%2Fimage.png?alt=media&amp;token=ac04a77c-2051-48f1-948c-2148724a37b0" alt=""><figcaption></figcaption></figure>