Firefox에서 임시 인터넷 파일 저장 경로 사용자 설정방법

Miscellaneous/Etc 2007.07.08 07:30
파이어폭스에서 임시로 인터넷 파일을 저장하는 경로를 임의로 변경하는 방법은 아래와 같다.

1. 파이어폭스 주소입력창에서 about:config를 입력한다.
2. 설정 이름중에서 "browser.cache.disk.parent_directory" 항목을 찾는다.
3. 항목에서 오른쪽 마우스 클릭이나 더블 클릭을 하여 설정값을 원하는 폴더로 변경한다.
예) c:\\windows\temp
4. 위 "browser.cache.disk.parent_directory" 항목이 없을 경우에는 설정값들이 보이는 리스트의 빈 영역에서 마우스 오른쪽 클릭을 하여 새로 만들기 -> 문자열 을 클릭하여 새 문자열 작성 창을 연다
5. 새 문자열 값 => "browser.cache.disk.parent_directory" 로 입력하고 확인을 누른다.
6. 문자열 값 입력 => c:\\windows\temp를 입력하고 확인을 누른다.
7. 파이어폭스 브라우저를 닫고 다시 실행하여 사용하게 되면 앞에서 사용자가 설정한 폴더에 임시파일이 저장된다.

    

설정

트랙백

댓글

블로그의 올플래시 페이지 infinite 메뉴 추가

Project/Web 2007.04.15 02:26
예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.


1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.


2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.


3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.


4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.


Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

사용자 삽입 이미지


    

설정

트랙백

댓글

  • 2007.06.23 22:31 ADDR 수정/삭제 답글

    비밀댓글입니다

마우스만으로 파이어폭스 명령 내리기 All-in-One Gestures

Miscellaneous/Etc 2007.03.25 22:44
사용자 삽입 이미지


<
: 뒤로가기
> : 앞으로가기
:지금 보는 탭 끄기(위에서 아래로)
: 새 탭(위로)/새 창(아래로)
: 왼쪽 탭이동
(반대) :오른쪽 탭 이동
아래-오른쪽-아래 :전체 명령 동작표 보기

위 익스텐션은 파이어폭스를 사용할 때 특정 명령을 사용하기 위해서 메뉴로 이동하거나 버튼을 누르지 않고 화면에서 오른쪽 마우스 버튼을 누른 상태에서 기호를 그려서 명령을 내릴 수 있는 기능이다.

키보드의 단축키를 사용하기도 하지만 이 기능은 마우스만을 이용하여 명령을 내릴 수 있고 빠르게 처리할 수 있는 장점이 있다.

특정 기능에 대한 기호는 위 이미지와 같이 익스텐션을 설치한 후 파이어폭스 화면에서 오른쪽 마우스 버튼을 누른 상태에서 '아래->오른쪽->아래' 로 그림을 그리면 새 탭에서 사용가능한 기능들을 확인 할 수가 있다.

먼저 소개한 Tab Effect 1.1과 함께 사용하면 한결 웹브라우징의 재미를 맛볼 수 있을 것 같다.





    

설정

트랙백

댓글

  • 사자구이 2007.03.25 19:57 신고 ADDR 수정/삭제 답글

    호오~, 재밋어보이네요 이거ㅋ

    • jasu 2007.03.27 00:22 신고 수정/삭제

      전 머리가 나쁜지 기호를 자꾸 잊어버리네요...쿠쿠

    • 사자구이 2007.03.27 10:54 신고 수정/삭제

      전 불여우를 안써봐서;;;ㄱ-

    • jasu 2007.03.27 19:15 신고 수정/삭제

      여우 한마리 키워보세요...쿠쿠 로고 제작자는 여우를 연상한 것이 아니라 귀여운 붉은 판다곰을 연상했다고 하더군요...

  • Han Sanghun 2007.03.26 23:47 ADDR 수정/삭제 답글

    저도 mouse gestures 익스텐션 즐겨 사용했었는데...
    시간이 좀 지나니까 안쓰게 되더라고요 ㅋㅋ

    • jasu 2007.03.27 00:25 신고 수정/삭제

      IE Tab을 사용하다보니 사용을 잘 안하게 되기도 하네요...^^

재미있는 파이어폭스의 익스텐션 Tab Effect 1.1

Miscellaneous/Etc 2007.03.24 13:11

사용자 삽입 이미지
탭 이동시에 3D 박스 형태로 화면전환을 하게 해주는 효과다. 예전에 플래시를 이용하여 bitmapData를 이러한 형태로 distrot하는 기능을 구현한 적이 있었는데 비슷한 형태로 화면 전환이 된다...

사용자 삽입 이미지

사용자 삽입 이미지


위 파일을 다운로드 후 실행하면 됨.

    

설정

트랙백

댓글

  • 오호 좋은기능인데 알려주셔서 감사! 그런데 링크가 연결이 일시적인지 저만 그런지 안되는걸요??^^; 블로그 깔끔하시네요!

  • 한번 찾아봤는데요 전 영문판써서 혹시 연결이안되었을수도 있지만 흠..https://addons.mozilla.org/firefox/4258/ 다 같은데 ko가 들어가고 안들어가고이네요 ^^

    • jasu 2007.03.24 14:49 신고 수정/삭제

      저도 들어가 봤더니 링크가 안되더군요 그래서 파일을 올려놨습니다. ^^ 감사합니다.

IE를 firefox 탭안으로...

Miscellaneous/Etc 2007.03.20 20:01
https://addons.mozilla.org/firefox/1419/

파이어폭스를 사용하다 보면 보안이 필요한 사이트나 컨텐츠에 접근할 때 activeX의 문제로 인하여 사용이 불가능한 경우가 있다. 이러한 문제 때문에 불여우 사용을 꺼리는 사용자들이 많고, 나 또한 초기에는 그러한 문제 때문에 불여우의 탓으로 돌리며 사용하지 않았던 것 같다.

위에 링크로 들어가셔서(불여우 브라우저로 들어가야함) 인스톨을 해서 사용하면 불여우를 쓰면서 편하게 IE 페이지를 탭으로 열 수 있다. 표준에 반하는 IE만의 표준과 무분별하게 사용되는 한국 기업들의 activeX로 생긴 문제이기는 하나 다수가 아직까지는 그렇게 사용하고 있으니 어쩔 수 없는 일이다.

사용자 삽입 이미지

위 링크에 들어가서 해당 익스텐션을 설치하면 위 이미지와 같이 페이지에서 오른쪽 마우스 버튼을 클릭하면 컨텍스트 메뉴가 나오는데 IE Tab으로 페이지 보기에서 3개 방법중 하나를 사용하면 현재 페이지를 익스플로러로 열수가 있다.

또 다른 방법으로는 아래와 같이 불여우 오른쪽 하단을 보면 불여우 로고가 보이는데 그곳을 클릭하거나 3개 방법중 하나를 선택하여도 위와 같이 IE로 열 수가 있다.
사용자 삽입 이미지

그동안 국내 웹페이지상의 여러가지 문제로 파이어폭스 사용을 꺼려하신 분들에게는 좋은 익스텐션이 아닌가 생각된다.

이 밖에도 파이어폭스에서 인스톨하여 사용할 수 있는 익스텐션들이 많이 있다.

아래는 블로그의 api를 불여우와 연결하여 불여우를 쓰면서 자신의 불로그에 방문하지 않고 블로그에 글을 쓸 수 있다.
사용자 삽입 이미지

불여우로 원격 블로깅하기는 http://ychur.tistory.com/168 이곳에 가시면 자세히 알아 볼 수 있다.

기타 불여우에서 사용할 수 있는 익스텐션들은 아래 경로로 가시면 다운로드 및 설치를 할 수 있으니 자신이 필요한 기능이 있는지 한번 확인해 보기 바란다.

https://addons.mozilla.org/firefox/extensions/

    

설정

트랙백

댓글

  • 쿵야 2007.03.22 12:37 신고 ADDR 수정/삭제 답글

    덕분에 좋은 팁을 얻었네요^0^
    너무 기쁩니다>ㅅ<
    그동안 파폭을 사용하면서 안되는 사이트를 다시 IE로 열고 하는게 너무 불편했거든요~
    감사합니다^^*

    • jasu 2007.03.22 13:04 신고 수정/삭제

      저도 아는 분의 블로그에 방문했다가 알게되어 편하게 불여우를 사용하고 있답니다. ^^

어도비, 모질라에 스크립트 코드 기증

Programming/Etc 2007.03.06 23:32
어도비는 파이어 폭스 웹 브라우저에서 자바스크립트 프로그램들을 실행시키는데 사용될 소프트웨어를 모질라 재단에 기부할 것임을 밝혔다. 이는 모질라 재단 역사상 최대 규모의 기증이다.

어도비는 지난 화요일(미국 시간), 샌프란시스코에서 개최되는 웹 2.0 컨퍼런스에 발맞추어, 기부 내용을 발표할 예정이다. 이 코드는 어도비와 모질라의 개발자들에 의해 관리되고 운영될 ‘타마린’ 이라는 새로운 오픈 소스 프로젝트의 근간을 이룰 것이다.

어도비 또한 ‘액션 스크립트 버츄얼 머신’ 이라 불리는, 이와 똑같은 소프트웨어를 제공할 예정인데, 이것은 어도비 플래시 플레이어9에서 스크립트 코드를 실행시키는데 사용된다.

모질라 재단의 대표 프랭크 해커는 이 가상 머신이 2008년 1분기까지 파이어폭스 브라우저의 차세대 버전에 삽입될 것이라고 말했다.

어도비 플래시 플레이어 버츄얼 머신에서 사용될 스크립팅 언어는 액션 스크립트로 적힌 프로그램을 실행시키는데, 이는 ECMA 국제 표준인 ECMA 에디션4를 기반으로 하고 있다. 어도비의 소프트웨어 설계 부문 대표 케빈 린치는 MS의 제이스크립트와 기타 유명 자바 스크립트들도 이 표준을 적용하고 있다고 말했다.

그는 “플래시 플레이어9과 함께 지난 6월 선보여진 어도비 스크립트 ‘엔진’의 새로운 버전은 실시간 컴파일러를 사용하여 이전 버전보다 10배 빠른 속도로 프로그램을 실행한다”고 설명했다.

린치는 모질라와의 거래가 어도비에게는 오픈 소스 부문에서 진행한 가장 큰 거래였다고 밝혔다. 또한 이번 결정을 통해 개발자들이 에이젝 스타일의 웹 개발과 미디어와 애니메이션을 위한 플래시를 포함하여, 이러한 프로그램 기술들을 섞고 서로 조합할 수 있게끔 만들려는 어도비의 계획을 한 걸음 더 딛게 하는 계기를 만들었다고 덧붙였다.

“우리는 이러한 공통된 언어 사용을 통해 더욱 더 광범위한 HTML과 플래시 개발자 커뮤니티들을 한 데 모을 수 있다. 똑같은 언어 엔진을 사용한다는 것 자체가 매우 큰 진전이라고 할 수 있다.” (린치)

해커는 우수한 스크립트 엔진이 파이어폭스 브라우저나 썬더버드 이 메일 클라이언트 등을 포함한 오픈 소스 프로젝트들에게는 ‘매우 중요한’ 비중을 차지한다고 말했다. 그는 상당 부분의 파이어폭스와 확장자들이 자바 스크립트를 사용하고 있다고 말했다.

또, 타마린 프로젝트 코드는 파이어폭스 브라우저에 현존하는 자바 스크립트인 ‘스파이더 몽키’를 뒤이을 차세대 자바 스크립트의 근간이 될 것이라고 덧붙였다.

출처 : ZDNet Korea

기사가 나온지 오래된 내용이지만 익스플로러 vs 파이어폭스에서 어떤 브라우저가 우위를 차지할지 궁금해지는 기사다.
    

설정

트랙백

댓글

  • 이레오 2007.03.07 14:27 신고 ADDR 수정/삭제 답글

    음.. 감동적이군요(?)
    모질라 파이어폭스 쓰는 내가 더 좋은 건지..

웹브라우저에 대한 생각...

Design/Web 2007.03.04 04:30
사이트를 만들 때면 사용자의 컴퓨터 해상도에 대한 고민을 하게 되는데 요즘 들어 와이드 모니터들이 많이 늘어나고 기존의 1024x768 사이즈가 표준이 되던 시대도 이제는 어느 정도 지난 시기인 듯 싶다. 노트북만 하더라도 대부분 와이드 모니터를 사용하고 있고 출시되는 lcd 모니터들을 봐도 그러하다.

사이트의 완료 단계에서 가장 마지막에 사투를 벌이는 퍼블리시 관련 팀들은 이런 부분에 대한 고민을 하지 않을 수 없다. 해상도 뿐만이 아니라 브라우저의 종류에 따라서도 표준에 따른 결과 물을 만들어야 하는데, 우리나라의 경우는 90%가 넘는 사용자들이 IE를 사용하고 있기 때문에 IE에 맞춰서 작업을 진행하면 큰 무리는 없으나 글로벌한 사이트의 경우에는 다른 부라우저도 고려해야 한다.

국내에서도 IE가 7.0으로 버전업을 하면서 급속도로 파이어폭스를 사용하는 사용자들이 늘어나고 있는 추세인 듯 하다. 현재만 하더라도 10% 가량의 사용자들이 IE가 아닌 타 브라우저를 사용하고 있다고 하니, IE에만 맞춰서 작업한다는 것은 사이트의 퀄리티를 떨어뜨리는 결과를 낳게 된다.

나 도 얼마 전부터 파이어폭스를 사용하게 되었는데 그 계기는 블로그를 디자인 하면서부터 이다. IE에서 제대로 나오던 것이 파이어폭스에서는 문제를 만들고 있는 것을 보며 파이어폭스의 문제로만 생각하고 있었다. 그러나 가만히 자료를 찾아보고 문제가 되는 부분들을 수정하다 보니 그 동안 우리가 너무 IE의 표준 같지 않은 표준에 국한하여 생활하다 보니 생겨난 문제라는 것을 알게 되었다.

지 금의 브라우저들을 보면 양극화 되어 있다. IE인 브라우저와 IE가 아닌 브라우저, 이는 다시 생각해보면 비표준과 표준으로 생각해 볼 수가 있다. IE는 그 동안 독점하는 과정에서 표준에 반하는 기술을 표준으로 굳히려는 노력을 했을 뿐 사용자의 눈높이에 맞는 개발을 하지 못했다. 이로 인해서 새로 출시한 IE 7.0을 보면 어느 브라우저와 너무도 흡사하다는 생각을 하지 않을 수 없다.

또한 브라우징의 속도를 보면 차이를 눈으로 확인할 정도이니 IE 외의 다른 브라우저를 접해보지 않은 상태라면 모르나 접해본 사용자라면 상황이 다를 것이라는 생각이 든다. 물론 지금은 국내에서 대부분 IE를 사용하고 있고 IE에 국한된 표준을 따르는 사이트가 많기 때문에 사용자의 불편으로 쉽게 다른 브라우저로 넘어오지 못하는 사용자도 있는 것이 현실이다. 그러나 이러한 문제의 전환은 바로 지금도 진행되고 있다.  마이크로소프트사에서 브라우저에 대한 개발 노력이 미흡한 이상, 앞으로 브라우저의 대세는 서서히 기울 수 밖에 없을 것이다.

이미 온라인과 오프라인의 어플리케이션 경계선은 무너지고 있다. 이런 시점에서 웹브라우저에 대한 사용자의 눈높이는 높아질 수 밖에 없고 그 눈 높이에 맞추기 위해서는 마이크로소프트사도 지금의 안주에서 벗어나지 않으면 앞으로의 미래는 없을 것이다. 

다수의 사용자가 IE를 사용하는 것이 분명하고 그것에 맞춰서 사이트 작업이 진행되어야 하는 것은 당연한 결과다. 그러나 이제는 사용자가 그러한 좁은 문에서 밖을 내다볼 시기라고 생각된다.



    

설정

트랙백

댓글

  • TP 2007.03.04 04:14 ADDR 수정/삭제 답글

    파이어폭스.. 약간 무거운 감도 있지만 놀라운 부가 기능 때문에 계속 쓰고 있습니다. 다른 것을 쓸 생각을 못하겠네요 ;;

  • 문차일드 2007.03.04 04:33 ADDR 수정/삭제 답글

    PC방가면 IE에 여러가지 몹쓸설정으로 인터넷 이용하기가 정말 짜증나서
    요즘엔 바로 파이어폭스 깔고 서핑한답니다 ^^;

  • 필유 2007.03.04 05:03 신고 ADDR 수정/삭제 답글

    IE 쓰다가 처음 FF 쓰면 다소 무거운 느낌이 들긴 하죠. 하지만 FF만 쓰다 보면 적응이 돼서 못 느끼게 된답니다; 어떻게 보면 바로 이 '적응'이 무서운 거죠. 대다수의 사용자가 IE에만 적응되어 있으니까요. 게다가 (웹)개발자의 경우는 덜하지만 (웹)디자이너들의 IE 의존도 역시 심각한 수준입니다.

  • 이레오 2007.03.04 20:21 신고 ADDR 수정/삭제 답글

    저도 불여우를 씁니다만.. 정말 눈물겹습니다..
    웬만한 미아찾기 단체도 불여우를 지원 안하더라구요..
    몇몇 사람들이 애플컴에는 IE도 잘 안보인답니다..
    저는 해상도가 높아서 깨지는 부분이 많습니다..

  • 저도 피시방가면 웹검색을 못하게 됬어요 ㅠㅠ
    IE사용하면 답답해서 ㅠㅠ

  • Han Sanghun 2007.03.05 17:10 ADDR 수정/삭제 답글

    전 파폭을 사용한지 1년이 넘는 것 같군요 ㅎㅎㅎ
    다 좋은데, 초기 구동시간이 느리다는거...
    파폭, 오페라, IE 차례로 실행시켜보면 파폭이 제일 늦게 열려요 ㅠㅠ

    • jasu 2007.03.05 19:57 신고 수정/삭제

      전 익스플로러가 더 늦게 뜨는 느낌이...
      파폭의 시작 페이지를 기본 파폭 페이지로 설정해 놓으면 빠른거 같더군요...시작 페이지에 따라서 다소 늦는 경향이 있는 것 같아요

  • 미디어몹 2007.03.05 17:50 ADDR 수정/삭제 답글

    jasu 회원님의 상기 포스트가 미디어몹 메인에 링크되었습니다.

    • jasu 2007.03.05 19:57 신고 수정/삭제

      가보니 벌써 내려갔나보네요...쿠쿠

  • barabogi 2007.03.08 12:36 ADDR 수정/삭제 답글

    미디어몹에서 보고 찾아왔습니다. 윈도우용 파이어폭스에서는 문제가 없으나, 리눅스용 파이어폭스에서는 다음과 같이 배경이 아니라 앞면에 놓여 글의 앞부분을 가리는군요. 자세히는 모릅니다만, 플래시 소스 코드 수준에서 수정을 해야 문제가 해결되는 걸로 알고 있습니다. 문제점을 수정해 주신다면 더 멋진 배경이 되지 않을까 싶습니다 :)

    http://laue.postech.ac.kr/~barabogi/temp/jasu.jpg

    • jasu 2007.03.08 22:58 신고 수정/삭제

      리눅스를 사용하지 않다보니 정확히 무슨 문제인지는 확인이 안되고 있네요 아마도 플래시를 div 아래에 위치하기 위해서는 플래시 모드의 Transparent를 적용해서 뚫어야 하는데 기존에는 transparent로 소문자로 적용을 하고 있었습니다만 T가 대문자가 아니기이 리눅스 파이어폭스에서는 앞에 나타나는 것이 아닌가 해서 Transparent로 수정해 놓은 상태입니다.

      플래시가 앞에 나타나는 이유는 플래시를 뚫지 못하는 것 때문인 듯 싶은데 확인이 안되네요...;;

      그런데 미디어몹에 어디서 제 블로그를 보셨는지 모르겠네요...;;

스킨 편집 팁 : 파이어폭스와의 CSS 호환성

Programming/Etc 2007.02.21 11:05
스킨 편집 팁 : 파이어폭스와의 CSS 호환성

이번에 소개해 볼것은 스킨 편집 및 웹페이지 제작 등에 쓰일수 있는 파이어폭스와의 호환성에 관한 간단한 팁입니다.

'파이어폭스와의 호환성' 이라고 예기해 봤습니다만.
사실상 파이어폭스와의 호환성이라 함은 바로 '웹표준' 을 말하는 것입니다.
인터넷 익스플로러(이하 IE)가 대다수인 실정상. 한국에서는 대부분의 웹페이지가 IE에 맞추어져 제작되어 있습니다만.
IE에만 맞추어져 있는 홈페이지는 다른 브라우져에서 그 구조가 깨어지거나 사용이 불가능할 정도까지도 될수 있습니다.
이 문제는 IE가 웹표준을 따르지 않는데서 기인하는 문제인데요.

표준에 맞추었을 경우 IE및 모든 브라우져에서 완벽하게 잘 보이는 것에 반해,
IE에만 맞추었을 경우 다른 모든 브라우져에서는 올바르게 보이지 않는 것에 비추어 보아 이것은 전적으로 IE의 문제라고 볼수 있습니다.

그러나. 웹디자이너가 아닌 이상에야 일반 사용자가,
HTML코드를 짜는데에 있어 표준이고 아니고를 맞추기가 사실 실로 힘든 부분이라 할수 있습니다.
뭐니해도 사실상, 자신이 사용하고 또한 가장 많이 사용하는 IE에서만 잘 보이면 그만이니까요.

하지만. 웹페이지라는 것의 특성상 절대적 대다수만이 아닌 소수들에게도 동일한 서비스를 제공해야 하는 암묵적인 책임이 있을 뿐더러.
IE가 아닌 다른 브라우져 사용자들은 점점 늘어나는 추세라. 비록 일반 사용자임에도 불구하고 이것은 무시하지 못할 정도의 문제라고 생각할수 있습니다.
특히, 스킨 편집을 하고자 하시는 분들은 커스터마이징이나 디자인적 관점에서의 접근을 하게 됩니다만.
다른 브라우져에서 보았을때 그것이 무참하게 깨져 버림으로써 자신의 노력이 물거품이 되는 정신적 충격을 받을수도 있습니다.

이번 기회엔 초보자도 간단히 사용할수 있는 호환성에 관한 간단한 팁을 소개해 보겠습니다.




CSS에서 가장 문제가 되는 것은 다름아닌 '박스모델' 입니다.
특히 이글루스 스킨은 레이아웃을 잡는데에 있어 박스모델이 주로 사용됩니다만.
그 코드를 작성함에 있어 IE위주로 작성한다면 필연적으로 다른 브라우져에서는 깨지게 됩니다.
결론적으로, 이 '박스모델' 만 신경써 준다면 웬만한 브라우져에서는 다 잘 보인다는 것이죠.

IE에서 박스모델이 표준이 아닌 이유는 바로 padding, margin, border 사이즈에 있습니다.
예를들어 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 준다고 생각해 봅시다.
간단히 생각해 보자면 다음과 같은 코드를 사용하면 되겠지요.

예제1-IE전용

DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
PADDING: 10PX;
MARGIN: 10PX;
BORDER: 1PX SOLID #000000;
}


사실, 솔직히 말해 직관적입니다. 그냥 생각한 대로 가로세로 100픽셀에 그냥 padding, margin, border 만 주면 됩니다.
그런데. 이런 식으로 코드를 작성하면 반드시 이것은 다른 브라우져에서 문제가 생깁니다.
왜냐하면, IE의 경우 가로세로 수치가 눈으로 보이는 박스 사이즈에 기준한것에 반해,
다른 브라우져가 사용하는 가로세로 수치는 눈으로 보이는 사이즈가 아닌 내용이 표시되는 부분을 기준으로 하고 있기 때문이죠.

그러니까. 눈으로 보이는 박스 사이즈가 100px라고 하면, IE에서는 그냥 100px을 적어주면 끝납니다만.
표준 브라우져에서는 그 사이즈에서 padding과 border 사이즈를 뺀 사이즈, 위의 경우에서는 78px를 적어줘야 하는 것입니다.


자. 그렇다면 코드를 작성할때 일일히 이것을 계산해서 조심스레 적어야 할까요.
...솔직히 매우 머리아프고 귀찮은 짓임에 분명합니다.
또한 이렇게 적으면 되려 IE에서 잘 보이지 않는 결과가 생길수도 있습니다. (첨부 이미지 참조)

결국 생각해볼수 있는 방법은. 바로 표준과 IE를 따로 적어주는 방법인 것이죠.
위에서 초보자라도 쉽게 할수 있다고 언급했습니다만. 이 방법이야말로 가장 간단한 방법이라고 생각합니다.
왜. 이미 모든 코드를 작성한 상태에서도 각 박스모델에 몇줄씩 추가/수정만 해주는 것으로도 호환성 상승을 노릴수 있기 때문이죠.
자. 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 준다면,
표준으로는 이렇게 적어야 다른 브라우져에서 IE와 같은 모델이 보입니다.

예제2-표준

DIV.TEST {
WIDTH: 78PX;
HEIGHT: 78PX;
PADDING: 10PX;
MARGIN: 10px;
BORDER: 1PX SOLID #000000;
}


그러나. 이 박스모델 코드를 해석하는 방식이. IE가 표준이 아니기 때문에 오히려 IE에서 깨지는 현상이 생겨버리는 것입니다.
IE 쪽을 쓰기 위해서는 그냥 가로세로 사이즈를 100px를 적으면 됩니다만 그러자니 다른 브라우져에서 깨지고....
해서, 위의 코드를 적은 뒤 아래에 IE에서만 인식하는 다음의 코드를 추가해 주는 방법으로 해결할수 있습니다.

* html DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
}



* html ~~ 은 IE에서만 인식되는 특수한 selector라고 합니다. 저도 이유는 잘 모르겠습니다-_-
중요한 사실은 오로지, "* html ~~ 를 적어줌으로써 표준인 코드를 비표준인 IE에도 맞출수 있다" 는 것일 뿐이겠죠.

결론적으로, 가로와 세로가 각각 100px인 박스에 padding 10px, margin 10px, border 1px를 주고 싶을때.
표준과 IE에서 전부 잘 작동하는 코드를 만들고 싶다면 다음과 같이 작성하면 간단하게 해결할수 있습니다.

예제3-절충안

DIV.TEST{
WIDTH: 78PX;
HEIGHT: 78PX;
PADDING: 10PX;
MARGIN: 10px;
BORDER: 1PX SOLID #000000;
}

* html DIV.TEST{
WIDTH: 100PX;
HEIGHT: 100PX;
}



●중요!
이미 써져있는 코드를 수정할 경우, * html ~~ 을 각 박스 아래쪽 라인에 추가한 뒤,
원래의 수치는 * html ~~ 쪽으로 옮기고, 이미 써져 있던 수치는 margin은 제외하고 padding, border 사이즈를 빼서 적어주면 됩니다.
ex) 가로, 세로 100px에 padding 10px, border 1px라면. 100px - (20+2)= 78px 입니다.



<참고 이미지>
사용자 삽입 이미지

왼쪽은 파이어폭스, 오른쪽은 인터넷 익스플로러입니다.
IE전용이 파이어폭스에서는 크게 나오는 반면, 표준은 IE에서 작게 나옵니다.
절충안을 사용하면 두개의 브라우져에서 완전히 같은 박스모델이 구현 가능합니다.




이쪽에 대해서는 사실 크게 깊은 지식이 없기에 다소의 오류를 포함하고 있을수도 있습니다.
하지만. 위에 언급한 방법은 실제 사용해 본 결과, IE및 다른 브라우져에서도 완전히 같이 동작한다는 것을 확인하였기에 이렇게 소개해 봅니다.

이글루스에서 스킨을 직접 만드시는 분들.
특히 기존 스킨의 수정이 아닌 완전히 새로 만들 경우에 한해 호환성이 문제가 될 경우가 가끔 있습니다.
(물론, 이글루스 자체는 다른 브라우져에서 잘 보이는 편이고, 공개 스킨 또한 잘 보입니다만 가끔씩 과격한 모딩이 되어있는 스킨은 깨질때가 있습니다)

실로 간단한 방법입니다만.
이 팁으로 인해 리퍼러에 약 몇%만을 차지하는 소수의 타 브라우져 사용자들에게도 떳떳하게 블로그를 보일수 있었으면 하는 바램입니다.

참고 링크: 한국 모질라 포럼

덧붙임:
이 글은 한국 모질라 포럼의 웹 표준화 프로젝트 계시판에서 CSS 박스 모델 문서를 참조하였습니다.

출처 : 안티에고이스트
    

설정

트랙백

댓글

  • 여행용칫솔 2007.08.13 07:50 ADDR 수정/삭제 답글

    스킨을 제작하고 있었는데 ie와 불여우에서 레이아웃이 다른 것때문에 베타버전에서 폐기처분하려 했습니다.
    하지만 이 방법으로 ie와 불여우에 구분하여 적용하였고 Ver1.0을 향해 정진중입니다.^^

    • jasu 2007.08.13 11:44 신고 수정/삭제

      ^^다행이네요...멋진 스킨 만드셔서 공개하시게 되면 알려주세요...