'XHTML'에 해당되는 글 3건

  1. 2010.02.07 HTML 코드를 더듬거릴 때는 흔적을 남기라.
  2. 2010.02.06 ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.
  3. 2010.01.02 난 판도라 상자를 열었을까?

HTML 코드를 더듬거릴 때는 흔적을 남기라.

초보 운전자가 가장 자주 하는 실수는 브레이크 페달을 밟아야 할 때 가속 페달을 밟는 것이라는 기사를 읽은 적이 있습니다. 저 역시 그와 비슷한 실수를 한 적이 있습니다. 운전 학원 안에서 일어난 일이라서 별다른 사고 없이 끝났습니다만, 순간 당황했던 기억이 나네요.

그렇다면 블로그를 편집할 때 (X)HTML 등에 익숙하지 않은 초보자가 자주 하는 실수는? 바로 남겨야 할 것을 지워 버린다는 것입니다. 물론 백업본이 있지만, 백업본보다는 수정본에도 무언가 남기는 편이 더 나음에도 그러지를 않는다는 점이 최대의 실수입니다.

원본을 남기라. 주석을 넣으라.

가장 좋지 않은 습관은 남기기보다 지우기를 생각한다는 점입니다. 운전에서 가장 중요한 것은 가속이 아니 정지라는 점을 자주 잊듯이[각주:1] 초보 때는 흔적을 말끔히 지우려 드는 때가 많습니다. 하지만 고수가 될수록 뭔가 흔적을 더 남기려 합니다. 그 흔적은 언젠가 그 고수를 돕는 때가 생기기 때문이지요.

따라서 블로그를 편집할 때 가장 기본은 지우지 말라입니다. 절대 지워서는 안 됩니다. 어떻게든 원본을 남겨야 합니다. 원본을 남기는 방법에는 원본 내용을 복사하여 백업 파일로 만들어 두는 것이 가장 기본입니다. 그 다음으로 (X)HTML에서는 주석(comment)을 남기는 것이 중요합니다. 주석은 아무리 많아도 HTML 등에서는 처리가 되지 않고 무시합니다. 그저 아무것도 없는 무(無; blank)로 처리합니다. 이때 무(無)공백(space)과는 다릅니다. 공백의 경우 화면에서 띄어쓰기 1칸이라도 차지하지만, 무(無)는 아예 아무것도 보이지 않습니다. 따라서 주석으로 처리하면, 지우지 않고도 지운 것과 동일한 효과를 가집니다.

주석 예시 1

[code html; highlight: (5)] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a>         <div class="TD_date">[#\#_item_date_##]</div>     </div> </div> [/code]

위의 코드는 되돌릴 수 없는 html 수공법- 블로그이력서8 문서에 나타난 그림의 코드를 나름대로 복원해 본 것입니다. 이때 날짜에 해당하는 부분은 아마도 date(날짜)라는 낱말이 있는 <div class="TD_date">[##_item_date_##]</div> 부분으로 여겨집니다. 대부분 날짜 부분을 삭제한다고 했을 때 아래와 같이 바꿉니다.

[code html] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a>     </div> </div> [/code]

물론 이 방법이 가장 간단합니다. 하지만 장기적으로 볼 때는 좋지 않습니다. 무슨 소리인지 이해할 수 없다고요? 예, 저도 처음에는 이해할 수 없습니다.

아무튼 백문이 불여일견!! 주석으로 처리해 보겠습니다.

[code html; highlight: (5, 6)] <div class="TD_album">     <div class="TD_thumbing">[#\#_item_thumbnail_##]</div>     <div class="TD_headline">         <a href="[#\#_item_link_##]">[#\#_item_title_##]</a> <!-- 아이템 날짜 제거 : 2010년 2월 7일 --> <!--        <div class="TD_date">[#\#_item_date_##]</div> -->     </div> </div> [/code]

앞의 코드와 위의 코드는 화면에 같은 결과를 보여줍니다. 그러나 나중에 고쳐야 하거나 다시 되살려야 한다면 앞의 코드보다 위의 코드가 훨씬 낫습니다. 다만 보통 때는 <!-- 아이템 날짜 제거 : 2010년 2월 7일 -->라는 주석은 달지 않습니다. 그러나 달아 두면 편합니다.

주석 예시 2

꼭 화면에 나타내지 않을 내용만 주석으로 처리하는 것이 아닙니다. 무엇인가를 설명할 때도 사용합니다. 자세한 사항은 IE6 No More 수정 문서에서 처음 두 코드와 뒤의 두 코드를 비교해 보기 바랍니다.

그 코드에서 보면 새로 추가한 부분의 시작과 끝을 주석으로 나타내고 있습니다.

[code html; highlight: (1, 9)] <!-- IE6 No More 배너 시작 --> <!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>     <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> ... 내용 ...     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

위와 같이 해 두면 나중에 코드를 고쳐야 할 때 코드 폴딩(코드 접기)를 지원하지 않는 편집기에서 그 시작과 끝을 찾기가 쉽습니다. 또한 기왕 주석을 다는 김에 그 코드의 쓰임새나 수정한 날짜 등을 함께 넣으면 좋습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


  1. 오토매틱 시스템의 자동차를 운전할 때 자동차는 브레이크 페달에서 발 떼면 움직입니다. 다시 말해 기어가 중립 상태만 아니라면 어떻게든 움직이게 된다는 뜻이지요. 그러나 정지는 항상 사용자가 브레이크를 밟거나 기어를 중립 상태로 놓아야만 가능합니다. 또한 가속은 운전자의 생명을 위협하는 요소가 커지지만, 정지는 운전자의 생명을 위협하는 요소가 줄어듭니다. 이런 점에서 가속보다 정지가 더 중요하다고 생각합니다. [본문으로]
Trackback 0 Comment 0

ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.

한컴오피스2010 베타버전 버그 32 - ᄒᆞᆫ글 씨! 블로그는 XHTML을 따릅니다.

ᄒᆞᆫ글2010 베타버전에서블로그로 올리기를 통해 블로그에 올린 게시물을 살펴보다가 발견한 사실에 저는 놀랐습니다. 그것은 블로그에 올린 코드에 HTML 코드로 들어 있었기 때문입니다. 당연하다고요? 아닙니다. 블로그는 대부분 XHTML을 따릅니다.

벌레의 유형

ᄒᆞᆫ글 씨! HTML과 XHTML은 같지 않습니다. 블로그에 올릴 때에는 반드시 XHTML 코드를 사용해 주시기 바랍니다.

개발자의 답변

2010년 2월 6일 버그 리포팅을 한 상태입니다.

벌레의 발견

이 벌레는 우연히 테스트 블로그에서 예제 문서를 살피다가 발견했습니다.

HTML 코드로 되어 있는 부분 (빨간 네모 표시 부분)

HTML 코드로 되어 있는 부분 (빨간 네모 표시 부분)

다른 부분은 대부분 잘 지켜졌습니다. 그런데 제가 거의 쓰지 않는 hr 태그에서 XHTML 코드가 아닌 HTML 코드를 쓰고 있더군요. 저것을 옳게 고치면 다음과 같습니다.

[code html] <hr align="left" width="300px" /> [/code]

벌레 분석

이 부분만 틀린 것으로 보아 태그를 변환하는 과정에서 빠뜨린 듯싶습니다.

덧붙여 2월 6일 검토 과정에서 HTML에 닫는 태그가 없는 태그, 예컨대 img 등에서도 태그를 잘못 나타내고 있었습니다.

관련 벌레

이 벌레와 관련이 있는 벌레는 다음과 같습니다.

관련 문서

내부 문서

외부 문서

이 글은 스프링노트에서 작성되었습니다.


Trackback 0 Comment 0

난 판도라 상자를 열었을까?

난 판도라 상자를 열었을까?

요즘 저런 생각을 절로 하고 있습니다. 괜히 건드리면 안 될 물건을 건드리지 않았나 후회해 봅니다.

최근 두 개의 글을 올렸습니다. 최근이고 뭐고, 새해 첫날에 옛한글 관련 포스팅을 두 개나 올려 버렸죠.

그런데 갈수록 험난한 길이 보입니다. 오늘은 (X)HTML 코드를 텍스트 편집기에 복사해 붙여넣기를 했다가 그게 엉뚱하게 바뀌는 현상을 경험했습니다. 난감합니다. 이걸 버그 리포팅을 하자니, 특정 프로그램을 너무 때리는 것이 되지 않나 싶고, 버그 리포팅을 안 하자니 그래도 버그인데 안 할 수도 없고…. 더구나 그 편집기에서는 옛한글이 포함된 (X)HTML 문서를 읽어올 경우 경고 없이 허락도 받지 않고 마음대로 바꾸어 버립니다.

벌레가 줄줄이…

그 편집기만의 문제가 아니었습니다. 대부분의 편집기에서 옛한글을 입력하기 힘들다는 현실을 깨닫게 되었습니다. 아니, 진작에 알고 있었지만 지금까지 외면해 왔습니다. 양심이 가슴 한쪽을 쿡쿡 찌르는군요.

죄송합니다, 세종대왕님!

이 모자라고 모자란 후손은 세종어제 훈민정음조차 컴퓨터에 제대로 나타내지 못하고 있습니다.

아무튼 벌레가 줄줄이 나타나고 있습니다. 그래서 아예 옛한글을 잘 나타내는 텍스트 편집기(가칭)라는 글을 준비하고 있습니다. 입력까지는 바라지도 않습니다. 어차피 우리가 쓰는 키보드로는 입력이 불가능합니다. 입력하려면 반드시 특별한 입력 소프트웨어가 필요합니다. 웹에서 입력할 수 있게 해주는 웹사이트가 있는데, 아쉽게도 모질라 파이어폭스나 구글 크롭에서는 동작하지 않습니다. 오직 인터넷 익스플로러에서만 동작합니다. 오호 통재라, 오호 애재라! 그렇습니다. 한글을, 옛한글을 가장 못 나타내는 웹브라우저가 인터넷 익스플로러인데도 옛한글 관련 툴은 인터넷 익스플로러용이 가장 많습니다. 아마 그놈이 가장 못 나타내기 때문에 더 열성적으로 그놈만 지원하는 것일까요?

글꼴은 반드시 필요해!

글꼴이 갖춰져야 위와 같이 볼 수 있습니다.

글꼴이 갖춰져야 위와 같이 볼 수 있습니다.

다음뷰, 옛한글도 한글이란다.라는 글에 나온 내용을 볼 수 없는 사람도 있습니다. 다시 말해 그 글에 나타난 예시에서 맨 윗줄의 내용이 맨 아랫줄의 내용처럼 보일 수도 있습니다. 하지만 다음뷰에 나타난 ??? (물음표 세 개)처럼 보이는 사람은 없으리라 생각합니다. 만약 ???로 보이는 사람이 있다면 웹브라우저를 바꾸는 게 문제가 아니라 당장 운영체제를 바꾸는 게 낫습니다.

옛한글을 보려면 윈도XP 이상의 윈도 운영체제, 맥 OS X 이상, 리눅스 커널 2.4 이상이 필요하지요. 더구나 리눅스의 경우 X윈도의 버전과 거기에 쓰이는 데스크탑(윈도의 Explorer. ←이게 데스크탑을 작동하는 인 동시에 윈도 탐색기입니다.)인 GNOME(그놈) 및 KDE의 버전도 따져 봐야 합니다.

한글 입력과 표현에 대한 자세한 정보는 다음과 같은 사이트에서 구할 수 있습니다. 다만 한양 사용자 정의 영역 코드(Hanyang private use area code; 한양 PUA 코드)는 표준 문제로 도태되고 있습니다. 표준 방식은 한글자모 코드(Jamo-Composed code; 일명 첫가끝 코드)입니다.

제가 윈도를 쓰므로 윈도용 입력기를 소개합니다.

위의 여러 글을 읽으면 글꼴도 소개하고 있지만 여기에서 따로 소개합니다. 참고로 MS에서 배포한 글꼴은 윈도에서만 써야 합니다. 리눅스나 맥 OS에서는 사용하면 안 됩니다. 이것을 어기고 다들 리눅스나 맥 OS X에서 쓰시는데, 라이선스 위반입니다. 특히 문화재청(국가기록유산 홈페이지 등), 디지털 한글박물관, 국립국어원 등에서 배포하는 글꼴은 윈도 전용 라이선스 글꼴로서, 한양 UPA 방식을 따릅니다. 그러므로 해당 사이트를 사용하지 않는다면 그 글꼴을 설치하지 않는 것이 좋습니다.

  • 은 글꼴 :: 다운로드 - 압축을 푼 뒤 %SystemRoot%\Fonts 폴더에 복사하면 됩니다.
  • Microsoft 옛한글 글꼴 (링크 삭제) - 기이하고 신기하고 이상하게도 Microsoft Internet Explorer에서는 옛한글을 제대로 보여주지 못하는 때가 있습니다. 그리고 반드시 윈도에서만 사용해야 라이선스를 가집니다. 이것은 한양 PUA 지원하는 비표준 글꼴입니다. 익스플로러에서 잘 나타내지 못하는 이유도, 처음에는 MS가 사용자 영역(UPA)를 지원했으나 나중에 유니코드 사용자 영역에 대한 공식적인 지원을 하지 않고 있기 때문입니다. 따라서 보이면 다행, 안 보여도 어쩔 수 없습니다.
  • Code 2000 - 셰어웨어 글꼴(유료). 한글이 예쁘지는 않지만, 모든 자소가 포함되어 못 나타내는 글자는 없습니다.

어?! 그래도 안 나오네!

이렇게까지 했는데도 안 나오는 경우가 있다.

USP10.DLL 파일이 문제였다.

이게 뭐냐고? Uniscribe Unicode script processor (줄여서 유니스크라이브(Uniscribe))라는 것인데, 이게 겨우 버전 1밖에 안 되는데도, 빌드넘버에 따라 성능 차이가 심합니다. 참고로 내가 가진 파일의 버전은 1.626.5756.0, 날짜는 2006년 10월 13일이며, 파일 크기는 503296 바이트입니다. 이 파일의 최신 버전은 윈도 7에 포함된 1.626.7600.16385로서, 날짜는 2009년 7월 14일이며, 파일 크기는 612 KiB입니다. 최근 나온 Microsoft® Office 2010 베타버전에는 1.626.7600.16385 버전의 파일이 들어 있는데, 날짜는 2009년 8월 4일이며, 파일 크기는 639824 바이트입니다. 다시 말해 버전은 윈도 7에 포함된 파일과 같으나 날짜와 파일 크기는 다릅니다.

아무튼 이 파일을 복사하여 교체하면 되는데, 작업이 좀 복잡합니다. 그래서 그런지 MS오피스 2010 베타버전도 설치 과정에서 시스템 폴더를 쓰지 않고 자신의 공유 폴더에 넣어 두고 있습니다.

이렇게 고생고생해서 겨우 옛한글을 보게 되었습니다. 저는 판도라 상자를 열었을까요? 그 판도라 상자는 희망의 판도라 상자일까요? 절망의 판도라 상자일까요?

남은 이야기

그리고 제 블로그는 읽기가 좀 불편함을 알게 되었습니다.

한글이나 한자는 1글자, 영문이나 숫자는 0.5글자로 계산한다는 가정하고, 보통 한 줄에 글자는 25자 정도 되어야 읽기 좋습니다. 그보다 적으면 읽기는 편할 수 있으나 빨리 지루해진다고 하며, 그보다 많으면 너무 행이 길어서 빨리 지친다고 합니다. 그런데 제 블로그는 무려 50글자를 넘겼습니다. 무려 두 배나 많습니다.

물론 지금도 제 블로그의 글꼴 크기는 꽤 큰 편입니다. 그런데도 글자가 많은 것은 본문의 폭이 720 픽셀이기 때문입니다.

그래서 글꼴 크기가 작으면 글자가 뭉개져서 보기 흉해지는 옛한글 문제도 생기고 해서 겸사겸사 글자 크기를 좀 더 크게 하기로 했습니다. 어차피 제 자신이 보려고 블로그에 글을 올리고 있으니, 눈 나쁜 저에게는 더 좋은 일이지요.

그리고 바꾸는 김에 지금까지 미뤄 왔던 CSS 글꼴 설정도 손을 보았습니다. 글꼴 적용 순서는 은 돋움, 은 자모 돋움, 은 바탕, 은 자모 바탕, 돋움, 돋움 옛한글, 굴림 옛한글, Code2002, Code2001, Code2000의 순서입니다.

그리고 위의 은 글꼴을 받아서 설치하고 나서도 제 블로그의 글자가 이상하게 보인다면 댓글 남겨 주십시오.

마지막으로 스크린샷 몇 개!

글꼴이 달라지기는 했지만, 옛 한글은 잘 나옵니다.

글꼴이 달라지기는 했지만, 옛 한글은 잘 나옵니다.




참고 자료

내부 자료

외부 자료

이 글은 스프링노트에서 작성되었습니다.


Trackback 0 Comment 0
prev 1 next


티스토리 툴바