'구글 크롬'에 해당되는 글 2건

  1. 2010.02.07 IE6 No More 수정 (2)
  2. 2009.12.30 리사이즈 브라우저 사용법 - 2. 옵션 설정

IE6 No More 수정

2010.02.07 15:02 from 미쳐보자

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]

관련 문서

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


Posted by koc/SALM 트랙백 0 : 댓글 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. 앞서 밝혔듯이 정확하지 않습니다 [본문으로]
Posted by koc/SALM 트랙백 0 : 댓글 0

티스토리 툴바