Tuesday, February 21, 2006
HTML/CSS] 포스트 본문에 코드/문자열 창 붙이기
원래 웹페이지에 일반 텍스트가 아닌 '프로그래밍 소스/코드' 등을 표현할 때는 <textarea></textarea> 태그를 사용합니다. 그런데 블로거닷컴에서는 <textarea></textarea> 태그 사용이 힘들었습니다.
이때, <div></div> 태그에다가 scroll 바를 붙여 주면 <textarea></textarea>와 거의 같은 효과를 낼 수 있습니다.
클래스 정의:
템플릿 상단의 <style type="text/css"></style> 태그 사이에 다음의 클래스를 정의합니다. (단, "wasabi"는 다른 분들이 만든 클래스와 충돌되지 않게 하기 위해 제가 만든 고유 아이디이기 때문에, 이것을 여러분 자신의 아이디로 대체하는 것이 좋습니다. 예를 들어, ".mupama-code-box" 하는 식입니다.)
.wasabi-code-box {
font-family:'돋움체', monospace; font-size:10pt;
background:#E2E2FF;
overflow:scroll; white-space:nowrap;
padding:10px; width: 98%;
scrollbar-face-color:#FFB9B9;
scrollbar-3dlight-color:#ffb9b9;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#ffb9b9;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#FFEEEE; }
scrollbar 정의 부분은 없어도 됩니다. 스크롤바에 색을 입히는 것인데, CSS표준이 아니기 때문에 IE에서만 보이고 파이어폭스에서는 무시됩니다.
width 는 코드 창의 가로 길이를 결정하는 것인데 자신의 블로그에 맞게 적당히 조절해야 합니다.
포스트 본문에 코드 창 삽입:
<div class="wasabi-code-box">
...
여기에 코드 작성
...
</div>
클래스를 사용할 때에는 wasabi-code-box 앞에 마침표(.)가 없어야 합니다. 코드 박스 안에 코드를 작성할 때 <,>,& 등의 기호는 반드시 < > & 로 미리 변환해 주어야 합니다. 또한 2개 이상의 공백은 로 치환해야 합니다. HTML 문법에서는 2개 이상으로 연결된 공백을 1개의 공백으로만 인식하기 때문입니다.
가령 8개의 공백에 해당하는 "탭" 한 개를 HTML로 변환하려면
" "
이렇게 치환해야 합니다. (따옴표 제외)
울트라에디터 같은 텍스트 에디터의 Replace 명령으로 한꺼번에 바꾸면 편리합니다.
결과:
이 포스트에서 보시는 바와 같이 코드 창이 만들어졌습니다.
관련 포스트: 일반 텍스트 문서(.txt)나 각종 코드를 HTML 로 변환
이때, <div></div> 태그에다가 scroll 바를 붙여 주면 <textarea></textarea>와 거의 같은 효과를 낼 수 있습니다.
클래스 정의:
템플릿 상단의 <style type="text/css"></style> 태그 사이에 다음의 클래스를 정의합니다. (단, "wasabi"는 다른 분들이 만든 클래스와 충돌되지 않게 하기 위해 제가 만든 고유 아이디이기 때문에, 이것을 여러분 자신의 아이디로 대체하는 것이 좋습니다. 예를 들어, ".mupama-code-box" 하는 식입니다.)
.wasabi-code-box {
font-family:'돋움체', monospace; font-size:10pt;
background:#E2E2FF;
overflow:scroll; white-space:nowrap;
padding:10px; width: 98%;
scrollbar-face-color:#FFB9B9;
scrollbar-3dlight-color:#ffb9b9;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#ffb9b9;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#FFEEEE; }
scrollbar 정의 부분은 없어도 됩니다. 스크롤바에 색을 입히는 것인데, CSS표준이 아니기 때문에 IE에서만 보이고 파이어폭스에서는 무시됩니다.
width 는 코드 창의 가로 길이를 결정하는 것인데 자신의 블로그에 맞게 적당히 조절해야 합니다.
포스트 본문에 코드 창 삽입:
<div class="wasabi-code-box">
...
여기에 코드 작성
...
</div>
클래스를 사용할 때에는 wasabi-code-box 앞에 마침표(.)가 없어야 합니다. 코드 박스 안에 코드를 작성할 때 <,>,& 등의 기호는 반드시 < > & 로 미리 변환해 주어야 합니다. 또한 2개 이상의 공백은 로 치환해야 합니다. HTML 문법에서는 2개 이상으로 연결된 공백을 1개의 공백으로만 인식하기 때문입니다.
가령 8개의 공백에 해당하는 "탭" 한 개를 HTML로 변환하려면
" "
이렇게 치환해야 합니다. (따옴표 제외)
울트라에디터 같은 텍스트 에디터의 Replace 명령으로 한꺼번에 바꾸면 편리합니다.
결과:
이 포스트에서 보시는 바와 같이 코드 창이 만들어졌습니다.
관련 포스트: 일반 텍스트 문서(.txt)나 각종 코드를 HTML 로 변환
tag: html
HTML | CSS | 자바스크립트 JavaScript
포스팅 시간이 제대로 나오네요... 저는 <$BlogItemDateTime$>부분에서 GMT +9이 두번 적용되어 나오는데 어떻하죠? 예를 들어, 오후 1:25 포스팅은 오후 10:25분에 포스팅 한 것으로 나오는 식입니다.
대쉬보드의 "설정/서식/시간대"가
"[UTC +09:00] Asia/Seoul"
로 되어 있습니까? 이 부분이 정확하지 않으면 시간이 이상하게 나오거든요...
(∩_∩)
설정하신 후 블로그의 모든 페이지를 전부 "재게시" 해보세요. 그래야만 각 페이지에 설정이 적용됩니다...
(∩_∩)
랄라라님, 벌써 보셨군요...
(∩_∩)
스스로 문제점을 찾았습니다. ;;
저는 포스팅 툴로 writely를 쓰는데, 거기에 문제가 있었습니다. 지금 수정 요청을 해놓은 상태입니다.
해결되셨다니 다행입니다...
Web Word Processor라는 서비스가 있었군요...
(∩_∩)
랄라라님의 코멘트:
* 감사합니다.. 곧 넣도록 하겠습니다..
(새 블로거 버전에서는, 랄라라님의 한글 아이디 글자가 깨져서, 다시 올립니다.)
좋은 정보네요. 감사합니다.
This comment has been removed by the author.
WonRyong님 반갑습니다
(∩_∩)
Post a Comment
<< Home