왕미친세상: 인터넷 익스플로러

레이블이 인터넷 익스플로러인 게시물을 표시합니다. 모든 게시물 표시

2010년 2월 12일 금요일

블로그 꾸미기에 유용한 웹사이트

최근 블로그에 들어 있는 배너 등을 다시 배치하려고 스킨을 만지고 있습니다. 그런데 좀체 마음먹은 대로 고치지 못하고 있습니다. 그래서 일단 구글링 등으로 알아낸 사이트를 소개하는 데서 그치고자 합니다.

떠다니는 메뉴

벗Media의 떠다니는 이미지 ~ (플로팅 광고) 소스입니다. 설명은 없지만 잘 뜯어보면 그럭저럭 쓸 만합니다.

벗Media의 떠다니는 이미지 ~ (플로팅 광고) 소스
사람을 위한 작은 공간의 인터넷과 생활 강의실 스타일 시트의 개념 - Box모델 문서입니다.

스타일 시트의 개념 - Box모델 문서

박스 개체에 대한 설명이 자세하게 되어 있습니다. 떠다니는 메뉴는 CSS의 박스 개체를 이용하면 편한 점이 많으므로 알아두면 좋습니다.
제로보드4 사이트에서 발견한 Top# 페이지 맨 위로 가는 떠다니는 레이어... 소스입니다.

Top# 페이지 맨 위로 가는 떠다니는 레이어... 소스

보안상의 이유로 제로보드4는 더 이상 업데이트를 하지 않습니다. 반드시 XpressEngine으로 바꾸기 바랍니다.
jwmx :: 스크롤 위치를 따라 다니는 레이어

jwmx :: 스크롤 위치를 따라 다니는 레이어

jwmx 님이 애써 만든 스크롤 위치를 따라다니는 레이어 소스 및 설명이 있습니다.
온유디자인 > 온유-웹스타디 > 떠다니는 플로터 배너,메뉴,이미지

온유디자인 > 온유-웹스타디 > 떠다니는 플로터 배너,메뉴,이미지

달랑 소스만 있습니다. 뭐 이거라도 참조할 수 있으니 다행이라면 다행이죠.
강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능

강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능

블로그 방문객에 대한 배려 가운데 하나인 떠다니는 메뉴에 대한 설명입니다. 소스도 있습니다.
강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2

강팀장의 웹이야기(e-Biz Story) :: 간단한 Tip으로 내 블로그 이용자 배려하는 기능 #2

간단한 Tip으로 내 블로그 이용자 배려하는 기능에서 소개한 코드를 실제로 적용하는 방법을 알려주고 있습니다.
떠다니는 레이어, 그 표준은?

떠다니는 레이어, 그 표준은?

떠다니는 레이어와 표준에 대한 논의를 하고 있는 포럼입니다.
Fixed Layer Hack for IE6

Fixed Layer Hack for IE6

떠다니는 레이어를 인터넷 익스플로러 6에서 적용하는 CSS 소스 및 예제입니다.
doxdesk.com > software > fixed.js

doxdesk.com > software > fixed.js

떠다니는 레이어를 자바스크립트로 처리하는 소스 및 예제입니다.
도아의 세상사는 이야기

도아의 세상사는 이야기

떠다니는 메뉴가 실제로 적용된 블로그입니다.

2010년 2월 6일 토요일

IE6 No More 수정

BLUEnLIVE's ZocKrWorld의 BLUEnLIVE 님의 영향을 받아 동참한 IE6 no more 캠페인이다. 이번에 이것을 다시 한 번 고쳤습니다.

원래의 배너 등을 보고 싶은 사람은 IE6 No More 동참하기 문서를 보기 바랍니다.

원래의 코드

IE6 No More 홈페이지에 나타난 원본 코드는 다음과 같습니다.

[code css; html-script: false]  [/code]

BLUEnLIVE 님이 한글로 고쳐준 코드

BLUEnLIVE 님 한글 메시지로 고쳐준 코드는 다음과 같습니다.

[code css; html-script: false]  [/code]

한글 메시지를 다시 고친 코드

BLUEnLIVE 님이 한글 메시지로 고친 코드를 조금 다르게 바꾼 코드는 다음과 같습니다.

[code css; html-script: false]    [/code]

링크 주소를 코친 코드

위 세 코드는 한 가지 문제가 있습니다. 바로 인터넷 익스플로러는 항상 영문으로 설치된다는 점입니다. 물론 설치 과정에서 약간의 작업을 거쳐서 한글 메시지를 출력할 수 있게 바뀝니다만, 처음부터 한글 인터넷 익스플로러가 설치되는 경우와는 조금 다릅니다. 더구나 설치하는 페이지도 영문 메시지를 보여 줍니다. 그것을 마이크로소프트의 웹페이지로 바꾸고, 다른 웹브라우저와 관련한 링크도 조금 손을 보았습니다. 아울러 alt 속성과 관련한 메시지도 한글로 바꾸었습니다.

[code css; html-script: false]    [/code]

2010년 1월 15일 금요일

닫는 괄호 표기 버그

요즘 한컴오피스 2010 베타버전을 사용하다 보니 조금 이상한 현상을 발견했습니다. 한/글에서는 제대로 보이는 괄호가 웹페이지에서는 약간 다르게 보이는 현상입니다.

참고 : 이 글에 나타난 사항을 바탕으로 블로그의 글꼴 설정을 바꾸었습니다.

벌레의 유형

남들은 다 날씬해 보이기를 바라는데, 이 벌레는 홀로 뚱뚱해 보이기를 바라고 있습니다.

개발자의 답변

버그 리포팅을 하지 않았습니다. 이 글을 쓰기 시작할 때까지는 적용되어 있던 글꼴 가운데 돋움 옛한글 글꼴(ODOTUM.TTF)은 MS 오피스2000 팩키지 또는 확장 팩에 포함되어 있던 글꼴입니다. 현재 이 파일에 대한 지원을 MS에서 중단한 상태입니다. 그래서 그 글꼴을 삭제하였습니다. 생각 같아서는 굴림 옛한글 글꼴도 삭제하고 싶지만, 그것이 기본 글꼴에 대한 확장이라서 그냥 두었습니다.

벌레의 발견

파이어폭스에 나타난 이상한 괄호

처음에는 파이어폭스에서 발견했습니다.

인터넷 익스플로러에 나타난 이상한 괄호

인터넷 익스플로러에서도 확인했습니다. 제 컴퓨터에 있는 IE6은 대개 이런 용도로만 쓰입니다.

글꼴 실험 시작

왜 저렇게 이상하게 보일까요? 어떤 글꼴인지 알 수 없어서 하나하나 살펴보기로 했습니다. 대상은 제 블로그에 설정한 글꼴과 몇몇 다른 글꼴입니다.

[code html] <div style="font-size:10pt;"> <p style="font-family: '굴림';">굴림 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림체';">굴림체 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '돋움 옛한글';">돋움 옛한글 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '바탕 옛한글';">바탕 옛한글 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림 옛한글';">굴림 옛한글 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '굴림 옛한글 자모';">굴림 옛한글 자모 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '궁서 옛한글';">궁서 옛한글 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 돋움';">은 돋움 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 바탕';">은 바탕 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 돋움';">은 자모 돋움 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 바탕';">은 자모 바탕 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 노벨';">은 자모 노벨 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '은 자모 소라';">은 자모 소라 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '함초롬바탕';">함초롬바탕 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: '함초롬돋움';">함초롬돋움 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2002';">Code2002 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2001';">Code2001 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: 'Code2000';">Code2000 : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> <p style="font-family: 'serif';">serif : ᄒᆞᆫ을 지우기(Del 키)를 할 때</p> </div> [/code]

위와 같은 코드를 넣은 HTML 파일을 만들어서 시험을 했습니다. ᄒᆞᆫ은 앞서 자주 나왔던 그 문자, 바로 ᄒᆞᆫ입니다. & 문자는 HTML 참조 코드 또는 글자 엔티티(character entity)임을 나타내고 있습니다. 뒤에 수치가 따라왔으므로 HTML 참조 코드입니다(스프링노트 : 문자 인코딩 관련 사항 참조). 이 코드는 옛한글 지원 여부를 알아보려고 넣었습니다.

다만 위에서 <div style="font-size:10pt";>라고 나타난 부분은 앞으로 바뀌게 됩니다. 이때 이 실험은 처음 시작할 때와 코드가 조금 바뀌었으며, 여기에 밝힌 사항은 이미 실험에 성공하였기에 나타난 사항임을 염두에 두기 바랍니다.

10포인트 글꼴 테스트

10포인트 글꼴에서는 이상을 발견할 수 없었습니다. 처음에는 이것 때문에 조금 헤맸습니다. 하지만 구글링 결과 글꼴 버그가 특정 크기에서만 나타나는 경우도 있다고 했기 때문에 급히 코드를 약간 고쳤습니다.

10포인트 글꼴 테스트

10포인트보다 큰 글꼴의 크기별 테스트

편의상 편집하여 표시합니다. 양해 바랍니다.

11포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

12포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

13포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

14포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

16포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

18포인트 글꼴 테스트 : 돋움 옛한글 글꼴에서 이상 발생

20포인트 글꼴 테스트 : 모든 글꼴에서 이상 없음

이보다 더 큰 글꼴에서의 테스트는 저에게 필요가 없기에 여기에서 멈추었습니다. 마지막 20포인트 글꼴에 빨간 네모로 표시한 부분이 옛한글을 잘 나타내고 있는 글꼴입니다.

참고로 저는 Code2000 계열 글꼴을 가지고 있지 않기에 위 그림들에서 Code2000 계열 글꼴에서 옛한글이 모두 깨지고 있습니다. 그리고 MS 오피스 확장 팩 글꼴은 제가 가진 MS Word 2000과 함께 딸려왔습니다.

벌레의 원인

이 글을 쓰기 시작할 때까지는 적용되어 있던 글꼴 가운데 돋움 옛한글 글꼴(ODOTUM.TTF)은 MS 오피스2000 팩키지 또는 확장 팩에 포함되어 있던 글꼴입니다. 아마도 그 파일에 어떤 벌레가 숨어 있었나 봅니다.

비슷한 벌레

글꼴 및 화면 표시와 관련한 버그는 다음과 같은 것이 있습니다.

2009년 12월 30일 수요일

HTML 태그 해석 오류 문제

1. 벌레의 유형

저 잘난 맛에 엉뚱한 짓을 하는 벌레입니다.

2. 개발자의 답변

2009년 12월 31일 버그 리포팅을 한 상태입니다.

3. 벌레의 발견

가. 왜 문단 모양이 흩트려지지?

HTML 문서를 ᄒᆞᆫ글에서 읽어오는 기능을 시험하고 있다. 뭐 내가 얼마나 시험할 수 있겠느냐마는, 그래도 안 하는 것보다야 낫기 때문이다.

그런데 ᄒᆞᆫ글에서 HTML을 읽어오면 이상하게 문단 모양이 흩트려졌다. 흩트려지려면 글 전체가 흩트려지면 좋겠지만, 이것은 간혹 어쩌다 흩트려졌다.

나. 어떤 공통점이 있나?

이상하게 여기게 되자 자꾸 눈이 가고, 그러다 보니 한 가지 공통점을 찾게 되었다.

그림이 지워져 있기는 하지만 인터넷 익스플로러와 ᄒᆞᆫ글 화면의 글이 같다. 그런데 인터넷 익스플로러에서는 왼쪽 정렬이 된 부분이 ᄒᆞᆫ글에서는 가운데 정렬이 되어 있다. HTML 코드를 살펴보면 다음과 같다.

이번에도 위와 같은 현상이다. IE에서는 왼쪽 정렬인데, ᄒᆞᆫ글에서는 가운데 정렬이다.

무슨 까닭인지 <p style="text-align: center;"><img … /></p>의 구조일 때 그 다음에 오는 <p> … </p> 태그로 이루어진 문단은 가운데 정렬이 되고 있습니다.

왜 이렇게 엉뚱하게 태그를 해석하는지 알 수 없으나, 상당히 짜증나는 일이 아닐 수 없습니다. 더구나 이것은 하나하나 찾아서 직접 고치는 수밖에 없는 문제입니다.

4. 벌레의 원인

무슨 까닭인지 <p style="text-align: center;"><img … /></p>의 구조일 때 그 다음에 오는 <p> … </p> 태그로 이루어진 문단은 가운데 정렬이 되고 있습니다. 왜 이런 경우에 정렬이 흩트려지는지 알 수 없었습니다.

5. 비슷한 벌레

티스토리 BBCode 오류가 비슷하다고 여겨집니다. 끼지 말아야 할 때 끼어서 엉뚱한 짓을 하는 것이 비슷합니다.

6. 관련 문서

가. 내부 문서

● [벌레와 팁] - 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

● [프로그램/스크린샷] - 한컴오피스2010 베타버전 실행화면

● [벌레와 팁/버그] - 한컴오피스2010 베타 설치 작업과 버그 몇 개

● [프로그램/설치] - 한컴오피스2010 베타버전 설치기

이글은 한컴오피스2010 베타버전에 포함된 ᄒᆞᆫ글로 작성한 글입니다.
글자가 깨진 부분은 다른 팁을 위해 남긴 부분입니다.

도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

1. 도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?

한컴오피스2010 베타버전에 포함된 ᄒᆞᆫ글이 가진, 버그라고 하기에는 조금 그렇지만, 아무튼 미흡한 점을 지적하고자 합니다.

1.1. HTML은 구조적 문서이거든요.

ᄒᆞᆫ글 씨! 여보세요! HTML은 구조적 문서이거든요. 내가 만든 구조는 어디에다 팔아먹으셨나요?

그림 1 index.html 파일을 읽어온다.

그림 2 인터넷 익스플로러에서 불러온 모습

그림 3 ???글2010에서 불러온 모습

언뜻 보면 ᄒᆞᆫ글2010은 HTML을 잘 불러왔다고 여겨집니다. 하지만 인터넷 익스플로러에서 불러온 모습과는 많이 다릅니다. 그래서 혹시나 하는 마음에 스타일을 불렀습니다.

그림 4 깡그리 무시된 문단 관련 태그

HTML 문서를 읽어 올 때 문단 관련 태그를 모두 바탕글 스타일로 읽어오고 있습니다. 원래 HTML은 스타일이 없지 않느냐고요? 아니요. HTML은 스타일이 없더라도 존재합니다. 그 자체로 구조적 문서를 이루기 때문이죠. 그리고 문단 관련 태그가 각각의 기능을 가지고 있는 기능성 구조를 이루고 있습니다. 예컨대 P 태그는 당연히 문단 태그입니다. 그것만 있느냐? H1, H2, …, H6 태그도 문단 기능이 있어서 P 태그 없이도 문단을 구성할 수 있습니다. 그밖에 인용문을 가리키는 blockquote 태그, 입력 내용을 그대로 보여주는 PRE 태그 등도 P 태그 없이 문단을 구성할 수 있습니다. 제가 아는 태그만 주워섬겨도 이 정도네요.

그런데 지금 ᄒᆞᆫ글 씨께서는 모조리 뭉개버리고 바탕글이라는 스타일 하나만 남겼습니다. 구조적인 문서를 읽어다가 비구조적인 문서를 만들어 버린 셈이 되었네요.

1.2. CSS도 좀 챙겨!

ᄒᆞᆫ글 씨! 여보세요! CSS는 HTML의 스타일이거든. 그건 도대체 어디에다 팔아먹은 거냐고? 도대체 알 수가 없는 일입니다.

게다가 HTML 문서를 읽어 올 때나 저장할 때 CSS 파일을 전혀 인식하지 않습니다. 저장할 때야 HTML 문서 안에 스타일을 포함시키기 때문이라지만, 읽어올 때는 CSS 내용을 읽어 와야 옳다고 생각하는데요.

요(要)는 HTML은 구조와 내용이 분리된 언어입니다. 그것을 ᄒᆞᆫ에서 읽어왔는데, 그 구조를 모두 없애버리면(문단 태그와 DIV 태그를 모두 없애 버리면) 굳이 읽어 들여야 할 이유가 없지 않을까요? 그것을 다시 저장하면 “구조적 문서”가 “비구조적 문서”로 바뀌므로 오히려 손해가 되는 측면도 있습니다.

더구나 다른 이름으로 저장에서 HTML 문서로 저장하거나, 웹브라우저로 보내기를 하거나, 웹서버로 올리기를 하거나, 모두 HTML 문서의 형태가 중시되는데, 아예 CSS는 전혀 고려하지 않는 모습을 보이고 있습니다. 특히 ᄒᆞᆫ글2010에서 새로 추가된 블로그로 올리기 기능도 실제로는 HTML 형식으로 보내게 되어 있으니 더욱 문제는 심각하다고 할 수 있습니다.

1.3. 결론

ᄒᆞᆫ글 씨! 여보세요! HTML 문서 읽어오기나 HTML 저장하기 등의 기능은 빛 좋은 개살구거든. 그냥 읽어오기에 앞서 “이 기능은 그저 내용만 확인할 수 있습니다.”라고 안내문이나 넣지 그래.

그게 아니라면 좀 더 확실히 지원하라고. CSS도 읽어서 ᄒᆞᆫ글 스타일로 변환하고. HTML로 저장할 때도 CSS 이용할 수 있는 옵션을 좀 만들어 달라고.

이 글은 한컴오피스2010에 포함된 ᄒᆞᆫ글에서 작성한 문서입니다.
일부 깨져 보이는 글자는 일부러 수정하지 않고 두었습니다. 그에 대한 팁은 나중에 올리겠습니다.

왕미친세상

2010년 2월 12일 금요일

블로그 꾸미기에 유용한 웹사이트

추천 배너 배치

떠다니는 메뉴

관련 문서

내부 문서

외부 문서

2010년 2월 6일 토요일

IE6 No More 수정

원래의 코드

BLUEnLIVE 님이 한글로 고쳐준 코드

한글 메시지를 다시 고친 코드

링크 주소를 코친 코드

관련 문서

2010년 1월 15일 금요일

닫는 괄호 표기 버그

벌레의 유형

개발자의 답변

벌레의 발견

글꼴 실험 시작

10포인트 글꼴 테스트

10포인트보다 큰 글꼴의 크기별 테스트

벌레의 원인

비슷한 벌레

관련 문서

내부 문서

외부 문서

2009년 12월 30일 수요일

HTML 태그 해석 오류 문제

도대체 무슨 짓을 하는 거냐, ᄒᆞᆫ글?