'웹브라우저'에 해당되는 글 5건

  1. 2010.09.23 GotD - AllWebMenus
  2. 2010.02.07 IE6 No More 수정 (2)
  3. 2009.12.30 리사이즈 브라우저 사용법 - 2. 옵션 설정
  4. 2009.12.29 리사이즈 브라우저 사용법 - 1. 기본 사용법 (2)
  5. 2009.05.12 티스토리에서 치환자 출력하기 (2)

GotD - AllWebMenus

Giveaway of the Day - AllWebMenus

하루에 하나씩 정품 소프트웨어를 주는 Giveaway of the Day 홈페이지에서 2010년 9월 22일AllWebMenus 프로그램을 준다고 합니다.

AllWebMenus-0.png
Giveaway of the Day 홈페이지 - 오늘은 AllWebMenus 프로그램이 공짜!

프로그램 설명

AllWebMenus(올웹메뉴스) 프로그램

웹사이트를 위한 강력한 크로스브라우저 DHTML/JavaScript 메뉴를 짧은 시간에 만드세요.

이미 만들어진 여러 가지 멋진 테마를 이용하여 쉽게 드롭다운 메뉴, CSS 메뉴, AJAX 효과, 슬라이드 메뉴, 떠다니는 메뉴, 메가 메뉴 등을 만드세요. 어떤 프로그래밍도 없이 웹사이트 또는 블로그를 위한 메뉴를 만들 수 있습니다. 모든 웹브라우저CMS 플랫폼(드루팔, 줌라 등), 웹사이트 툴(드림위버, 익스프레션 웹 등)을 지원합니다. 쉽게, 그리고 프로그래머 없이도 비주얼하게, 그러면서도 프로그래머를 위한 강력한 기능(APIJavascript Command 등을 통해)을 갖추었습니다.

 

쉽게 메뉴의 위치를 웹페이지의 원하는 영역에 자리 잡게 하려고 다음과 같은 3개의 유연한 옵션을 사용합니다.

  • 브라우저 창에 상대적인 위치
  • 페이지 요소(DIV, TABLE 등)에 상대적인 위치
  • 페이지 이미지(“logo.jpg”)에 상대적인 위치

주요 기능

  • 멋진 메뉴를 위해 이미 만들어진 테마/예제 제공
  • 풍부하고 직관적인 사용자 인터페이스
  • 웹사이트 툴(드림위버 등) 및 CMS 플랫폼 지원
  • 다양한 버튼, 아이콘, 뷸렛, 화살표, 배경
  • 다양한 웹브라우저를 위한 분할된 자바스크립트를 가진 최적화된 엔진
  • Menus populated EITHER by items within your project OR “on-the-fly”, using on-page UL LI items
  • 유니코드 텍스트 지원
  • 우횡서(Right-to-Left language / RTL) 지원 (아랍어, 히브리어 등). 참고로 교과서의 한글은 좌횡서입니다.
  • 드림위버 확장/NetObjects Fusion 컴포넌트 등
  • 더 자세한 정보

메뉴 예제 웹페이지 - http://www.likno.com/examples.html

Special Upgrade Offer: 10% OFF!
Likno Software is offering a 10% discount on the AllWebMenus retail price ($59.95) when you decide to upgrade to a License with updates and support in the future. How? While logged into your Likno User Area account, go to the Main Area and click on the “Upgrade Licenses” link of the AllWebMenus section. From that page you can upgrade at 10% OFF.

Note: “Giveaway of the Day” 라이선스는 현재 제품에 한합니다. 이 라이선스는 앞으로 업데이트 및 기술지원을 하지 않습니다.

프로그램 정보

  • 사용자 평가 (2010년 9월 23일 12:53:30 현재) : 좋아 365 / 싫어 169 (사용자 평가 보러 가기)
  • 시스템 요구사항

    • 운영체제 : Windows 2000/2003/XP/Vista/7
    • 하드 디스크 여유 공간 : 25 MB (설치용)
    • 기타 요구사항 : Internet Explorer 4 이상; Netscape v6 이상; Opera v6 이상; Mozilla v1 이상; Firefox v0.1 이상; Konqueror v2 이상; Google Chrome; Safari 및 모든 Apple 기반의 브라우저, iPhone/iPad.
  • 제공자 : Likno Software (릭노 소프트웨어)
  • 제공자 홈페이지 : http://www.likno.com/allwebmenusinfo.html
  • 파일 크기 : 9.78 MB
  • 가격 : 이 프로그램은 59.95 달러입니다. 그러나 Giveaway of the Day 방문자에게는 시간 제한(time-limited)으로 무료로 제공됩니다.
  • 시간 제한 : 2010년 9월 22일 오후 4시부터 23일 오후 4시까지 (한국 시간)

다운로드 및 설치

Giveaway of the Day - AllWebMenus 페이지에서 정해진 기간 동안 다운로드할 수 있습니다.

다운로드 받은 파일의 압축을 풀고, readme.txt 파일을 잘 읽고 실행하십시오. 이 readme.txt 파일은 다운로드 받은 모든 압축 파일 안에 들어 있습니다. 조심스럽게 소프트웨어를 설치한 뒤에 활성화하면 됩니다.

AllWebMenus-1.png
압축 푼 뒤의 디렉터리

위 그림처럼, 압축을 풀면, 파일이 둘 또는 셋 나타나게 됩니다. 이때 readme.txt 파일과 Setup.exe 파일은 반드시 존재합니다.

AllWebMenus-2.png
활성화한 뒤 첫 실행 화면 1 - 환영 메시지

AllWebMenus-3.png
활성화한 뒤 첫 실행 화면 2 - 메인 화면

AllWebMenus-4.png
활성화한 뒤 첫 실행 화면 3 - About 화면 및 라이선스 확인

약관 및 조건

당신이 Giveaway 기간에 다운로드하여 설치한 소프트웨어에 대해 다음과 같은 중요한 제한이 있음을 기억하기 바랍니다.

  1. 무료 기술 지원을 받을 수 없습니다. (No free technical support)
  2. 다음 버전의 무료 업그레이드를 받을 수 없습니다. (No free upgrades to future versions)
  3. 엄격하고 순수하게 비상업적 사용만 허용됩니다. (Strictly non-commercial usage)

이 소프트웨어 제품은 묵시적이든 명시적이든 어떠한 종류의 보증없이 "있는 그대로"("AS IS") 제공됩니다. 제한 없이, 법률로써 허용되는, 다운로드한 소프트웨어 제품의 품질 및 성능을 비롯한 모든 위험을 최종 사용자가 부담해야 합니다.
THIS SOFTWARE PRODUCT IS PROVIDED "AS IS" WITHOUT ANY WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED. WITHOUT LIMITATION, TO THE FULLEST EXTENT ALLOWABLE BY LAW, END USER ASSUMES THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE DOWNLOADED SOFTWARE PRODUCT.

기타

  • 한글/한국어 지원
    • 설치 프로그램에서 한글/한국어 지원 : 아니오 (영어)
    • 실행 시 프로그램 메뉴에서 한글/한국어 지원 : 아니오 (영어)
  • 설치 시 및 실행 시 작업

    • 설치 시 프로그램 종료 : 아니오.
    • 설치 시 툴바 설치 : 아니오.
    • 설치 후 자동 업데이트 : 사용자 설정. 다만 프로그램 라이선스에서 업데이트를 제한하고 있습니다.
    • 설치 후 재시작 : 아니오.
  • 설치 시 사용자 등록 : . 등록 정보를 기록하면 바로 활성화 코드를 보여줍니다.
  • 설치 및 실행 시 시스템 복원점 설정 : 아니오.
  • 설치 시 라이선스 : 평가판
  • 임시 파일 : 설치 과정에서 임시 폴더(%TEMP%)에 we###.tmp 파일(#은 숫자를 뜻합니다. 예 - we287.tmp)이 숨김파일로 만들어집니다. 이 파일을 복사하여 이름을 바꾸어(예 - youtube_music_downloader(GotD).exe) 백업해 두면 나중에 다시 설치할 수 있습니다.
  • 기타 : 비스타에서는 프로그램을 설치하거나 활성화할 때 관리자 계정(administrator)이 필요할 수도 있습니다.

관련 문서

내부 문서

  1. GotD - Paragon Virtualization Manager 9.5 Personal (English) - 다운로드 등에 대한 설명
  2. GotD - YouTube Music Downloader 3.2 - readme.txt 파일 등에 등록번호가 들어 있을 경우 백업하는 방법에 대한 설명
  3. GotD - Wise Disk Cleaner 5.2 Professional - Activate.exe 파일을 실행함으로써 활성화하는 방법에 대한 설명
  4. GotD - Wondershare Photo Collage Studio 4.2.12 - 이메일로 등록 번호를 받는 경우 활성화하는 방법과 백업하는 방법에 대한 설명

  5. GotD - Audio Speed Changer Pro - 포터블 버전이 포함된 경우에 대한 설명

외부 문서

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

'소프트웨어 > Giveaway' 카테고리의 다른 글

GotD - Odin Blu-ray to HD Ripper 4.0  (0) 2010.09.27
GotD - Golden Autumn 3D Screensaver  (0) 2010.09.26
GotD - AllWebMenus  (0) 2010.09.23
GotD - PPT2Video Pro  (0) 2010.09.22
GotD - DTweak  (0) 2010.09.20
GotD - Fantastic Flame Screensaver  (0) 2010.09.19
Trackback 0 Comment 0

IE6 No More 수정

IE6 no more logo

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

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

원래의 코드

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

[code css; html-script: false] <!--[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 style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

BLUEnLIVE 님이 한글로 고쳐준 코드

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

[code css; html-script: false] <!--[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 style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>구닥다리 웹브라우저를 사용하시는군요!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>본 사이트를 원활하게 보실 수 있도록 웹브라우저를 업데이트 하세요.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> [/code]

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

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

[code css; html-script: false] <!-- 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 style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

링크 주소를 코친 코드

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

[code css; html-script: false] <!-- 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 style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>         <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>         <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>             <div style='font-size: 13px; font-weight: bold; margin-top: 12px;'>저는 당신 컴퓨터의 안전을 기원합니다!</div>             <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>당신의 컴퓨터가 좀 더 안전하기를 바란다면 웹브라우저를 바꾸기 바랍니다.</div>         </div>         <div style='width: 75px; float: left;'><a href='http://www.mozilla.or.kr/ko/firefox/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Firefox 3.5 또는 상위 버전 구하기'/></a></div>         <div style='width: 75px; float: left;'><a href='http://www.microsoft.com/korea/windows/internet-explorer/worldwide-sites.aspx' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Internet Explorer 8 또는 상위 버전 구하기'/></a></div>         <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Safari 4 또는 상위 버전 구하기'/></a></div>         <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Google Chrome 구하기'/></a></div>     </div> </div> <![endif]--> <!-- IE6 No More 배너 끝 --> [/code]

관련 문서

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


Trackback 0 Comment 2

리사이즈 브라우저 사용법 - 2. 옵션 설정

앞서 기본 사용법에 대해 설명했습니다. 이번에는 좀 더 고급스러운 사용법에 대해 알아보기로 합니다.

환경 설정

리사이즈 브라우저는 그 사용법이 무척 간단합니다. 하지만 설정에서 몇 가지 난감한 점이 있어서 이렇게 글을 작성하게 되었습니다.

옵션 설정 화면

옵션 설정 화면

위 화면에서 옵션 설정은 옵션브라우저 설정으로 나뉩니다. 옵션 설정을 마친 뒤에는 오른쪽 위의 Save를 클릭하여 옵션을 저장해야만 적용됩니다.

옵션 (Options)

옵션은 위와 같이 4 항목으로 이루어져 있습니다.

  • Center browser on screen after resize : 브라우저 창의 크기를 변경한 뒤 화면 가운데로 배치
    • 기본 값으로는 왼쪽 상단, 곧 좌표값으로는 (0, 0) 위치로 창을 옮깁니다. 이 옵션을 체크하면, 화면 왼쪽 상단이 아닌 화면 중앙으로 배치합니다.
  • Include Start Menu height in resize : 리사이즈에 시작 메뉴의 높이도 포함
    • 이 옵션을 체크하면, 말 그대로 시작 메뉴의 높이도 이 프로그램에서 조절할 수 있다는 뜻입니다.
  • Automatically refresh for new browsers : 새로운 웹브라우저를 위해 자동으로 다시 읽기
    • Refresh 아이콘을 클릭하지 않아도 자동으로 웹브라우저 목록을 다시 읽는다는 뜻입니다.
  • Stay on top of all other windows : 모든 윈도우보다 위에 보입니다.
    • 이 옵션을 설정하면, 이 프로그램의 윈도를 다른 윈도가 가릴 수 없습니다. 어차피 트레이 아이콘을 사용하면 별로 쓸모는 없지만, 가끔은 필요한 사람이 있으리라 생각합니다.

브라우저 설정

브라우저 설정에서는 리사이즈 브라우저 프로그램의 작동 원리를 설명하고 있습니다.
작동 원리에 따르면, 리사이즈 브라우저 프로그램은 특별히 웹브라우저를 지정하여 창 크기를 변경하는 프로그램이 아닙니다. 그저 기본 값으로 지정된 프로그램이 가장 널리 알려지고 보급된 두 프로그램, 곧 인터넷 익스플로러넷스케이프일 뿐입니다. 리사이즈 브라우저는 단지 제목 표시줄캡션 텍스트를 읽어와서 작동합니다.

여러 가지 웹브라우저 화면

여러 가지 웹브라우저 화면

위 여러 가지 웹브라우저 화면을 보면 제목 표시줄캡션 텍스트가 무엇인지 아시겠습니까?

여러 가지 웹브라우저의 제목 표시줄 캡션

여러 가지 웹브라우저의 제목 표시줄 캡션

위 그림에 나타난 연두색 테두리 부분파란색 테두리 부분제목 표시줄캡션 텍스트입니다. 그리고 자주색 네모브라우저 이름입니다. 다만 맨 아래에 보이는 Google 부분정확하지 않기 때문에 ? (물음표)를 해 두었습니다.

설정하기 전까지 찾은 브라우저 창은 다음과 같이 두 개입니다.

설정하기 전까지 찾은 브라우저 창 목록

설정하기 전까지 찾은 브라우저 창 목록

위 여러 가지 웹브라우저의 제목 표시줄 캡션 화면을 바탕으로 브라우저 설정을 해 봅시다.

브라우저 설정을 실제로 구성하는 곳

브라우저 설정을 실제로 구성하는 곳

현재 설정된 값은 위와 같이 세 개입니다. Microsoft Internet Explorer, Netscape, Mozilla는 유명한 웹브라우저이기는 하지요. 왜 파이어폭스는 없냐는 의문이 생길 수 있습니다. 파이어폭스의 정확한 이름은 Mozilla Firefox 입니다. 다시 말해 위의 Mozilla라는 이름을 찾으면 당연히 파이어폭스도 찾게 됩니다.

위 그림에서 찾아낸 브라우저 이름을 열거하면 다음과 같습니다. 편의상 이름 앞의 줄표(하이픈)은 생략합니다. 다만 나중에 설정에서는 하이픈을 넣는 쪽이 낫습니다.

일단 파이어폭스익스플로러는 이미 찾았으니 추가할 필요가 없지요. 그럼 더 월드 브라우저구글 크롬을 추가하겠습니다.

옵션에서 위의 브라우저 설정을 실제로 구성하는 곳을 클릭한 뒤에 인서트 키(Insert)를 누르면 항목 추가 모드로 바뀝니다. 추가할 내용은 더 월드Google입니다. Mozilla Firefox의 경우처럼 문자열 일부만 입력해도 되므로 일단 그렇게 합니다. 다만 입력할 때 대문자와 소문자를 구별합니다.

Remember, they are case sensitive.

인서트 키(Insert) 눌렀을 때

인서트 키(Insert) 눌렀을 때

넣고자 하는 문자열(제목 표시줄의 브라우저 이름)을 입력한 뒤 엔터(Enter)를 입력하면 항목이 추가됩니다.

항목 추가

항목

추가된 항목

추가된 항목

다시 한 번 입력을 반복하여 구글 크롬을 위한 문자열도 추가합니다.

작업을 마친 뒤에는 옵션 화면의 오른쪽 위의 Save를 클릭하여 저장합니다.

Save를 클릭하여 저장

Save를 클릭하여 저장

처음 화면에서 Refresh를 클릭하여 브라우저 목록을 다시 읽어 옵니다.

일단 Refresh

일단 Refresh

목록 확인

목록 확인

목록을 확인하면 올바르게 추가되었는지를 알 수 있습니다. 이때 방금 추가한 문자열을 더 정확하게 고칠 수도 있습니다.

주의 사항

창 크기를 바꾸려고 선택한 창이 리사이즈 브라우저가 아닌 다른 창에 가려지면 창의 크기가 바뀌지 않으므로 주의하기 바랍니다.

관련 문서

내부 문서

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


  1. 정확한 이름은 <span style="color: blue;"><strong>더 월드 브라우저</strong></span>이나 여기에서는 보이는 대로만 표시합니다. 그런데 영 거시기한 이름이네요. [본문으로]
  2. 앞서 밝혔듯이 정확하지 않습니다 [본문으로]
Trackback 0 Comment 0

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

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

기본 사용법

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

처음 실행 화면

처음 실행 화면


표시 화면

표시 화면

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

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

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

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

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

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

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

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

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

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

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

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

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

관련 문서

내부 문서

외부 문서

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


Trackback 0 Comment 2

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

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

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

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

팁텍

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

모질라 파이어폭스 3 화면

모질라 파이어폭스 3 화면


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

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


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

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


문제가 된 부분

문제가 된 부분

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

필유 님의 해결 방법

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

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

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

그래픽 이미지로 바꾸기

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

예제 그림

예제 그림

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

HTML 코드 이용하기

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

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

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

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

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

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

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

    흠, 치환자가 제대로 나타나지 않습니다.
  3. 티스토리 편집기의 HTML 편집 모드로 바꿉니다.
  4. 치환자 부분을 찾습니다. 치환자는 [##_로 시작하는 경우가 많습니다. 치환자를 찾으면 여는 대괄호 다음에 <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>
  5. 미리 보기를 하여 정상적으로 보임을 확인한 뒤에 저장한다.
    파이어폭스 화면

    모질라 파이어폭스 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과 그림의 내용이 서로 다르게 보인다면, 자신이 사용하는 웹브라우저 이름, 버전 등을 적어 주시면 확인하여 해결책을 마련해 보겠습니다.

관련 문서

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


Trackback 0 Comment 2
prev 1 next


티스토리 툴바