티스토리 뷰

728x90
반응형
얼마전 신현석님께서 이메일 페이지를 위해서 클래스화된 CSS를 인라인스타일로 바꾸어주는 사이트를 소개해주셨습니다.

당시 소개해주셨던 사이트(http://www.pelagodesign.com/sidecar/emogrifier/)보다 더 기능이 풍부한 사이트를 발견하였습니다.

http://inlinestyler.torchboxapps.com/styler/





별도의 css파일로 분리하여 작업한 스타일 선언을 직접 html 코드에 인라인스타일로 적용시켜 변환해주는 사이트입니다.

이 기능을 아주 유용하게 사용할수 있는 경우는 역시나 이메일 페이지를 코딩할때일것 같습니다.

특정 이메일 클라이언트에서 보안상의 이유로 외부 스타일시트를 참조하지 않는 경우가 있는데

이메일 페이지를 코딩할때는 인라인스타일을 사용하는 것이 가장 속편한 방법입니다.

잘 구조화된 스타일선언을 인라인스타일로 적용하기란 완전 노가다 작업에 흥미가 없는 작업입니다.

이러한 무의미한 노동을 쉽게 도와주는 서비스 되겠습니다.

그럼 어떻게 변환되는지 한번 볼까요?



<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" href="http://inlinestyler.torchboxapps.com/static/css/example.css" />
    </head>
    <body>
        <style type="text/css">
            h1{
                color:yellow
            }
        </style>
        <h1>An example title</h1>
        <p>Paragraph 1</p>
        <p class="p2">Paragraph 2</p>
    </body>
</html>



자 이것이 원본 코드입니다.

페이지 내에 스타일이 embed 방식으로 선언되어있고



        <style type="text/css">
            h1{
                color:yellow
            }
        </style>


또한 external 방식으로 스타일이 선언되어 있습니다.

        <link rel="stylesheet" href="http://inlinestyler.torchboxapps.com/static/css/example.css" />



이 외부 css파일에는 다음과 같이 css가 정의되어 있습니다.

p{
    margin:0;
    padding:0 0 10px 0;
}
a:hover{
    color:Red;
}
p:hover{
    color:blue;
}


html 소스를 직접 붙여넣기 해서 입력해도 되고

변환하고자 하는 url을 직접 입력해도 됩니다.

두가지 방법중 편한 방법을 선택하세요.

그리고 convert 버튼을 클릭하면



<html>
  <head>
    <title>Example</title>
  </head>
  <body>
        <h1 style="color: yellow">An example title</h1>
        <p style="margin: 0;padding: 0 0 10px 0">Paragraph 1</p>
        <p class="p2" style="margin: 0;padding: 0 0 10px 0">Paragraph 2</p>
    </body>
</html>



다음과 같이 변환이 완료됩니다.




변환이 완료되고 보니 수도클래스는 지원하지 않는다고 나타나는군요.

수도클래스(:hover 등)는 지원이 되지 않으니 참고하시기 바랍니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함