JavaMail – HTML에 이미지도 같이 보내기

HTML로 <img> 태그 써서 외부에 있는 이미 파일 링크거는거야.. 별거 아니고 그냥 html만 문자열로 잘 그리면 되는거죠. 그런데, 그런 절대경로로 이미지 참조하는거 말고, 이미지 파일을 동봉해서 상대경로로 참조하게 하는 방법입니다.

http://www.rgagnon.com/javadetails/java-0504.html

위에 잘 나와있습니다. 이번에도 전 메소드 하나만 샥~ 바꾸면 끝..

    private MimeMessage getMimeMessage(Session session, String title,
            String contents, String to) {
        MimeMessage message = new MimeMessage(session);
        try {
            message.setSubject(title);
            message.setRecipient(RecipientType.TO, new InternetAddress(to));

            //
            // This HTML mail have to 2 part, the BODY and the embedded image
            //
            MimeMultipart multipart = new MimeMultipart(“related”);

            // first part  (the html)
            BodyPart messageBodyPart = new MimeBodyPart();
            String htmlText = “<H1>Hello</H1><img src=\”cid:image\”>”;
            messageBodyPart.setContent(htmlText, “text/html”);

            // add it
            multipart.addBodyPart(messageBodyPart);
           
            // second part (the image)
            messageBodyPart = new MimeBodyPart();
            DataSource fds = new FileDataSource(“C:\\images\\1.jpg”);
            messageBodyPart.setDataHandler(new DataHandler(fds));
            messageBodyPart.setHeader(“Content-ID”,”<image>”);

            // add it
            multipart.addBodyPart(messageBodyPart);

            // put everything together
            message.setContent(multipart);
        } catch (MessagingException e) {
            throw new RuntimeException(e);
        }
        return message;
    }

message에는 Multipart를 붙이고 Multipart에는 여러 개의 BodyPart를 붙였네요. 흠.. 한 바디에는 HTML을 붙이고, 다른 한 바디에는 그 위에서 참조할 이미지를 붙였습니다. 저런식으로 보내는 거였군요. 이미지는 Content-ID로 참조를 했고, MimeBodyPart의 헤더에 Content-ID를 설정했군요..

JavaMail – HTML 메일 보내기

이전 코드에서 getMessage부분에서 한 줄만 바꾸면 됨.

message.setText()로 보냈었는데, 이번에는 setContent(“내용”, “메일타입”); 형태로 보냄.

    private MimeMessage getMimeMessage(Session session, String title,
            String contents, String to) {
        MimeMessage message = new MimeMessage(session);
        try {
            message.setSubject(title);
            message.setContent(“<h1>Hello world</h1>”, “text/html”);
            message.setRecipient(RecipientType.TO, new InternetAddress(to));
        } catch (MessagingException e) {
            e.printStackTrace();
        }
        return message;
    }

아직도 수정하지 않고 있는 예외 잡아먹는 코드.. 저 한 줄 고치는게 왜이리 귀찮을까; 말나온김에 고치기..

사용자 삽입 이미지끝.

다음은 HTML에 이미지 동봉하기..

Chapter 14. Image Replacement

Fahrner Image Replacement (FIR)

  • CSS를 적용해서 이미지로 교체할 텍스트를 표시한다.
<h1 id="fir">Fahrner Image Replacement</h1>
  • 텍스트를 제거해야 하니까 <span>으로 감싸서 제거한다.
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

#fir span {

display: none;

}
  • fir css를 사용해서 백그라운드에 이미지로 만든 글자를 적용한다.
#fir {

width: 287px;

height: 29px;

background: url(fir.gif) no-repeat;

}
  • 장점: css를 지원하지 않는 브라우저에서는 그냥 보통 텍스트라도 보여줄 것이다.
  • 단점: display가 비주얼하게 글자를 숨기는 것 뿐만 아니라, 완전히 없애드릴 수도 있다. <span>이라는 별의미없는 태그가 필요하다. 이미지를 꺼버리는 사용자들에게는 난감하다.

Leahy/Langridge Image Replacement (LIR)

  • 별의미 없는 <span> 엘리먼트 없이 텍스트를 이미지로 바꾸기
  • 엘리먼트의 높이를 0으로 만들고 교체할 이미즤 크기만큼 padding-top을 설정한다.
<h1 id="lir">Leahy/Langridge Image Replacement</h1>


#lir {

padding: 90px 0 0 0;

overflow: hidden;

background: url(lir.gif) no-repeat;

height: 0px !important; /* for most browsers */

height /**/:90px; /* for IE5/Win */

}
  • Screen-reader 애플리케이션이 텍스트를 읽을 수 있다.(display 속성을 사용하지 않아서.)
  • 이미지를 꺼두고 CSS만 켜두는 사람에게는 아무것도 안보인다.
  • IE5/Windows 브라우저를 위해서 Box Model 핵을 사용해야 한다.

The Phark Method

  • 글자 들여쓰기를 엄청많이 해서 페이지에 존재하고 있지만, 보이지는 않도록 한다.
<h1 id="phark">The Phark Method</h1>

#phark {

height: 26px;

text-indent: -5000px;

background: url(phark.gif) no-repeat;

}
  • 간단해서 좋아보이지만 여전히 이미지를 꺼두면 안 보인다.

Chpater 13. Styling Text

Hypertext를 좀 더 멋지게 보이게 하는 방법

Times They are a-Changing

  • Times(Times new roman) 글자체는 여러 브라우저의 기본 글자체다. however, this
    could easily be changed by users to whatever they fancy, and of course
    shouldn’t be relied upon.

줄 높이 설정하기

body {

line-height: 1.5em;

}
  • 줄 높이를 설정하여 가독성을 높일 수 있다.

글자체 설정하기

body {

font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

line-height: 1.5em;

}
  • 사용자의 컴퓨터에 설치되어 있는 폰트를 고려하여 여러 개의 폰트를 설정한다.
  • 맨 앞에 것이 없으면 그 다음 것을 적용한다.
  • 글자체가 여러 단어로 구성되어 있다면, 따옴표로 묶는다.

Kerning (a.k.a. Letter-Spacing)

h1 {

letter-spacing: -2px;

}
  • 글자들의 간격을 조정할 수 있다.

Drop Caps

<p><span class="drop">I</span>f you're painting with latex paints, and
  • 문단을 멋지게 표현하기 위한 스타일 훅이 필요하다.
  • CSS2를 적용하는 브라우저들은 이런 훅이 필요없이 :first-letter 사용하면 된다.
.drop {

float: left;

font-size: 400%;

line-height: 1em;

margin: 4px 10px 10px 0;

padding: 4px 10px;

border: 2px solid #ccc;

background: #eee;

}

Text alignment

body {

font-family: Georgia, Times, serif;

line-height: 1.5em;

text-align: justify;

}
  • text-align: justify를 사용하면 양쪽으로 정렬된다.

Transforming Text

h1 {

letter-spacing: 4px;

font-style: italic;

text-align: center;

text-transform: uppercase;

}
  • text-transform: uppercase;를 사용해서 글자를 모두 대문자로 바꿀 수 있다.

Small Caps

h1 {

letter-spacing: 4px;

text-align: center;

font-variant: small-caps;

}
  • font-variant: small-caps;를 사용해서 전부 대문자로 바꿔주고, 단어의 첫 글자 이외의 글자들을 조금 작게 보여준다.

문단 들여쓰기

p {

text-indent: 3em;

}

Chapter 10. Applying CSS

CSS를 문서에 적용하는 방법

<style> 엘리먼트

<style type="text/css">

<![CDATA[

... CSS declarations here ...

]]>

</style>
  • embedded style sheet라고도 하며, CSS를 이해하지 못하는 브라우저들을 위해 CDATA 주석 안에 둔다.
  • 페이지를 로딩할 때마다 스타일을 정의한 부분도 매번 다운로드 된다.
  • 여러 페이지에서 동일한 스타일을 사용하고 있을 때, 이것을 변경하려면 여러 페이지를 모두 수정해야 한다.

외부의 스타일 시트 사용하기

<link rel="stylesheet" type="text/css" href="styles.css" />
  • 유지보수하기 편한다.
  • 한 번만 다운로드 한다.
  • 첫 번째 방법처럼 예전 브라우저들은 CSS를 그냥 그대로 화면에 뿌려버릴 수도 있다.

@import 사용하기

<style type="text/css">

<![CDATA[

@import "styles.css";

]]>

</style>
  • 두 번째 방법과 비슷하게 이것도 역시 외부 문서에서 읽어온다.
  • 네스케이프 4.X 이하의 버전에서는 CSS를 화면에 그대로 뿌리는데, 위 처럼 해두면 그걸 숨길 수 있다.

Inline Style

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>
  • 가장 나중에 설정한 스타일이기 때문에 다른 스타일들을 오버라이딩한다.
  • 내용과 표현이 분리가 되지 않는다.
  • <head>에서 외부 파일을 참조할 수 없을 때 임시적으로 사용할 수 있다.

Extra Credit

Alternate Styles

<link rel="stylesheet" type="text/css" href="default.css" title="default"/>

<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />

<link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger"/>
  • rel 속성에 alternate stylesheet 값을 사용할 수 있다.
  • title 속성과 값도 추가해서 나중에 선택할 수 있도록 한다.