HTML 및 CSS: 이메일 코딩 개념

게시 됨: 2017-08-10

코딩의 세계에 뛰어드는 것은 이전에 해본 적이 없다면 벅차게 보일 수 있습니다. 특히 이메일 코딩에는 고유한 규칙이 있습니다. 코딩을 처음 접하는 경우 이메일용 HTML 및 CSS를 바로 살펴보기 전에 고려해야 할 몇 가지 사항이 있습니다.

이메일을 코딩해야 하나요?

코딩 경험이 없는 경우 이메일을 처음부터 코딩하는 것은 실용적인 솔루션이 아닐 수 있으며 반드시 필요한 것도 아닙니다. VerticalResponse는 모바일 친화적인 다양한 템플릿을 제공하고 사용하기 쉬운 편집기를 제공하므로 바로 사용할 수 있는 템플릿을 자신의 콘텐츠로 사용자 지정할 수 있습니다.

HTML을 사용하거나 배우는 경험과 어느 정도의 편안함이 있다면 사용자 정의 이메일 템플릿을 코딩하는 것이 좋은 옵션이 될 수 있습니다. 웹 페이지를 코딩할 때와 마찬가지로 여전히 브라우저 및 장치 동작을 고려해야 합니다. 또한 Gmail, Yahoo, Outlook 등과 같은 수십 가지 이메일 클라이언트의 고유한 스타일 기본값을 고려하십시오. HTML로 웹 페이지를 코딩하고 외부 CSS 스타일 시트를 적용하는 데 익숙하다면 이러한 이메일 클라이언트 기본값으로 스타일을 덮어쓰지 않도록 CSS 내부 및 인라인 작업에 익숙해져야 합니다.

알아두면 좋은 어휘

코딩을 처음 접하는 경우 HTML 및 CSS에 대해 알아야 할 사항은 다음과 같습니다.

HTML 은 콘텐츠를 구성하고 설명하는 데 사용할 언어입니다. HTML은 Hypertext Markup Language의 약자입니다. HTML로 코딩할 때 웹 브라우저에 웹 페이지에 이미지 및 단어와 같은 정보를 표시하는 방법을 알려주는 태그로 콘텐츠를 마크업합니다.

CSS 는 콘텐츠의 표현에 영향을 주는 언어입니다. CSS를 사용하여 HTML 요소에 스타일을 지정할 수 있습니다. CSS는 Cascading Style Sheet의 약자입니다. cascade라는 단어는 스타일 선언 또는 규칙이 나타나는 순서를 따르기 때문에 중요합니다. 동일한 요소에 대해 두 가지 선언을 하는 경우 후자가 앞에 오는 것을 덮어쓰므로 후자가 적용됩니다.

CSS를 HTML에 연결하는 방법은 다음과 같습니다.

외부 CSS: HTML 파일 내에서 참조되는 외부 스타일시트(일반적으로 style.css라는 파일)를 사용합니다. 이것은 100페이지가 넘는 100개의 공통 요소가 있는 경우 단일 CSS 선언으로 모든 요소를 한 번에 변경할 수 있기 때문에 웹사이트에 유용합니다.

내장 CSS라고도 하는 내부 CSS: HTML 파일 상단의 <style> 태그 내에 CSS 코드를 포함합니다. 이메일을 코딩할 때 공통 요소에 적용되는 일반 스타일을 할당하는 데 유용할 수 있습니다. 그러나 이 방법이 이메일에서 항상 지원되는 것은 아닙니다.

인라인 CSS: HTML 코드 내에서 바로 단일 HTML 요소에 CSS 코드를 첨부합니다. 이메일 코딩에서 이 방법은 브라우저 및 이메일 클라이언트 기본값이 특정 스타일을 덮어쓰지 않도록 합니다.

CSS를 외부 또는 내부적으로 설정하는 데 익숙하다면 그런 방식으로 빌드한 다음 PutsMail의 인라인 도구와 같은 인라인 도구를 사용하여 스타일을 인라인 CSS로 변환할 수 있습니다.

HTML과 CSS의 관계

HTML과 CSS가 어떻게 관련되어 있고 CSS를 HTML에서 분리하여 HTML 프레젠테이션을 자유롭게 할 수 있는지 더 잘 이해하려면 놀랍고 유명한 웹사이트 CSS Zen Garden으로 이동하십시오. 여기에서 완전히 다른 CSS로 동일한 HTML 마크업을 볼 수 있습니다 , 저명한 디자이너가 코딩했습니다.

이메일 코딩에 접근

이메일을 처음부터 코딩할 때는 가능한 한 단순하게 유지하십시오. TextWrangler, 메모장 또는 Sublime과 같은 일반 텍스트 편집기를 사용하고 Dreamweaver와 같은 시각적 편집기는 코드에 불필요한 항목을 추가할 수 있으므로 멀리하십시오.

레이아웃의 경우 모바일 우선 접근 방식을 시도해 보세요. 이것은 작은 화면에 맞게 디자인하고 작업하는 것을 의미합니다. 모바일 보기가 지속적으로 증가함에 따라 휴대전화와 태블릿에서 이메일이 잘 보이도록 하는 것이 그 어느 때보다 중요합니다. 데스크탑에서만 보기 좋은 복잡한 디자인을 만들 이유가 없습니다. 가장 작은 장치에 맞게 메시지와 디자인을 단순하게 유지하는 것도 코딩하기 쉽고 모든 장치의 사용자가 액세스할 수 있으며 독자의 주의를 주요 클릭 유도문안으로 유지합니다.

레이아웃과 코딩이 완료되면 Litmus 또는 HTML 편집기용 VerticalResponse의 받은 편지함 미리보기와 같은 도구를 사용하여 다양한 브라우저와 이메일 클라이언트에서 이메일이 어떻게 보이는지 미리 볼 수 있으므로 보내기를 누르기 전에 문제를 해결할 수 있습니다.

학습을 시작하는 곳

이메일 코딩 방법에 대해 자세히 배울 수 있는 온라인 자습서가 많이 있습니다. 이메일 코딩에 뛰어드는 한 가지 좋은 방법은 마음에 드는 간단한 템플릿을 찾아 코드를 검토하는 데 시간을 할애하는 것입니다. 먼저 <body>, <head> 및 <div>와 같은 기본 태그에 익숙해지고 <div class=”half-column”>과 같이 태그가 ID 또는 클래스로 추가로 정의되는 경우가 있습니다. 품질 HTML 템플릿의 이름은 명확하고 논리적이므로 CSS에 나타날 때 무슨 일이 일어나고 있는지 더 쉽게 알 수 있습니다.

단계별 수업을 할 준비가 되었다면 최근 자습서(지난 1년 이내)를 찾으십시오. 코딩에 대한 접근 방식은 지속적으로 재고되고 있습니다. 예를 들어, 지난 몇 년 동안 인기를 얻은 모바일 친화적인 방법은 유동적/혼성 방식입니다. Envato Tuts+의 이 유동적/하이브리드 튜토리얼은 이미 HTML에 대해 어느 정도 이해하고 있는 사람들에게 좋습니다. 초보자를 위해 Lynda.com은 다양한 이메일 관련 코딩 과정을 제공합니다. 좋은 과정은 코딩 연습을 안내하고 참조로 사용할 수 있는 다운로드 가능한 예제 프로젝트 파일을 제공합니다.

더 많은 고객에게 도달하는 시간 단축

지금 수직 응답을 시도하십시오

(무료입니다!)

편집자 주: 이 블로그 게시물은 원래 2016년 3월에 게시되었으며 정확성과 관련성을 위해 수정 및 업데이트되었습니다.