mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
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 앞에 마침표(.)가 없어야 합니다. 코드 박스 안에 코드를 작성할 때 <,>,& 등의 기호는 반드시 &lt; &gt; &amp; 로 미리 변환해 주어야 합니다. 또한 2개 이상의 공백은 &nbsp; 로 치환해야 합니다. HTML 문법에서는 2개 이상으로 연결된 공백을 1개의 공백으로만 인식하기 때문입니다.

가령 8개의 공백에 해당하는 "탭" 한 개를 HTML로 변환하려면

" &nbsp; &nbsp; &nbsp; &nbsp;"

이렇게 치환해야 합니다. (따옴표 제외)

울트라에디터 같은 텍스트 에디터의 Replace 명령으로 한꺼번에 바꾸면 편리합니다.



결과:

포스트에서 보시는 바와 같이 코드 창이 만들어졌습니다.



관련 포스트: 일반 텍스트 문서(.txt)나 각종 코드를 HTML 로 변환



tag: html
HTML | CSS | 자바스크립트 JavaScript

8 Comments:
At February 21, 2006 at 1:26 PM, Blogger Dongyoon Han said...

포스팅 시간이 제대로 나오네요... 저는 <$BlogItemDateTime$>부분에서 GMT +9이 두번 적용되어 나오는데 어떻하죠? 예를 들어, 오후 1:25 포스팅은 오후 10:25분에 포스팅 한 것으로 나오는 식입니다.

 
At February 21, 2006 at 1:37 PM, Blogger mwultong said...

대쉬보드의 "설정/서식/시간대"가
"[UTC +09:00] Asia/Seoul"
로 되어 있습니까? 이 부분이 정확하지 않으면 시간이 이상하게 나오거든요...
(∩_∩)

 
At February 21, 2006 at 1:40 PM, Blogger mwultong said...

설정하신 후 블로그의 모든 페이지를 전부 "재게시" 해보세요. 그래야만 각 페이지에 설정이 적용됩니다...
(∩_∩)

 
At February 21, 2006 at 2:15 PM, Blogger mwultong said...

랄라라님, 벌써 보셨군요...
(∩_∩)

 
At February 21, 2006 at 2:24 PM, Blogger mwultong said...

해결되셨다니 다행입니다...

Web Word Processor라는 서비스가 있었군요...
(∩_∩)

 
At April 1, 2007 at 12:30 PM, Anonymous Anonymous said...

랄라라님의 코멘트:

* 감사합니다.. 곧 넣도록 하겠습니다..

(새 블로거 버전에서는, 랄라라님의 한글 아이디 글자가 깨져서, 다시 올립니다.)

 
At September 20, 2008 at 10:58 AM, Blogger WonRyong said...

좋은 정보네요. 감사합니다.

 
At September 20, 2008 at 11:40 AM, Blogger mwultong said...

WonRyong님 반갑습니다
(∩_∩)

 

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top