왕미친세상: 웹브라우저

레이블이 웹브라우저인 게시물을 표시합니다. 모든 게시물 표시

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]

2009년 12월 29일 화요일

리사이즈 브라우저 사용법 - 1. 기본 사용법

예전에 써 본 적이 있는 리사이즈 브라우저를 이용한 특이한 창 크기 변경 방법입니다. 사실 이번에 발견한 사용법을 알았다면 아마 Firesizer(파이어사이저) 파이어폭스 부가 기능은 설치하지 않았을는지도 모릅니다.

기본 사용법

리사이즈 브라우저에는 기본적으로 몇 가지 프로그램의 창 크기를 변경할 수 있습니다. 그 프로그램은 인터넷 익스플로러와 파이어폭스와 같은 웹브라우저입니다.

처음 실행 화면

표시 화면

위의 처음 실행 화면에서 창 크기를 바꿀 창을 선택합니다. 이해가 안 된다면, 아래 표시 화면을 보고 작업하기 바랍니다.

가장 먼저 앞서 말했듯이 창 크기를 바꿀 창을 선택합니다. 위 표시 화면에서 자주색 테두리 부분입니다.
- 만약 저 창이 없다고 여겨지면, Resize (빨간 네모) 옆의 Refresh를 한 번 클릭해 줍니다. 그러면 현재 존재하는 창을 보여줍니다. 참고로 인터넷 익스플로러와 파이어폭스가 함께 존재한다면, 인터넷 익스플로러 창이 화면에 보이게 됩니다. 저 자주색 테두리 부분을 클릭하여 창을 선택하면 됩니다.
그 다음으로 바꿀 창의 크기를 정합니다. Sizes 부분에서 1024x768 (단축키는 Alt+1)(파란 네모)을 선택한 다음 Resize를 클릭한다. 일단은 해보는 겁니다.
마지막으로 Resize (빨간 네모) 부분을 클릭하면 창 크기를 바꾸어 줍니다.

그러면 아래처럼 바뀝니다. 아래 그림에서 파이어폭스의 제목 표시줄(자주섹 테두리), 파이어폭스의 상태 표시줄의 파란 네모 부분을 살펴보시면 창 크기가 변경되었음을 알 수 있습니다. 파이어폭스의 상태 표시줄의 파란 네모 부분은 Firesizer 부가 기능이 알려주는 창의 현재 크기입니다. 물론 창 크기 변경도 가능합니다.

리사이즈 브라우저를 이용하여 1024x768 크기로 바뀐 파이어폭스 창

위 사용법을 참조하여 방금 크기를 바꾼 창의 크기를 800x600으로 바꾸면 아래와 같습니다.

리사이즈 브라우저를 이용하여 800x600 크기로 바뀐 파이어폭스 창

위 사용법을 참조하여 방금 크기를 바꾼 창의 크기를 640x480으로 바꾸면 아래와 같습니다.

리사이즈 브라우저를 이용하여 640x480 크기로 바뀐 파이어폭스 창

일부러 바탕 화면에서 같은 부분을 세 번 잡았습니다. 이 기능은 오픈 캡처의 마지막으로 캡처한 영역 캡처하기를 이용했습니다. 바탕 화면에 다른 아이콘이 존재했으나 비교를 위해 편집했습니다. 양해 바랍니다.

슬라이드쇼로 바꾸면 다음과 같습니다.

리사이즈 브라우저를 이용하여 1024x768 크기로 바뀐 파이어폭스 창

리사이즈 브라우저를 이용하여 800x600 크기로 바뀐 파이어폭스 창

리사이즈 브라우저를 이용하여 640x480 크기로 바뀐 파이어폭스 창

2009년 5월 11일 월요일

티스토리에서 치환자 출력하기

티스토리에서 스킨 치환자 출력하기 팁은 금칙어 피해가기라는 팁을 응용하였다.

치환자는 어떤 낱말을 그에 해당하는 다른 글귀나 낱말(치환 대상)로 바뀌도록 미리 정해놓은 예약어를 가리킨다. 이때 그러한 예약어인 치환자를 설명할 때조차 치환 대상으로 바뀌는 일이 종종 있어서, 불편을 끼치기도 한다.

여기에서는 티스토리에서 쓰이는 스킨 치환자가 다른 낱말로 바뀌는 일이 있어서 그것을 설명하는 글 등에서조차 사용할 수 없어 불편을 사고 있고, 그것을 해결하는 팁을 마련하였다.

팁텍

먼저 필유 님의 티스토리에서 치환자 혹은 대괄호([]) 입력하기라는 글을 보자. 그 글은 치환자를 화면에 출력하는 팁을 소개하는 기사인데 몇몇 웹브라우저에서는 정상적으로 보이지 않는 부분이 있다.

모질라 파이어폭스 3 화면

마이크로소프트 인터넷 익스플로러 6 화면

모질라 파이어폭스의 선택한 부분의 소스 보기 화면

문제가 된 부분

위의 마지막 그림에서 티스토리에서 과 같은 형태라는 부분과 그 아랫줄의 로 태그를 닫지라는 부분에서 조금 이상하다.

필유 님의 해결 방법

이 부분에서 필유 님이 무엇인가를 설명하려고 했었음을 알겠으나, 정작 그 정확한 내용은 알 수 없었다. 필유 님은 치환자에 해당하는 글귀를 티스토리 편집기에서 입력하고 싶다는 글을 썼다. 아니 엄밀히 말해 티스토리 편집기에서 입력한 뒤 게시글에서 치환자에 해당하는 글귀가 나타나게 하고 싶다는 뜻이었다.

필유 님이 사용한 방법은 대괄호인 '['과 ']'에 해당하는 HTML 엔터티(HTML entity) 문자로 바꾸어 입력하는 방법이다. 그에 따라 [와 ]의 아스키값인 91과 93을 이용하여 각각 [과 ]으로 나타낼 수 있다고 하였다.

그러나 필유 님은 쓰기가 완료된 글에서는 엔터티 문자를 이용한 이 방법에 오류가 발생할 수 있음을 예견하였다.

그래픽 이미지로 바꾸기

금칙어 피해가기 팁에서도 소개했듯이 해당 글귀를 그래픽으로 고치면 된다.

예제 그림

위 예제 그림에서 사용된 글귀를 잘 살펴보기 바랍니다.

HTML 코드 이용하기

금칙어 피해가기 팁에서도 썼지만, 그래픽 이미지를 만들어 올리는 것은 보여주고 싶은 내용을 그대로 그래도 보여줄 수 있다는 점에서 매우 유용하지만, 그래픽 이미지는 텍스트보다 그 크기가 크고, 화면 좌우 폭의 제한이 있는 경우에는 왼쪽이나 오른쪽이 잘리는 경우도 있는 단점이 존재한다. 또한 티스토리처럼 스킨의 변형이 화면 구성(레이아웃)에 영향을 주는 경우에는 의도하지 않은 결과를 보여줄 수도 있다.

이럴 경우 금칙어 피해가기 팁에서 사용한 더미 태그를 이용할 수 있다.

다만 더미 태그를 사용할 때 다음과 같은 목표를 세웠습니다.

우선 화면에는 예제 그림처럼 보여야 합니다.
복사했을 때 그 내용(텍스트)이 그대로 복사되어야 합니다. 다만 그 뒤에 숨어 있는 HTML 코드가 제대로 복사되었는지는 고려하지 않습니다.

위의 두 목표를 고려하여 다음과 같이 작업하였습니다.

일단 티스토리 편집기에서 글을 작성한 뒤에 임시 저장합니다. 위의 글귀는 두 개의 티스토리 스킨 치환자가 있으므로 제대로 나타내지 못합니다.

티스토리 화면에서 위와 같이 입력하면 소스코드는 다음과 같습니다. 아래 그림에서 분홍빛 밑줄 부분에 치환자가 나타나 있습니다.
미리 보기를 하면 다음과 같습니다.

흠, 치환자가 제대로 나타나지 않습니다.
티스토리 편집기의 HTML 편집 모드로 바꿉니다.

치환자 부분을 찾습니다. 치환자는 [##_로 시작하는 경우가 많습니다. 치환자를 찾으면 여는 대괄호 다음에 <b></b>라는 더미 태그를 넣습니다. 더미 태그를 삽입한 다음 소스 부분을 살피면 다음과 같습니다. 빨간 글자를 잘 살펴보세요.

<p style="font-size: 1.5em;"><span style="font-weight: bold; color: blue;"><span style="color: white; background-color: red;">[<b></b>##_blog_link_##]</span>와 <span style="color: white; background-color: blue;">[<b></b>##_title_##]</span></span><span style="font-weight: bold; color: blue;">는 어떻게 보일까?</span></p>

미리 보기를 하여 정상적으로 보임을 확인한 뒤에 저장한다.

모질라 파이어폭스 v3.0.10 화면. 정상적으로 잘 보인다.
인터넷 익스플로러 v6 sp2 화면. 정상적으로 잘 보인다.

참고로 여기에서 삽입하는 <b></b> 코드는 "글씨를 굵게" 만드는 코드입니다. 코드가 단순해서 써먹기 좋습니다.

문제점

이 방법도 완벽하지는 않습니다. 물론 위에서 제시한 두 목표를 모두 만족했습니다. 그러나 (1) 툴팁에는 적용할 수 없고, (2) 복사나 편집했을 때 <b></b>라는 더미 태그가 사라지는 경우가 있기 때문입니다. 다만 더미 태그가 사라지는 경우는 고치지 않으려 합니다. 복사했을 때 화면이 깨지게 되며, 그럴 경우 (복사 금지된) 원본을 복사했는지를 알 수 있는 한 방법이 되기 때문입니다. 편집할 때는 이 더미 태그 작업을 가장 마지막에 함으로써 해결할 수 있습니다. 더미 태그가 적용된 근처를 편집하면 더미 태그가 사라지므로(대부분의 HTML 편집기가 가지고 있는 HTML코드 최적화 기능 때문입니다.) 주의할 필요가 있습니다.
한편 툴팁에는 필유 님이 제안하신 엔티티 문자를 써도 제대로 나타낼 수 없습니다.
아래의 글자 1은 HTML 더미 코드로 나타낸 원본이고, 글자 2는 일단 글을 저장한 뒤에 마우스를 이용하여 복사한 부분입니다. 그림은 위에서 사용한 예제 그림을 옮겨 왔습니다. 글자 1과 그림은 서로 같게 보여야 하며, 글자 2와 그림은 서로 다르게 보여야 합니다.

글자 1 : [##_blog_link_##]와 [##_title_##]는 어떻게 보일까?

글자 2 : [##_blog_link_##]와 [##_title_##]는 어떻게 보일까?

그림 : [ ##_blog_link_##]와 [ ##_title_##]는 어떻게 보일까?

위의 글자 1과 그림의 내용이 서로 다르게 보인다면, 자신이 사용하는 웹브라우저 이름, 버전 등을 적어 주시면 확인하여 해결책을 마련해 보겠습니다.

왕미친세상

2010년 2월 6일 토요일

IE6 No More 수정

원래의 코드

BLUEnLIVE 님이 한글로 고쳐준 코드

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

링크 주소를 코친 코드

관련 문서

2009년 12월 29일 화요일

리사이즈 브라우저 사용법 - 1. 기본 사용법

기본 사용법

관련 문서

내부 문서

외부 문서

2009년 5월 11일 월요일

티스토리에서 치환자 출력하기

팁텍

필유 님의 해결 방법

그래픽 이미지로 바꾸기

HTML 코드 이용하기

문제점

관련 문서