IT/Computing | Posted by 철규님(최규철) 2011.03.10 01:52

티스토리 글 작성시 CSS 적용하기


WYSWYG 방식의 에디터를 사용하다보면 의도치 않게 편집이 되서 돌아버릴때가 많다. 나만 하더라도 글을 작성할때 리스트 기능, 글박스 기능, 중앙 정렬 기능 등도 많이 사용하는데, 편집창에서 편집하기도 엄청 어렵거니와, 편집하고 나면 편집할때랑 다른 모습으로 보이면 정말 미칠 지경이다. (내가 내공이 부족해서 그렇다면 할말이 없다 ㅠㅠ) 혹시나 해서 오프라인 에디터인 Microsoft Live Writer를 사용해봤는데, 이건 더 하면 더했지 덜하지는 않았다. 간단한 글을 작성하는 경우에는 별 문제가 없지만, 틀에 잡힌 좀 정리된 글을 적으려고 하면 글 작성보다 정리하는게 더 힘들 정도다.

정성스레 편집해서 올린 글이 엉망으로 보여서 낙담하고 있다가, CSS가 적용될려나 하는 생각에 테스트를 해봤다. 헉! 된다 +_+ 그것도 오히려 더 짧은 편집 시간을 들여서 훨씬 나은 모습으로 결과가 나온다!!

우선 CSS를 적용한 글과 적용하지 않은 글이 얼마나 다른지 비교해 보자


딱 보면 알겠지만, 비교할 수준이 못된다.


간단하게 티스토리 글 작성시에 CSS를 적용하는 방법을 정리해볼까 한다.


1. CSS 파일 작성해서 업로드 하기
티스토리 자체에는 사용자 정의 CSS 파일을 업로드할 수가 없기 때문에 참조가 외부의 공간에 업로드를 해야된다. 다행히 호스팅 서비스를 사용하고 있어서 그곳에 올리고 글 작성시에 참조할 수 있었다.
※ 티스토리 스킨 업로드하는 부분에 CSS를 올리고 참조할 수 있을 것도 같은데, 확인은 안해봤다. 누가 확인 좀!!


2. 글 작성시 HTML 모드로 변경하기
글 작성 창의 우측 상단에 보면 HTML 체크 박스가 있다. 이 박스를 체크하면 HTML을 입력할 수 있는 모드로 바뀐다.


3. CSS 링크 구문 삽입하기
본문 최상단 부분에 아래와 같이 css 파일을 로드하는 태그를 입력한다.

<LINK REL='stylesheet' HREF='css 주소' TYPE='text/css'></LINK>


4. CSS에 정의한 태그를 이용해서 글을 작성한다.




CSS를 작성하는 데도 약간의 요령이 필요하다. 아래에 내가 사용하는 CSS 파일을 간단한 설명과 함께 추가했다.



1. body 디폴트 값 설정
body
{
width : 600px;
font-size : 9pt;
color : #000000;
}

페이지 전반적으로 사용될 스타일을 정의한다. 스킨에 맞게 가로 크기를 지정하고, 기본 글자색을 지정한다. 글자 크기(font-size) 지정시에는 픽셀 단위보다는 포인트 단위로 지정하는 것이 좋다. 이 경우 확대/축소나 모바일 장치에서의 view시에 보다 나은 뷰를 제공한다.
[10Mar2011] body에서 가로 크기를 지정할 경우. 스킨 레이아웃이 깨지는 문제가 있어서 수정합니다.


2. 제목 스타일 설정
글을 작성할 때는 구조에 따라 메인 타이틀, 제목1, 제목2 등의 구조를 가질 수 있다. 이에 맞게 스타일을 지정한다.

.h0
{
font-size : 2em;
font-family : 굴림;
color : #000000;
font-weight: bold;
text-align : center;
}

.h1
{
font-size : 1.7em;
font-family : 굴림;
color : #000000;
font-weight: bold;
}

.h2
{
font-size : 1.2em;
font-family : 굴림;
color : #000000;
font-weight: bold;
}

위의 스타일은 본문 작성시의 메인 제목을 h0, 각각 제목들을 레벨에 따라 h1, h2로 정의했다. class name을 headerMainTitle, headerLevel0, headerLevel1 등으로 지정하는 것이 보기에는 좋을지 모르나, 반복해서 입력하기에는 너무 길다. 본인만 알 수 있다면 h0, h1, h2와 같이 짧을 수록 좋다.

제목 스타일에서 글자 크기를 지정할 때 px 대신에 em을 사용하면 body에서 지정한 기본 글꼴을 확대/축소하는 방법으로 글자의 크기를 결정한다. 2em은 기본 글자 크기의 2배, 1.2em은 기본 글자 크기의 1.2배 이런 식이다. 역시나 확대/축소나 모바일 뷰시에 훨씬 나은 모습을 제공한다.

위의 스타일은 아래와 같이 사용하면 된다.

<div class=h0>"Mobifying" Your HTML5 Site</div>
<div class=h1>CSS 미디어 쿼리</div>
<div class=h2>스크린 사이즈 지정하기</div>



3. 본문 스타일 설정
.art
{
font-size : 1em;
font-family : 굴림;
color : #000000;
line-height : 170%;
}

가장 많은 비중을 차지하는 본문의 스타일을 지정한다. line-height 속성을 줘서 가독성을 높여준다. 이 스타일을 적용할때도 약간의 팁이 있는데, 제목과 본문이 반복되는 구조에서 아래와 같이 매 본문마다 <div> 태그를 이용해서 이 속성을 적용하는 것도 쉽지 않다.

<div class=h2>스크린 사이즈 지정하기</div>
<div class=art>다음의 예제에서, phone.css는 브라우저가 “handheld”로 인식하는 장치나 320px 이하의 폭을 가진 장치에 적용될 것이다.</div>
<div class=h2>media="handheld"</div<>
<div class=art>일단 여기서 media=”handheld”에 대해서 잠시 이야기를 할 필요가 있다.</div>
<div class=h2>html5rocks에서 미디어 쿼리를 사용한 방법</div>
<div class=art>모바일 html5rocks 전반적으로 미디어 쿼리는 비중 있게 사용된다.</div>

위와 같이하면 <div class=art>에 대한 입력이 너무 많다. 아래와 같은 방식을 적용하면 훨씬 편리하다.

<div class=art>
<div class=h2>스크린 사이즈 지정하기</div>
다음의 예제에서, phone.css는 브라우저가 “handheld”로 인식하는 장치나 320px 이하의 폭을 가진 장치에 적용될 것이다.
<div class=h2>media="handheld"</div<>
일단 여기서 media=”handheld”에 대해서 잠시 이야기를 할 필요가 있다.
<div class=h2>html5rocks에서 미디어 쿼리를 사용한 방법</div>
모바일 html5rocks 전반적으로 미디어 쿼리는 비중 있게 사용된다
</div>



4. 기타 필요한 스타일 설정
나머지 작성하는 글의 특성이나 필요에 따라 요구되는 스타일을 정의한다.

(1) 코드 입력을 위한 글상자 정의

.cb
{
width : 96%;
border : 1px dashed #ff66ff;
background-color : #ffccff;
font-size : 1em;
font-family:"Courier New";
color:#000000;
padding : 10px;
}

pre
{
font-size : 1em;
font-family:"Courier New";
color:#000000;
}



(2) 경고문, 참고 자료, 본문 내 삽입된 코드 강조 관련 스타일 정의

.cau
{
text-align : center;
font-size : 1em;
font-family : 굴림;
color : #ff0000;
}



.aut
{
font-size : 1em;
font-family : 굴림;
color : #999999;
text-align : right;
font-style : italic;
}



.cit
{
font-size : 1em;
font-family:"Courier New";
color:#00cc00;
}




참고로 이렇게 작성한 글을 편집하게 되면, 적용된 CSS 스타일이 모두 날아가는데, 이는 CSS 파일을 로드하는 <LINK> 태그가 삭제되어서 그렇다. HTML 편집 모드로 들어가서 추가해주면 정상적으로 돌아온다.
TAG

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 철규님(최규철) 2011.03.10 01:57 신고

    나참........이글도 그냥 WYSWYG 에디터로 적었더니 엉망이다.



티스토리 툴바