IE6.x PNG-24 투명값 해결

CSS 2009.09.05 12:40

익스플로어6(IE6)에서 PNG-24 투명값 해결하기

iepngfix

출처http://www.twinhelix.com/css/iepngfix/

일단 위에서 다운받고 아래순서대로 하자

  1. 1.파일 iepngfix.htc 과 blank.gif 를 폴더에 넣는다
  2. 2.주의할 점으로는 위의 폴더를 반드시 기억할것 그위치에 따라 iepngfix.htc파일을 열어 경로를 수정해줘야 한다 ex) var blankImg = '/images/blank.gif';
  3. 3.사용방법은 다음과같다
img, div { behavior: url(iepngfix.htc) }

문제점은 css지정을 보다시피 비표준이며 포지션 지정시 unclickable으로 에러가뜬다는점이다

Unit PNG Fix.

풀처http://labs.unitinteractive.com/unitpngfix.php

  1. 1.출처에서 다운로드
  2. 2.unitpngfix.js 를 적당한 폴더에 넣는다

3.아래태그를 넣어준다

 

간단해서 좋지만 역시문제점...몇몇 부분에서 포지션이 지정안되고 z-index사용이 불가능하다.

DD_belatedPNG

출처DD_belatedPNG

  1. 1.출처에서 다운로드
  2. 2.DD_belatedPNG.js를 적당한 폴더에 넣는다

3. 아래태그를 삽입

 

TR,TD,INPUT 태그에 적용되지않는다는 단점이 있으나 가장적절하다고 본다

사용방법이 조금 까다롭긴하데 그다지어렵지않다 DD_belatedPNG.fix('.png_bg');처럼 괄호안에 적용할 태그,클래스,아이디를 널어주면된다.여러개를 선택할 경우 ('.example1, #example2, img');이와같다.

IE6는 이래 저래 골치아프게 표준을 준수하자니 애먹인다..빨리 사라졌으면..


설정

트랙백

댓글

  • LUNA 2010.10.13 11:37 ADDR 수정/삭제 답글

    ie6 은 정말 최악이네영~
    뭘 할라고해도 애먹입니다.
    글 참고가 되었습니다~ 감사합니다^^

플래시10과 sIFR 문제

CSS 2009.09.05 11:58

현재 플래시10의 사용으로 sIFR 2.07 번전은 플래시cs4에서 편집이 불가능한것으로 보인다.

파일을 열면 unexpected file format으로  뜬다 다른버전을 이용할 것을 권한다.


설정

트랙백

댓글

CSS 이미지 대채 sIFR

CSS 2009.09.04 17:07

sIFR (Scalable Inman Flash Replacement)

flash, script, html, css를 사용하여 사용자의 PC에서 설치 되어있지 않은 디자인 폰트를 웹상에 출력 시킬수 있는 기법을 말합니다.

현재 sIFR 2.0.7 까지 release된 상태이고 네이버 모두의 블로그를 비롯하여 많은 사이트에서 관련 기법을 사용중입니다.

http://www.mikeindustries.com/blog/sifr/

사용예 : http://section.blog.naver.com/sub/PostListByDirectory.nhn?option.directoryAlias=movie

sIFR의 장점

sIFR 은 특정 태그와 class 이름을 기준으로 적용이 가능하며

시스템 폰트에서 제공하지 않는 디자인 폰트를 제공하면서도 StyleSheet를 이용하여 배경 색상과 크기, 글꼴 색상의 제어가 가능 합니다.

플레쉬로 text를 제공하기는 하나 마우스로 글꼴을 긁어 필요 부분을 복사 하여 사용할 수 있고

인쇄시나 Script, Css가 지원되지 않는 환경에서는 기본 Text폰트로 표현 되는 등 기본적인 접근성을 지원하고 있으며

screenreaders에서의 접근도 허용하고 있습니다.

출처 : http://www.mikeindustries.com/blog/sifr

sIFR의 단점

sIFR의 단점으로는 Script로 문서가 로딩시에text flash로 변환 시키기 때문에 이미지나 일반 text요소들이 모두 로딩된 후에 보여진다는 단점이 있습니다.

그리고 플레쉬로 변환된 text부분을 마우스로 드레그 하여 영역을 선택 하였을 경우 원하는 영역을 선택할 수는 있지만

플레쉬 외부에서 마우스 드레그를 시작하여 플레쉬 파일을 포함 나머지 영역까지 선택할 경우는 선택이 불가능 하거나 영역을 잘 못 이해 하는 경우가 잇습니다.

그리고sIFR의 경우 영역의 부분 부분에 강조의 의미를 제공하거나 부분 부분 다른 글꼴을 제공할 수 없는 단점도 가지고 있습니다. 부분 링크도 제공하지 못합니다.

Ex) aaa <strong>aaa</strong> a<span style=font-family:dotum>a</span>a <a href=#>aa</a> (X)

sIFR기법을 사용시에는 플레쉬, Ajax, html 세 업무 파트의 협업이 필요 합니다.

또 한가지 확인 해야 할 사항으로는 변환 할 수 있는 부분의 기준이 tag가 아닌 class이름을 기준으로 변환이 가능한지 Ajax파트에 문의가 필요 할 듯 합니다.

태그를 기준으로 변환을 하게 되면 매번 관련 script를 삽입해 주어야 하지만 class를 기준으로 작업 할 시에는 필요 부분에 class이름을 삽입 하는 것만으로 적용이 가능 하기 때문입니다.

출처 : http://www.allcrunchy.com/Web_Stuff/sIFR_lite/

결론

sIFR 그동안 디자인 구현시 제한이 되었던 글꼴 문제를 해결할 수 있는 좋은 방법이기는 하나 많은 제한 적인 기준을 가져야 할 듯 합니다.

한 예로 아래 url을 보게 되면 한 페이지내에 최대 10개 이하의 부분만 사용을 권장 하고 있습니다.

출처 : http://www.mikeindustries.com/blog/sifr/

위의 내용들을 기준으로 보았을 경우 사용의 기준은 아래와 같습니다.

 1. heading영역

 리스트의 header영역은 제외시키며 페이지에 기준이 되는 상단 제목영역만을 의미 합니다. 그리고

2. 약관페이지나 설명 페이지등에는 삽입을 피합니다

 많은 양의 text를 변환시의 속도 문제점이 생길 수 있고 페이지의 header부분만 변환 한다고 하여도 마우스로 드레그 시에 영역의 선택이 불명확 한 오류가 있으므로 피하도록 합니다.

3. 많은 양의 text나 많은 부분의 변환을 삼가합니다.

  검색 서비스나 이미 많은 양의 기능이 추가 되어 페이지 로딩속도가 민감한 페이지의 경우에는 되도록 삽입을 피하도록 합니다.


출처는http://maxzero.kr/?p=60

사용방법은 http://wiki.novemberborn.net/sifr/


설정

트랙백

댓글

CSS 이미지 대치 기법

CSS 2009.09.04 16:45

이미지 대치(image replacement)

html에서 명확성을 위해서 가능한 이미지대신에 텍스트를 사용하는것이좋다.하지만 웹디자인너들이 선택할수 있는 폰트의 제약이 있고 css를 사용해서 특정스타일만 지정할 수 있기에 텍스트만으로 처리하기에 불가능한 경우가 있다. 로고를 보여준다던지..할때 그 예를 들수있다. 이를위해 이미지를 넣는 대신에 이미지대치기법을 사용한다.

호고를 단순히 이미지만으로 넣을경우 검색엔진에 텍스트는 무시될 수 있다. 따라서 텍스트는 검색되고 원하고자하는 이미지를 넣을때 사용되는것이 이방법이다.그방법들을 보자

FIR 방법

토드 파너가 만든 FIR(Fahrner Image Replacement) 방법이다.

이미지 대치

h2{ background: url(image.gif) no-repeat 0 0;
   width:70px; height:50px;/*이넓이와 높이는 이미지 크기 이다.*/     
   }
h2 span{dispay:none;}

먼저대치하고자하는 텍스트가 포함된 태그에 span을 넣고 sapn부분이 보이지않게 dispay:none;으로 처리하는 방법이다. 문제는 dispay:none; 로 적용할경우 몇몇은 역시 텍스트를 검색시 읽어주지않는다는 점이다. 이럴경우 오히려 접근성이 더 떨어지고 만다.

파크방법

이미지 대치

h2{ background: url(image.gif) no-repeat 0 0;
      text-indent:-9999px;
      width:70px; height:50px;
   }

이방법은 간단하고 span같은 불필요한 태그를 넣을 필요도없고 문서검색에도 문제는 없으나 여러번사용시 로딩에 문제가있다

갈빈/ 레더법

이미지 대치

h2{position:relative;width:70px; height:50px;}
h2 span{background: url(image.gif) no-repeat 0 0; position:absoute;
             width:100%; height:100%
}

이방법은 span태그가 가로세로를 100%로 잡으면서 텍스트위를 덥도록하는 방법이다. 단점은 태그를 보다시피 불필요한 태그를 마크업에 추가한다는점이며 도한 투명그림은 뒤의 텍스트가 비칠수 있기때문에 사용하지못한다.

여러 사이트의 CSS를보면 알수있겠지만 파크 방법이 가장 많이사용되고 있다.


설정

트랙백

댓글

CSS 배경이미지

CSS 2009.09.04 12:35

배경이미지 지정

배경이미지지정은 아주쉽다 예제를 보자

body{
background: url(image.gif);
}

위의 CSS는 배경을 image.gif 파일로 지정한경우이다. 이외 상세히 지정할때 속성값들을 자세히보면 다음과 같다

  • url() 백그라운드로 잡을 이미지이름,위치
  • #FFF 색깔
  • repeat 그림의 반복 배치, repeat-x(가로보 그림을 반복배치), repeat-y(세로로 그림 반복배치), no-repeat(박복없이배치)
  • 배치한 그림의 위치 left,centerright....
    • 적용된예를보자

      #id{
      background:transparent url(http://cfs.tistory.com/www/resource/images/login_bg.gif) repeat scroll 0 0
      }
      

티스토리의 로그인화면의 예제이다. 아이디 지정 그리고 백그라운드 이미지의 주소를 볼수있다.

이미지위치지정에 대해 마지막으로 보자

위그림처럼 h1태그에 에드라인이라고 적고 그앞에 이미지를 배치할 수 있도록할것이다.

h1{
padding-left:30px;
background: url(헤드라인.gif) no-reapeat left center;
}

마지막에 left(가로) center(세로) 라고 준것만큼 그림의위치가 결정된다 패딩을 30px주었으니 그자리에 위치하게된다

또 그림위치값은 픽셀과 퍼센트값으로도 지정가능하다.

다음엔 텍스트를 필요한 그림으로 대체시키는 방법에 대해 알아보겠다.


css

설정

트랙백

댓글

CSS 포지셔닝 플로팅

CSS 2009.09.03 12:44

CSS float

float는 엘리먼트를 띄운다는의미로 왼쪽 오른쪽 두가지 지정할 수 있는 속성값을 가진다.

오른쪽위의 첫번째 그림은 아무것도 지정하지않았을때 일반 포지셔닝이다.
왼족위는 하나의 박스를 float:left로정의 한경우이다.
플로트의 경우 가로폭이 충분하지않으면 아래로 밀려난다. 오른쪽아래가 그예시
또 박스높이가 다른경우는 왼쪽아래처럼 왼족긑으로 떨어지지않고 플로트된 다른 엘리먼트에 달라붙는다.

위그림은 플로트 해제를 보여주는 예시이다.
첫번째는 역시 아무것도 지정하지않았을떄.
두번째는 박스에 float:left를 주었을떄이다. 이떄 라인박스가 오면 박스크기만큼 작아지면서 흘려지게된다.
왼쪽 아래처럼 각블럭을 해체하려면 clear를 쓰면 된다.

마지막으로 플로트를 감싸는 엘리먼트가 있을경우이다. 이때는 오른쪽 과같이  감싸는 엘리먼트가 보이지않는다.
해결방법으로는 3가지가있다.

1. 감싸는  엘리먼트에 overflow :hidden; 또는 overflow :auto;를 준다.
.class{overfolw:hidden;}

이방법은 가장쉽지만 만약 overflow를 워래목적으로  사용할경우 문제가된다

2.유사클래스사용

유사클래스와 content라는 속성을 활용하여 엘리먼트의 내용끝부분에 새내용을 추가하고 그리고 그내용이보이지않도록 높이를 0으로한다

.class:after {
    content: "."; /* content에 .을 추가*/
    display: block;
    height: 0; /*추가한 내용이 보이지않게 높이를 0*/
    clear: both;
    visibility: hidden;
}

하지만 이방법은 IE이하에서 유사클래스를 지원하지않는다.

3.홀리핵 http://www.positioniseverything.net/easyclearing.html
.class {display: inline-block;}  /* for IE/Mac */

.class {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */


다소 복잡하다.

설정

트랙백

댓글

CSS 포지션닝 고정위치(fixed)

CSS 2009.09.02 14:20

고정위치(fixed)

고정위치는 화면에서 어떤위치를 차지하던지 일정한위치에 유지하면서 사용자눈에 보이게된다.

#box{
position:fixed;
left:20px;
top:30px;
}

티스토리 블로그 스킨중에서 2단형에 happt blog 스킨을 보면 적용된것을 알 수 있다. 하지만 IE6에서는 이고정위치를 지원하지않는

다. 이를해결하기위해서 자바스크립트를 사용할 수있긴하다..

http://snook.ca/archives/html_and_css/experiment_with

css

설정

트랙백

댓글

CSS&HTML 포지셔닝

CSS 2009.09.02 14:07

웹문서의 포지션닝

웹문서에서 위치는 크게 3가지로 요약된다

  • 일반 흐름(normal flow)
  • 플로트(float)
  • 위치(position)

일반흐름 방식은 별도 지정이 없을떄 를 말한다. 엘리먼트를 우리는 블록엘리먼트와 인라인 엘리먼트로 구분 할 수 있는데 div ,p ,h1등은 하나의 블록을 차지한다. 하지만 strong, span같은 경우는 인라인 엘리먼트로 한줄에 표시된다.

포지션닝 :: 상대위치

원래의 위치로부터 지정한만큼 이동한다 그림에서 빈박스가 원래의 위치고 진회색이 지정하여 이동한 경우이다.

#box{
position: relative;
left:20px;
top 20px;
}

포지셔닝 :: 절대위치

상위엘리먼트중에서 가장가까운 엘리먼트의 위치를 기준으로 한다

만약 특별한 상위 엘리먼트가 없다면 문서전채를 기준으로 할것이다

#box{
position: absolute;
left:20px;
top 20px;
}

설정

트랙백

댓글

CSS 마진과 패딩의 이해

CSS 2009.09.02 13:46

CSS 마진과 패딩의 이해


그림을 보면 연한파란색이 콘텐츠 그리고 안에 패딩이 얼마주어지고 다음은 선(border) 마지막으로 마진이 화면을 구성한다.

위에것을보면 가로 756px 세로84px 패딩5px 보더0 마진0 으로 볼수 있다. IE6에서는 계산이 달라서 의도한것보다 작게나올수 있다 이에대한 해결은 너비를 지정한요소에는 패딩을 지정하지않고 그대신 그요소의 부모엘리먼트나 자식엘리먼트에 패딩을 마진을 지정해주면 문제가 일어나지않는다.

마진겹침 현상

왼쪽은 마진을 위의 박스는 마진30px 아래박스에 20px을 준경우다 실제 왼쪽같이 나올걸 기대하지만 오른족과 같이 겹침 현상으로 더 아래박스의 20px은 무시되고 겹친다.

이런현상은 엘리먼트안에서도 일어난다. 위그림의 흰색은 내용이고 회색에 마진 20px 진회색에 30px을 준경우 인데 실제나오는 모습은 오른쪽과 같이 20px마진이 무시되고 30px 이 주어진다.


설정

트랙백

댓글

CSS 고급선택자(3)

CSS 2009.08.30 10:38

CSS 고급선택자(3)

속성선택자(attribute selector)

태그에서 속성은 가장흔한예로 우리가<a href="#"  tittle="어쩌고 저쩌고"></a> 여기서 tittle을 예로들수있다.

보통 엘리먼트위로 마우스를 올렸을때 툴팁을 표시하는데(노란박스와 tittle의 값) 속성을 다르게 표시할 수있다

사용법은 엘리먼트[속성엘리먼트]{}

a[tittle]{border: 1px dotted #999;}
a[tittle]:hover{cursor: help;}

위와같이한다면 점선으로된 1pxdml 테두리 그리고 마우스를 가져갔을때 믈음표모양이 보일것이다.


설정

트랙백

댓글