http://browsershots.org/

아는 사람은 이미 알고 있는 웹사이트를 각종 브라우저에 따라 스크린샷을 제공하는 사이트입니다. 결과 화면도 느리고, 요청이 많으면 나중에 시도하라는 메세지도 나옵니다. 그렇기 때문에 개발용으로 사용하기보다는 그냥 자신의 블로그가 다른 OS의 다른 브라우저에서 어떻게 보이는지 재미삼아 해보세요.

IETester 새로운 버전

Web standards/ETC | 2008.09.23 22:40 | leezche
대충 요랬던 IETester가 다음과 같이 버전업 되었네요.
 
사용자 삽입 이미지


탭브라우징이 대세이긴 한가 봅니다. 어쨌거나 정말 편해졌지 뭡니까.
다시 텍큐 만들고 다듬는 작업에 박차를 가해야겠습니다.  ^____________________^

IETester Download : http://www.my-debugbar.com/wiki/IETester/HomePage

얼마전 MS가 IE7을 내 놓으면서 골치거리가 하나 더 생겼다.
크로스브라우징에 하나의 브라우저가 더해진것이다.
보통 FF, IE6, Opera 세개의 브라우저 맞춤 작업을 진행했었는데.. 이제는 IE7 이라는 IE6와 같지만 다른 브라우저 하나가 더 생긴 것이다.

IE7 과 IE6는 하나의 운영체제에 동시에 존재하지 못하기 때문에 보통은 노트북을 이용하거나 상황이 여의치 않을때에는 VM(Virtual Machine)이라는 소프트웨어를 이용하여 또하나의 운영체제를 설치한 다음에 IE6또는 IE7을 이용했었다. 또하나의 OS를 설치한다는 것은 그만큼 시스템의 리소스를 차지하기 마련이다. 포토샵, 일러스트등을 사용하는 디자이너들에겐 반갑지 않은 방법이긴 하지만 방법이 없으니 울며겨자먹기다.

버뜨.
방법이 있었다.
http://tredosoft.com/Multiple_IE
이곳에 가면 인터넷 익스플로러를 버전별로 설치하여 사용할 수 있다.
꽤 날렵하게 잘 돌아간다. ^^

설치를 원하는 IE 버전을 선택

설치를 원하는 IE 버전을 선택


현재 내 PC에 깔려 있는 브라우저의 아이콘들

현재 내 PC에 깔려 있는 브라우저의 아이콘들


p.s
그동안 IE6의 크로스브라우징 문제 때문에 내 노트북이 회사에 상주해 있었는데
이제 노트북을 집으로 가져가서 맘 편히 포스팅을 할 수 있을것 같다.

웹페이지 해킹? - IE hack

Web standards/ETC | 2007.02.15 14:08 | leezche
IE7이 나오면서 디자이너들 골치가 더 아파졌습니다.
IE7은 IE6과는 달리 css 표준안을 준수하고 있다고는 하지만, 어쨌거나 FF, IE7, IE6은 모두 다른 view를 보여줍니다. (결국 MS의 구라?)

어떻게든 Cross Browsing 완벽 구현을 추구하는 디자이너에게 고민거리만 하나 더 늘게 됐다고나 할까요. 권장하진 않지만... 급할때 꼭 필요한 것이 hack 입니다.

IE7용 hack -  *:first-child+html
사용예)
#SearchType {  height:18px;}
 *:first-child+html #SearchType { height:20px;}
 



IE6용 hack - *html
사용예)
  .notice ul { padding-left:5px;}
  *html .notice ul {  padding-left:12px;}
 

이로서 css 파일에 IE의 흔적들이 더 깊이 패여지는군요.. 쌍으로다가...



읽어보면 좋은글!
FireJune´s Blog :: 인터넷 익스플로러 7 RC1의 웹표준
인터넷 익스플로러7(이하IE7)의 가장 최근 테스트 버전인 RC1설치해 보았습니다. 베타 버전은 설치를 완료해도 실행 하자마자 죽는 바람에 테스트하지 못했습니다만, RC1은 무사히 실행되는군요. ...
Cross Browsing 가이드
1993년 4월 22일 미국 일리노이 대학에서 일단의 학생들이 개발한 모자이크(Mosaic)라는 작은 공개 소 프트웨어 웹브라우저는 오늘날 웹이 전 세계에 영향을 끼치게 하는 혁명적인 첫 출발이었다. ...


TAG CSS, Hack
태터툴즈 기본스킨을 보면 아이콘이 있다.
이 아이콘에는 rss를 구독할 수 있는 링크 주소가 걸려 있다.
rss주소를 나타내는 치환자로 [##_rss_url_##]을 쓰고 있으니까
<a href="[##_rss_url_##]"><img src="./images/rss.gif"></a>
코드를 이런식으로 작성하면 될것이고,

이를 새창으로 띄우기 위해서는
<a href="[##_rss_url_##]" target="_blank"><img src="./images/rss.gif"></a>
이렇게 작성하면 된다 이렇게 작성하면 안된단다.
<a href="[##_rss_url_##]" onclick="window.open(this.href); return false">
이런식이 되어야 한다. 왜 간단한 target="_blank"를 놔두고 저런짓을 해야만 하는걸까...

웹표준이 좋긴 하지만 너무 과도한건 아닐까 단물 다 빠진 껍을 씹어대듯이 입속가득 불만을 씹다가 그라피티에님에게 자문을 구했다. 왜 저렇게 해야만 하는걸까?

그라피티에님 曰 :  에~~ 그거는 말이죠! 시각장애인을 위한 겁니다. 어떤 링크를 클릭했을때 새창으로 뜨게 된다면 시각장애인은 자신이 기억하고 있는 포커스(위치)를 잃어 버리게 됩니다. 아주 당황스러운 일인거죠. 이렇게 하는 것은 그들을 위한 작은 배려가 아니라 기득권의 횡포를 이제 막아 주는 거죠. onclick은 어떻게 해서든 새창을 띄우고 싶은 사람들의 꼼수인거죠. 어떤 링크를 정말 필요해서 새창으로 열고 싶다면, 오른쪽 버튼 클릭하면 "새창에서 열기"라고 있는데 그걸 이용하면 됩니다.

이상은 언제나 약자의 시선에서 생각하는 그라피티에님 말씀이셨습니다.  짝짝짝~~~~

사실 처음엔 도대체 왜 있는 기능을 없애면서 까지 저래야 하나 싶었습니다. 하지만 제가 시각장애인이라는 생각으로 네이버를 접속해서 검색을 해 봤습니다. 온통 새창 일색입니다. 그러니까 시각장애인은 검색도 하지 말라는... ㅜ ㅜ;;;
IE Developer Toolber 장착 브라우저

[IE Developer Toolber 장착 브라우저]

IE에 add-in 되는 웹문서 분석 툴로  웹 개발뿐만 아니라 css를 주로 다뤄야 하는 디자이너에게도 아주 유용한것 같습니다. 참고로 저는 view DOM과 css를 disable 시키는 기능, div elements 아웃라인을 보여주는 기능, 브라우저를 리사이징해주는 기능등을 주로 사용하는데 도움을 톡톡히 받고 있습니다. 특히 w3c로 바로 연결하여 validate 결과를 볼수도 있습니다.



픽셀 단위의 폰트 사이즈가 왜! (왜 나만 갖고 그래~)
저 처럼 눈이 나쁜 분들이나, 나이 많은 어르신들에게 12px나 혹은 그것보다 더 작은 폰트 사이즈는 버거울수 있습니다. px, pt를 사용함으로서 IE나 FF에서 제공되는 좋은 기능을 원천적으로 못쓰게 되는거죠.

그럼 어떤 폰트 사이즈 단위를~~~
브라우저에서 제공되는 폰트크기 메뉴를 사용할수 있게 하려면 절대크기 키워드나 상대 길이단위를 사용하면 됩니다. 12px와 비슷한 단위를 찾아 보면 절대크기 키워드의 small 이나 0.75em 이 비슷한 모양을 하고 있습니다.
12px : small : 0.75em (비슷한 폰트 사이즈를 나타냅니다)

모양이 모두 조금씩 틀려욧!
디자이너들이 선호하는 픽셀크기 단위를 포기 하고, 절대크기 키워드를 사용한다고 했을때 두 단위 사이의 gap이 크다면 난감한일이 아닐 수 없습니다. 이미지에서 볼수 있듯이 100%일치
한다고 볼수 없습니다.
이를 비교해 보면 일단 같은 브라우저 내에서 12px와 0.75em은 완벽하게 일치하지만 small 키워드는 자간이 훨씬 넓습니다.자간은 매우 민감한 문제입니다. 텍스트가 많은 페이지에서 자간을 small로 했을때 흔히 쓰는 말로 "없어" 보입니다.
그럼 small은 포기? ... ^^ 약간의 조정이 필요하겠죠
자간이 문제였으니까.. 자간을 조정해 보겠습니다. 아.. 그런데. 문제가 하나 있습니다. 자간을 표현하는 방식이 브라우저마다 틀립니다. 뭐가 이렇게 걸리는게 많은지.. - -;;;


비교해 보겠습니다.
아래 이미지에서 처럼 ie에서는 소수점 자간을 표현하지 못하고 있습니다.
결국 letter-spacing:0; 이나 letter-spacing:-0.5px;나 같다는 말이죠.


꽁수를 이용하면 방법이 있을지는 모르겠으나 일단 소수점을 사용하지 않는걸로 하고, 결론을 내리면 다음과 같습니다.
12px = 0.75em (일치)
12px = small, letter-spacing:-1px (비슷)

각자의 웹페이지를 제작하시는 분들 판단에 맡기겠지만, 저는 굳이 방탄웹에서 사용했듯이 small 단위를 사용하지 않고, em 단위를 사용하려고 합니다.(아마 방탄웹이 영문활자를 기본으로 했기때문에 small을 사용해도 문제가 없을수도 있겠죠.)

그동안 폰트 단위때문에 혼돈이 많았는데 이렇게 정리해놓고 보니 속이 다 시원하네요.. ^^


위의 결론을 도출하기 위한 과정에 나온 html 문서입니다. 참고하셔요~~


폰트 단위의 종류

Web standards/ETC | 2006.08.25 02:22 | leezche
홈페이지를 만드는 사람은 종종 그 홈페이지를 이용하는 사람에게 자신의 결과물을 강요하곤 합니다. 방탄웹에도 언급했듯이 가장 대표적인 예가 폰트 사이즈일 것입니다. 디자이너는 보통 픽셀단위의 폰트 사이즈를 사용합니다. 그것이 비단 작업하기 편해서만은 아닐것입니다. 디자이너는 언제 어떠한 경우든 자신의 결과물이 동일하게 보여지길 원합니다. 자존심과 직결되는 문제일수도 있으니까요. 자신이 작업한 포토샵 파일과 프로그램 입히는 과정을 거친 결과물이 조금이라도 틀려지는 날엔 그날로 자신의 프라이드에 상처입고, 프로그래머를 가시눈으로 쳐다보게 될것입니다. 디자이너가 이만한 프라이드도 없다면 그것도 문제아닌가?싶기도 한데 ^^;;;

그 자존심을 조금더 내세워~ 만드는 사람이나 이용하는 사람이나 둘다 만족시키는 방법을 다양한 각도로 찾아 보는건 어떨까요?

방탄웹에 따르면 절대크기 키워드와 퍼센트를 적절히 사용한다고 한다. 아마 익숙치 않은 사람에겐 상당히 골치아플수도 있을것 같습니다. 게다가 IE나 FF 둘다 신경써야 하니까...

공부도 할겸 하나둘 정리해 보려고 합니다.


절대 크기(absolute-size)

글꼴 크기를 지정하지 않았을 경우 기본값은 medium으로 지정됩니다.
  • xx-small
  • x-small
  • small
  • medium (← 기본값)
  • large
  • x-large
  • xx-large

상대 크기(relative-size)

상위 엘레먼트의 현재 글꼴 크기에 의해 결정됩니다.
현재 글꼴 크기가 medium으로 지정되어 있다면 larger는 large로 smaller는 small로 현재 글꼴 크기가 지정됩니다.
  • larger
  • smaller

백분율(percentage)

상위 엘리먼트에 지정된 글씨 크기에 상대적인 크기가 지정됩니다
상위 엘리먼트 글씨 크기가 12pt로 지정되어있는 상태에서 글씨 크기를 120%로 지정했다면 글씨 크기는 14.4pt가 됩니다.

길이 단위

  • em : 1em은 브라우저 기본 글꼴의 100%를 말합니다. 백분율과 같이 상대적인 길이 단위
    브라우저 기본 글꼴 medium이 16px라고 가정 한다면 1em = 16px, 0.75em = 12px
  • px : 글꼴이 화면(모니터)에 출력될때 글꼴이 차지하는 픽셀의 수. 동일 장치 내에서는 절대적 크기를 나타냅니다. 흔히 화면에 표시되는 세로폭의 픽셀수를 나타냅니다.
  • pt : 글꼴이 화면이나 지면에 출력될때 글꼴의 세로폭. 동일 장치 내에서는 절대적 크기를 나타냅니다.


속성별  글꼴 크기 비교 샘플1



글 글꼴 크기 비교 샘플2 : px, pt, em, %비교


다~ 아는거 확인 사살!

firefox에서 폰트 사이즈 키워 보기

explorer에서 폰트 사이즈 키워 보기

safari에서 폰트 사이즈 키워 보기



safari 는 Mcfuture님이 제공해 주셨습니다. (맥북을 쓰고 있는 관계로다가.. )
또 브라우저가 뭐가 있더라..