[Django] 이메일 전송 시 css 적용, inlinecss

회원가입 시 이메일 인증

[Django] 회원가입 시 이메일 인증, SMTP

과거 포스팅에서 이메일을 통해 회원가입 인증하는 과정을 알아보았습니다. 기본적으로 이메일을 보내는 과정은 위 링크의 상단부에 자세히 나와있으므로 참고해주시기 바랍니다.

이번 시간에는 이메일에 css 를 적용해서 간단한 디자인을 해보도록 하겠습니다.

먼저 메일을 보내는 로직이 있는 views 입니다. 현재 사용자가 title, email, message 를 입력하면 이 내용을 관리자의 메일로 발송하게 됩니다.

# views.py

def contact(request):
    if request.method == "POST":
        title = request.POST["title"]
        email = request.POST["email"]
        message = request.POST["message"]

        emailContent = render_to_string('core/email.html',{
            "title": title,
            "email": email,
            "message": message,
        })

        emailAdress = "rkdalstjd9@naver.com"
        
        emailObject = EmailMessage(title, emailContent, to=[emailAdress])
        emailObject.content_subtype = "html"

        result = emailObject.send()

        
        if result == 1:
            messages.info(request, "성공적으로 접수되었습니다.")
        else 
            messages.info(request, "접수에 실패하였습니다.")

        return redirect('core:contact')
    else: 
        return render(request, 'core/contact.html')

 

다음으로는 contact 를 연결해주는 urls 입니다.

# core/views.py

from django.urls import path
from . import views

app_name = "core"

urlpatterns = [
		# 생략		
    path('contact/', views.contact, name="contact"), 
]

 

마지막으로 사용자가 입력하는 폼이 있는 contact.html 입니다.

<!-- contact.html -->

<div class="inputbox_container">
    <form id="inputbox" method="POST" action="">
        {% csrf_token %}
        <label for="title_input">Title</label>
        <input id="title_input" class="input_item" type="text" name= "title">
        <label for="email_input">E-mail / Phone number</label>
        <input id="email_input" class="input_item" type="text" name="email">
        <label data-aos="fade-up"  for="message_input">Messages</label>
        <textarea id="message_input" class="input_item" type="text" name="message"></textarea>
        <button class="reset-button" id="submit_btn" type="submit">SEND</button>
    </form>
</div>

 

마지막으로 email 을 보낼 email.html 과 email.css 입니다.

<!-- email.html -->

{% load inlinecss %}

{% inlinecss "core/css/email.css" %} 


<div class="mail_container">
    <div class="label">TITLE</div>
    <div class="output">{{ title }}</div>
    <div class="label">E-MAIL/PHONE NUMBER</div>
    <div class="output">{{ email }}</div>
    <div class="label">MESSAGE</div>
    <div class="output">{{ message }}</div>
</div>

{% endinlinecss %}

/* email.css */

* {
    box-sizing: border-box;
}

.mail_container{
    margin: 0 auto;
    width: 90%;
}

.label{
    font-weight: bolder;
    margin-bottom: 25px;
}

.output{
    margin-bottom: 50px;
    line-height: 150%;
}

 

inlinecss

특이한 점은 기존과 같이 static 으로 css 파일을 연결하지않고 inlinecss 를 사용합니다. inlinecss 는 해당 css 파일을 html 파일에 inine 형식으로 추가해주는 방법입니다. 이를 이용하기 위해서는 설치가 필요합니다.

pip install django-inlinecss

그 후에 settings.py 에 app 을 추가하듯이 추가해줍니다.

INSTALLED_APPS = [
		# 생략
    'django_inlinecss',
]

그 후에 위 처럼 load 해준 후에 두 태그로 html 내용을 감싸줍니다.

{% load inlinecss %}

{% inlinecss "core/css/email.css" %} 

<!-- html 내용 -->
{% endinlinecss %}

이 때 주의하실 점은 inlinecss 로 css 를 불러오는 경로입니다. 기본적인 경로가 project 폴더의 static 으로 잡혀있습니다. 즉, 위와 같은 경우에는 아래와 같은 경로에 css 파일이 존재해야 합니다.

project/static/core/css/email.css

보통 해당 경로에 collectstatic 으로 모두 모인 static 파일들이 있습니다.

결과적으로 css 가 적용된 이메일을 전송할 수 있음을 확인할 수 있습니다.