티스토리 툴바

Daum
Tistory
로그인
행복한개발2011/05/02 00:48

글쓰기 샘플

글을 편하게 읽을 수 있도록 하기 위해서 CSS 검토할 주요 내용은 무엇일까?
우선은 font 관련 항목 (font-family, font-size, line-height) 이고 그 다음은 제목, 소제목, Boxing 등 편집과 관련된 부분일 것이다.

폰트 선택

보통 중요한 것은 font-size 인데, 대개의 문서에서 글씨체가 다양하기보다는 글씨의 크기가 다양하고, 또 글씨의 변형들에 대해서는 브라우저 스타일시트에 잘 정의되어 있으므로 그다지 손대지 않아도 되기 때문입니다. CSS 규칙에서 font-size를 사용할때는 뒤에 단위가 붙거나, small 또는 medium 같은 예약어를 사용합니다.
폰트 크기 비교

11px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

12px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

13px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

14px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

15px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

16px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

17px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

18px 여러분 안녕하세요...verdana, arial,helvetica, sans-serif;

버튼 / 아이콘 라벨 / 링크 목록

확인 취소 이 버튼을 누르면 어떤일이 벌어질까요?

(p class="memo") [font-family] gulim, tahoma, sans-serif

(p class="info") [font-size] 기본은 12px

(p class="link") SyntaxHighlighter Hosting

Syntax Highlighter

Syntax Highlighter 는 현재 3.x 버전이 나와 있으나, 맘에 들지 않아서 당분간 2.x 를 사용합니다.

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css"/>

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>


metafoo_tistory.zip
저작자 표시
Posted by 메타푸
Trackback 0 Comment 2

TRACKBACK http://metafoo.tistory.com/trackback/34 관련글 쓰기

댓글을 달아 주세요

  1. 메타푸

    대략 위에 있는 요소들을 섞어쓰면 그나마 좀 읽기 편한 글을 쓸 수 있을 것 같습니다.
    글을 쓸 때 기본 템플릿처럼 사용할 예정입니다.

    2011/05/02 01:03 [ ADDR : EDIT/ DEL : REPLY ]
  2. 메타푸

    현재까지 작업된 skin.html, style.css 및 관련 파일을 첨부해 둡니다.
    다운받아 가실 때는 흔적을 남겨 주시길...

    2011/05/04 01:58 [ ADDR : EDIT/ DEL : REPLY ]

행복한개발2011/04/20 14:40

Syntax Highlighter 테스트

Syntax Highlighter 가 3.x 버전이 나왔지만, 클립보드 복사 기능등에서 2.x 보다 깔끔해 보이지 않아서
2.x 버전을 적용했습니다.

그리고, Syntax Highligher 관련 css 나 js 를 꼭 자신의 서버로 가져와야 하는 것은 아니어서..
(이걸 hosting 방식이라고 하는 분들도 있는 것 같은데, 정확한 용어인지는 모르겠습니다.)
hosting 방식을 적용했습니다.

티스토리 skin.html 에 추가된 내용은 다음과 같습니다.
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css"/>

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
저작자 표시
Posted by 메타푸
Trackback 0 Comment 0

TRACKBACK http://metafoo.tistory.com/trackback/33 관련글 쓰기

댓글을 달아 주세요

행복한개발2011/04/20 14:26

Syntax Highlighter 용 HTML Tag Stripper

티스토리에 Syntax Highlighter 를 설치하고 나서
에디터에서 글을 쓰면 생기는 <br> 문제... 쩝!

에디터상에서 source 를 편집하는 이상 피할수 없는 문제같아서
아예 소스를 HTML 모드에서 직접 붙여넣을 수 있도록
HTML Tag 표시인 <, > 를 &lt;, &gt; 로 변경하는 Stripper 를 직접 하나 만들어 둡니다.
(처음에 Flex 로 만들었는데... 실용성을 고려해서 Javascript  로~~)


http://metafoo.kr/mfgr/util/trans1

저작자 표시
Posted by 메타푸
Trackback 0 Comment 0

TRACKBACK http://metafoo.tistory.com/trackback/32 관련글 쓰기

댓글을 달아 주세요