정성스레 편집해서 올린 글이 엉망으로 보여서 낙담하고 있다가, CSS가 적용될려나 하는 생각에 테스트를 해봤다. 헉! 된다 +_+ 그것도 오히려 더 짧은 편집 시간을 들여서 훨씬 나은 모습으로 결과가 나온다!!
우선 CSS를 적용한 글과 적용하지 않은 글이 얼마나 다른지 비교해 보자
- CSS 적용해서 작성한 글 : 2011/03/10 - [IT/Computing] - [펌/번역] "Mobifying" Your HTML5 Site
- WYSWYG 에디터로 작성한 글 : 2011/03/09 - [IT/Computing] - [펌/번역] "Mobifying" Your HTML5 Site
- WYSWYG 에디터로 작성한 글 : 2011/03/09 - [IT/Computing] - [펌/번역] "Mobifying" Your HTML5 Site
딱 보면 알겠지만, 비교할 수준이 못된다.
간단하게 티스토리 글 작성시에 CSS를 적용하는 방법을 정리해볼까 한다.
티스토리 자체에는 사용자 정의 CSS 파일을 업로드할 수가 없기 때문에 참조가 외부의 공간에 업로드를 해야된다. 다행히 호스팅 서비스를 사용하고 있어서 그곳에 올리고 글 작성시에 참조할 수 있었다.
※ 티스토리 스킨 업로드하는 부분에 CSS를 올리고 참조할 수 있을 것도 같은데, 확인은 안해봤다. 누가 확인 좀!!
2. 글 작성시 HTML 모드로 변경하기
글 작성 창의 우측 상단에 보면 HTML 체크 박스가 있다. 이 박스를 체크하면 HTML을 입력할 수 있는 모드로 바뀐다.
3. CSS 링크 구문 삽입하기
본문 최상단 부분에 아래와 같이 css 파일을 로드하는 태그를 입력한다.
<LINK REL='stylesheet' HREF='css 주소' TYPE='text/css'></LINK>
4. CSS에 정의한 태그를 이용해서 글을 작성한다.
CSS를 작성하는 데도 약간의 요령이 필요하다. 아래에 내가 사용하는 CSS 파일을 간단한 설명과 함께 추가했다.
body
{
width : 600px;
font-size : 9pt;
color : #000000;
}
{
font-size : 9pt;
color : #000000;
}
페이지 전반적으로 사용될 스타일을 정의한다.
[10Mar2011] body에서 가로 크기를 지정할 경우. 스킨 레이아웃이 깨지는 문제가 있어서 수정합니다.
2. 제목 스타일 설정
글을 작성할 때는 구조에 따라 메인 타이틀, 제목1, 제목2 등의 구조를 가질 수 있다. 이에 맞게 스타일을 지정한다.
위의 스타일은 본문 작성시의 메인 제목을 h0, 각각 제목들을 레벨에 따라 h1, h2로 정의했다. class name을 headerMainTitle, headerLevel0, headerLevel1 등으로 지정하는 것이 보기에는 좋을지 모르나, 반복해서 입력하기에는 너무 길다. 본인만 알 수 있다면 h0, h1, h2와 같이 짧을 수록 좋다.
제목 스타일에서 글자 크기를 지정할 때 px 대신에 em을 사용하면 body에서 지정한 기본 글꼴을 확대/축소하는 방법으로 글자의 크기를 결정한다. 2em은 기본 글자 크기의 2배, 1.2em은 기본 글자 크기의 1.2배 이런 식이다. 역시나 확대/축소나 모바일 뷰시에 훨씬 나은 모습을 제공한다.
위의 스타일은 아래와 같이 사용하면 된다.
3. 본문 스타일 설정
가장 많은 비중을 차지하는 본문의 스타일을 지정한다. line-height 속성을 줘서 가독성을 높여준다. 이 스타일을 적용할때도 약간의 팁이 있는데, 제목과 본문이 반복되는 구조에서 아래와 같이 매 본문마다 <div> 태그를 이용해서 이 속성을 적용하는 것도 쉽지 않다.
위와 같이하면 <div class=art>에 대한 입력이 너무 많다. 아래와 같은 방식을 적용하면 훨씬 편리하다.



참고로 이렇게 작성한 글을 편집하게 되면, 적용된 CSS 스타일이 모두 날아가는데, 이는 CSS 파일을 로드하는 <LINK> 태그가 삭제되어서 그렇다. HTML 편집 모드로 들어가서 추가해주면 정상적으로 돌아온다.
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;
}
{
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>
<div class=h1>CSS 미디어 쿼리</div>
<div class=h2>스크린 사이즈 지정하기</div>
3. 본문 스타일 설정
.art
{
font-size : 1em;
font-family : 굴림;
color : #000000;
line-height : 170%;
}
{
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>다음의 예제에서, 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>
<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;
}
{
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;
}
{
text-align : center;
font-size : 1em;
font-family : 굴림;
color : #ff0000;
}
.aut
{
font-size : 1em;
font-family : 굴림;
color : #999999;
text-align : right;
font-style : italic;
}
{
font-size : 1em;
font-family : 굴림;
color : #999999;
text-align : right;
font-style : italic;
}
.cit
{
font-size : 1em;
font-family:"Courier New";
color:#00cc00;
}
{
font-size : 1em;
font-family:"Courier New";
color:#00cc00;
}
참고로 이렇게 작성한 글을 편집하게 되면, 적용된 CSS 스타일이 모두 날아가는데, 이는 CSS 파일을 로드하는 <LINK> 태그가 삭제되어서 그렇다. HTML 편집 모드로 들어가서 추가해주면 정상적으로 돌아온다.
'IT > Computing' 카테고리의 다른 글
[번역] How to beat Apple (0) | 2011.05.03 |
---|---|
[번역] How to Be a Successful Software Engineer (0) | 2011.05.03 |
티스토리 글 작성시 CSS 적용하기 (1) | 2011.03.10 |
stackoverflow- 프로그래머를 위한 전문 Q&A 사이트 (1) | 2011.02.22 |
구글 크롬 OS 이야기 (0) | 2011.02.15 |
[펌/번역] How Facebook Ships Code (0) | 2011.01.30 |
TAGCSS
댓글을 달아 주세요
나참........이글도 그냥 WYSWYG 에디터로 적었더니 엉망이다.