[CSS] 이메일 디자인 html에 inline CSS 합치기(combine)

오늘은 inline CSS style 에 대해서 알아보겠습니다.

HTML 문서에 CSS를 사용하는 방법은 크게 3가지가 있습니다.

1.외부 스타일 시트(External Style Sheet)

*.css 파일을 만들어 html과 링크로 연결해서 사용하는 방식


<head>
 	<link rel="stylesheet" href="./images/reset.css?ver=1.0.5">
 	<link rel="stylesheet" href="./style.css">
</head>

가장 많이 선호하는 방식이며, 권장되는 방식입니다.

html을 일관성있게 수정이 가능하며, 관리하기도 편하고, 웹문서의 크기도 가장 줄일 수 있는 방식(compressor하기도 좋고)

전문적인 홈페이지를 만들 때 효율을 극대화 하는 방식.

html5에서도 html과 css는 분리를 권장하고 있음.

다만 css파일이 다수 일 때는 관리가 필요하다는 단점(?)

2.내부 스타일 시트(Internal Style Sheet)

두 번째는 내부 스타일 시트입니다. 제가 강의 포스팅을 사용할 때 주로 포스팅 내에서 적용하는 방법이죠

내부에 따로 style 태그로 css영역을 만들어 사용하는 방법입니다.

html에 한번만 노출 시켜주면 되기 때문에 html이 하나인 블로그 또는 포스팅안에서 작동시킬 때

주로 사용하는 방식입니다.

외부 스타일 보다는 웹문서의 길이가 길어진다는 단점이 있네요.


<head>
 	<style type="text/css">
 	body {font-size: 1em;}
 	</style>
</head>
<body>
...

3.HTML태그내에 스타일 지정(Inline Styles)

마지막 인라인 CSS 스타일입니다.

html태그 하나하나 일일히 안에 스타일 속성을 지정해 주는 방식입니다.

뭐 즉흥적으로 강조를 할 수도 있고 순간순간 스타일을 줄 때 편하기도 하지만

웹디자인적으로나 나중에 수정을 해야할 때나 매우 불편한 방식입니다.

지금 작성하는 포스팅 한줄한줄이 전부 인라인 CSS가 적용되어있습니다.

<p style="text-align: center;"> 한줄한줄이 전부 p태그에 인라인 CSS인 가운데 정렬이 적혀저 있는 셈이죠.


<p style="text-align: center;">가</p>
<p style="text-align: center;">나</p>
<p style="text-align: center;">다</p>
<p style="text-align: center;">라</p>
<p style="text-align: center;">마</p>

<!-- 위는 인라인, 아래는 내부 스타일방식 -->

<style>
p {text-align:center;}
</style>
<p>가</p>
<p>나</p>
<p>다</p>
<p>라</p>
<p>마</p>

위와 아래의 출력값은 동일하지만 웹문서의 길이차이가 보이시나요?

또한 수정을 할 때도 인라인CSS방식은 일일히 스타일 값을 지워줘야하지만... 내부 또는 외부 CSS 스타일 방식은

수정이 간편하다는 장점이 있습니다.

그러면 왜(?) 어떨 때 인라인 방식을 사용 해야 할 까요?

메일을 보낼 때는 각각 네이버, 다음, g메일 등 외부 스타일 시트 및 내부 스타일 시트에

먹히지 않습니다.. 그렇기 때문에 인라인 스타일 시트방식으로

문서를 작성을 해야하는 것이죠.

오늘 회사에서 작업중에 이메일 발송 웹문서를 만들었는데.

외부 스타일 시트로 제작이 되어서 이 것을 인라인 스타일시트로 만들어야하는 작업이 발생했습니다.

처음에는 아무생각없이 크롬 요소검사를 통해서 일일히 집어넣는 방법을 생각했는데

디자이너 분께서 '합치는 툴을 찾아봐야겠다'는 좋은 아이디어를 주어서

실제로 해외 포럼에 찾아보니 이메일 관련해서 합쳐주는 tool이 존재했네요.'ㅡ'