지메일에 html css 한번에 넣기 + clipboard

안녕하세요, 혹시 구글 시트나 엑셀에서 한번에 셀 여러개를 선택해서 지메일에 복사붙여넣기를 해보신적이 있나요?

해본 사람들은 아시다 싶이 구글 시트에서 보던 양식 그대로 붙여넣기가 되는것을 확인할 수 있습니다.

 

네이버 같은 경우에는 plain탭과 html탭이 구분되어있어서 html을 plain탭에 붙여넣으면 그냥 text형식으로 들어가지만 html탭에 넣으면 html을 이해한 형태로 이메일을 작성할 수 있습니다.

잘보면 중간 아래쯤에 있습니다...ㅜ

 

 

하지만 지메일은 그런 구분이 없기 때문에 html코드를 복사해서 붙여넣으면 일반 텍스트처럼 긴코드만 붙여넣는걸 확인할 수 있습니다.

참고로 아래 html코드는 위 테이블 코드입니다

 

제가 수행해야했던 기능은 브라우저에 있는 html+css 테이블을 똑같은 형태로 이메일에 붙여넣을 수 있는 기능을 알아보는 것이었습니다.

 

제가 삽질한 포인트는 2지점입니다.

 

첫번째는 브라우저에서 특정 html태그에 입혀진 모든 css효과를 모으는 부분입니다.

브라우저에서 한 태그에 입혀진 모든 css효과를 알기 위해서는 window.getComputedStyle()을 사용하면 되고 인자로 해당 태그를 전달하면 됩니다. 

제가 삽질하게된 이유는 useRef로 css효과를 알고 싶어하는 모든 DOM을 긁어서 window.getComputedStyle()에 전달한 효과, 맨바같쪽 태그의 css효과만 리턴해줍니다..... 밑에 있는 태그는 무시한체 말이죠.... 해당 문제에 대해서는 반복문을 사용하여서 일단 해결할 수 있을것으로 봅니다.

const ref = useRef();

...
<div ref={ref}>  // 이렇게 지정해놓으면 맨위 div의 css만 알수 있음!
    <div>
    	phrase2
    </div>
    <div>
    	phrase3
    </div>
    <div>
    	phrase4
    </div>
</div>

 

이렇게하면 어떤 css라이브러리를 쓰던지 아니면 외부 파일로 html, css파일이 나뉘어져있어도 상관없이 css값을 따로 가질수 있으며 덕분에 html에 인라인 형태로 전환할 수 있습니다. (인라인 형태로 바꾸는 이유는 이메일은 인라인 형식으로만 css가 적용되기 때문)

 

이렇게까지 하고 navigator.clipboard.writeText를 통해서 html+css을 인라인 형태로한 코드를 바로 저장하면, 클립보드는 이 값을 "text/plain"형태로 인지하게 된다. 그렇게되면 우리가 클립보드에서 붙여넣기를 했을때 지메일은 자동으로 텍스트 형식으로 인식을 하게 된다. 우리는 우리의 html+css코드를 html형태라는것을 clipboard에게 알려주기 위해서 그 형태를 지정해줘야 한다!

 

그러한 이유로 navigator.clipboard.write()함수를 쓰고 인자로 Blob객체를 쓴다. 해당 Blob객체에 우리의 html+css코드를 넣어주고 타입을 "text/html"으로 지정해주면 드디어 지메일에 붙여넣기를 하면 우리의 html+css가 엑셀, 구글시트에서 복붙한것처럼 작동을 하게 된다! (자세한 코드는 알아서 해보세요 ㅎ, 다 떠먹여줬습니다.) 

 

클립보드와 지메일 형식 관련 서치를 하다보면 타입에 관한 내용들도 굉장히 많이 나오고 정말 많은 타입들이 나오는 것을 알 수 있을것이다. 참고로 "text/html"으로 지정해주면 gmail까지는 커버되지만 outlook에서는 안되는 걸 알수 있습니다. 하지만 여기까지 온 이상 타입을 outlook에 맞는 타입으로 설정해주면 정상적으로 작동할 것이라고 추측할 수 있다. 

 

궁금한게 있다면 댓글 많이 남겨주세요~