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

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

 
Wednesday, February 22, 2006

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


업데이트: 아래 주소에, 텍스트를 HTML 소스로 자동 변환하는 프로그램을 올렸습니다. 브라우저에서 직접 변환할 수 있습니다:
▶▶ 텍스트를 HTML소스로 변환하기 프로그램; TXT to HTML로




HTML에서 <, > 이 두 개의 괄호 즉 "Less than" 과 "Greater than" 은 태그를 표현할 때 사용되므로, 이론적으로 본문에 직접 나타낼 수 없습니다. 만약 본문에 사용하기 위해서는 각각 &lt; &gt; 로 변환해 주어야 합니다. (또한 &lt; &gt; 자체를 블로그나 사이트 화면에 표시하기 위해서는 &amp;lt; &amp;gt; 이런 식으로 표현해 주어야 합니다.)


이 외에도 HTML 파일에 직접 표현할 수 없는 문자들이 있습니다. HTML 문법에서 특수한 의미로 사용되는 것이기 때문입니다. 가령 HTML 파일 속에 (1)번 문자열을 기술하려면 (2)번처럼 적어 넣어야만, 브라우저에서 (1)번처럼 보이게 됩니다. 중간에 "&" 문자가 있기 때문입니다. 물론 브라우저가 융통성을 발휘하여 (1)번을 (1)번처럼 보여주기도 하는데 이것은 문법에는 어긋난 것입니다.

(1)
Ishihara Yujiro & Yashiro Aki 石原裕次郞 & 八代亞紀 - Ginza No Koi No Monogatari (Ginza Love Story) 銀座の戀の物語 (映畵 1962)

(2)
Ishihara Yujiro &amp; Yashiro Aki 石原裕次郞 &amp; 八代亞紀 - Ginza No Koi No Monogatari (Ginza Love Story) 銀座の戀の物語 (映畵 1962)




HTML에서 &, <, > 이 세 개의 문자는 본문에 직접 표현할 수 없기에 각각

&amp;
&lt;
&gt;

이렇게 간접적으로 표기해야 합니다.

또한 2개 이상의 스페이스 문자는 1개만으로 인식되기에,
"  " 이것을
" &nbsp;"
이것으로(따옴표 제외) 변환해 주어야 합니다.


윈도 메모장으로 코드를 편집할 경우, Ctrl+H 키로 "바꾸기" 메뉴를 불러,
"찾을 내용"에 "&"를
"바꿀 내용"에 "&amp;"를
(따옴표 제외하여) 넣고 "모두 바꾸기"를 하면 됩니다.

이때 중요한 것은 반드시 앰퍼샌드(&) 기호부터 바꾸어야 한다는 것입니다. 다른 것부터 바꾸면 뒤죽박죽이 됩니다!!!

다른 것도 이런 식으로 바꾸어 줍니다.

공백 2개 이상을 &nbsp;로 변환할 때에는 메모장 바꾸기의 "찾을 내용"에서 스페이스 키를 2번 눌러 공백 2개를 입력합니다. "바꿀 내용"에서는 스페이스 키를 1번 눌러 공백 1개를 적어 넣은 후, "&nbsp;"를 따옴표 제외하고 넣어 주면 됩니다.

또한 탭 문자를 표현하기 위해서는 탭 문자 1개를
" &nbsp; &nbsp; &nbsp; &nbsp;"
이렇게 치환해야 합니다. (따옴표 제외)

그러나 사람이 직접 손으로 변경해 주는 것은 힘들기에 텍스트 편집기의 매크로 기능을 사용하여 일괄적으로 변경하면 편리합니다.



매크로를 사용하여 더 간편하게



메모장이 아닌, 전문적인 텍스트에디터는 매크로 기능을 가지고 있습니다. 자주 사용하는 기능들을 매크로로 만들어 두면 시간을 절약할 수 있습니다. (다만 MS워드에 있는 매크로 기능으로 소스 코드 등을 편집하면 안됩니다. MS워드나 아래아한글 등은 "plain 텍스트" 편집기가 아닌 워드프로세서이기 때문입니다.)


아래의 코드는, 텍스트 파일을 HTML로 변경해 주는, EmEditor 매크로입니다. 이것은 블로거닷컴용으로 만든 매크로입니다. 일반 홈페이지에 올릴 HTML은 이것으로 충분하지 않고, 각 행의 끝에 <br /> 을 붙여 주어야 행갈이가 됩니다.


파일명: SpecialChar2HTML.vbee
인코딩: 유니코드


''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
' 프로그램 코드를 블로그에 올리기 위해 HTML로
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

' 기본적인 것들의 변환
  document.selection.Replace "&","&amp;", eeReplaceAll
  document.selection.Replace "<","&lt;",  eeReplaceAll
  document.selection.Replace ">","&gt;",  eeReplaceAll

' 탭 변환
  document.selection.Replace "\t"," &nbsp; &nbsp; &nbsp; &nbsp;", eeReplaceAll Or eeFindReplaceRegExp

' 2개 이상의 공백을 변환
   document.selection.Replace "  "," &nbsp;", eeReplaceAll




만약 각 행의 끝에 <br /> 을 붙이기 위해서는 다음의 매크로를 사용합니다.


파일명: Add BR Tags to Line Ends.vbee
인코딩: 유니코드

document.selection.Replace "\n","<br />\0",eeReplaceAll Or eeFindReplaceRegExp





그리고 아래의 것은 UltraEdit 용 매크로입니다. 복잡한 기능은 없고, 현재 선택되어 있는 텍스트에서 & < > 문자만 변환해 주는 것입니다. 텍스트 일부만 약간 변환할 때에 간편히 사용하는 것입니다.


매크로 이름: Convert4TEXTAREA

InsertMode
ColumnModeOff
HexOff
UnixReOff
Find "&"
Replace All SelectText "&amp;"
Find "<"
Replace All SelectText "&lt;"
Find ">"
Replace All SelectText "&gt;"



저도 실은 이 HTML의 문자 변환 문제 때문에 고민을 많이 했습니다. 그래서 위와 같은 매크로를 만들어서 쓰고 있기는 한데, 여전히 완전 자동화는 되지 않아 골치가 아픈 문제입니다.

최대한 간단하고 명료하게 설명하려 노력했지만 결국 복잡하게 되었습니다...






2006-07-24 업데이트:
위의 울트라에디트 매크로에는, 맨 앞의 공백을 변환하지 못하는 버그가 있습니다. 이것은 그 문제를 고친 것입니다.

InsertMode
ColumnModeOff
HexOff
UnixReOn
Find "&"
Replace All SelectText "&amp;"
Find "<"
Replace All SelectText "&lt;"
Find ">"
Replace All SelectText "&gt;"
Find "^t"
Replace All SelectText " &nbsp; &nbsp; &nbsp; &nbsp;"
Find RegExp "^ "
Replace All SelectText "&nbsp;"
Find "  "
Replace All SelectText " &nbsp;"






▶▶ [HTML/CSS] 포스트 본문에 코드/문자열 창 붙이기

▶▶ HTML-CSS] 탭 문자(TAB) 표현, 공백(스페이스;Space) 넣기; PRE 태그




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

2 Comments:
At February 23, 2006 at 11:12 AM, Blogger mwultong said...

도움이 되셨으면 합니다...
(∩_∩)

 
At April 1, 2007 at 1:26 PM, Anonymous Anonymous said...

랄라라님의 코멘트:

* 설명 감사드립니다..


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

 

<< Home RSS 2.0 feed

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