좌충우돌 웹퍼블리셔 일기

이제까지 png 이미지를 사용하면서 여러가지 방법을 썼었는데 모두 만족스럽지 않은 결과를 가져왔다. 결론은 png를 사용하지 않게끔 디자인을 하던가...ie6이 없어지던가....둘중 하나인가....orz...

눙물이....ㅠ.ㅠ
유레카!!! 5번~!!!!!

1. 스크립트 사용1 ( 백그라운드 사용 불가/ ie8 에서 작은 하얀점 생김)

<script language="javascript">
<!--
    function setPng24(obj) {
        obj.width=obj.height=1;
        obj.className=obj.className.replace(/\bpng24\b/i,'');
        obj.style.filter =
        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
        obj.src='';
        return '';
    }
//-->
</script>


<style type="text/css">
.png24 {
   tmp:expression(setPng24(this));
}
</style>

<img src="./images/we-want-alpha.png" class="png24">



2. 스크립트 사용2 (이미지/백그라운드 모두 가능하나 백그라운드 반복시 끊김현상 나타남 - 항상 나타나는것은 아닌듯.)

<!--[if IE 6]><script type="text/javascript" src="/js/unitpngfix.js"></script><![endif]-->

unitpngfix.zip

document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');var ct=document.getElementById("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}};};
</script>

* 스크립트 넣으면 레이어 틀어지는 현상이 있음

3. ie6 과 그 외 브라우저에서 사용되는 스타일 적용 ( 링크된 텍스트 사용 불가 )

background:url('/common/img/sub/box_bg.png') repeat-y 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/common/img/sub/box_bg.png', sizingMethod='scale') => 반복으로 백그라운드 쓸때

background:url('/common/img/sub/box_bg.png') repeat-y 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/common/img/sub/box_bg.png', sizingMethod='crop') => 하나로 백그라운드 쓸때

* 백그라운드 이미지가 아예 사라지고 이미지가 나오지 않을때가 있음.

4. iepngfix.htc 사용 ( 전부 로드 될때까지 배경이 퍼렇게 나타남... )

5. DD_belatedPNG ( 백그라운드: 반복O, 링크O, 인풋?/ 이미지O )

http://www.dillerdesign.com/experiment/DD_belatedPNG/

사용법 :  위 사이트에서 js를 다운받은 후 아래 스크립트를 해당 html에 써준다.
'.png_bg' 는 본인의 png가 들어가는 클래스명/태그로 대체.
ex)) ('.png_bg, .use, img')


<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); /* EXAMPLE */
    /* string argument can be any CSS selector */
    /* using .png_bg example is unnecessary */
    /* change it to what suits you! */
</script>
<![endif]-->

DD_belatedPNG_0.0.8a.js

DD_belatedPNG_0.0.8a-min.js

• 디자인 포토샵파일, 메뉴구성 엑셀파일이 확정된 최종본인지 확인하고 넘겨주세요.
• 온오프, 로그인 후 등 상황에 따라 달라지는 이미지는 +on +off 별로 레이어셑 을 만들어 주십시오. (레이어셑 명명 방법은 "+이름" 을 추천)
• 상단메뉴, 좌메뉴의 하위메뉴도 상황별로 디자인 추가 변경 있다면 별도 레이어셑으로 만들어주세요.
• 레이어셑 만들 때 컨텐츠 구역별로 잘 묶어서 주시고, 가급적 레이어 이름을 남겨주세요..
• 필히, 전체 배경 디자인은 별도 레이어셑(+bg)으로 구분
  
• 예를 들어, head 부분의 텍스트와 본문의 텍스트를 하나의 레이어셑에 묶어 두는 경우 곤란합니다.
  (테이블 레이아웃은 디자인 위주로 자르지만, CSS 레이아웃은 컨텐츠별로 자르므로 레이어셑 숨김, 보임을 자주합니다.)
• 블릿은 bu 혹은 ㅇ, 라인은 line 혹은 ---- 등등 간단하게라도 붙이는 습관을 가져주세요.
  (시간 많이 안걸립니다. - 다시 수정할 때, UI코딩시, 유지보수시 편리)
  
• 연관된 레이어는 바로 인접한곳에 위치하도록 해주세요.
  
• 나쁜예 : 텍스트를 꾸미는 불릿 레이어가 인접해있지 않고 사이에 다른 레이어들이 어지럽게 섞여있는 경우.
  
• 이미지 메뉴는 크기 또는 간격이 일정하게 제작해주세요.
• 온오프시 이미지 크기가 동일하도록 만들어주세요. (가로형은 너비, 세로형은 높이가 필히 같아야 함)
• 그리드 계획에 맞도록 신경써주십시오. (가이드라인 사용시 1px씩 어긋나지 않게 정확하게 표시해주세요.)
  
• ※주의: 포토샵 작업시 확대 배율이 100% 의 배수가 아닐 경우 가이드가 1px 중간에 만들어지는 오류.
  
• 여러 페이지에 걸쳐서 같은 형태의 디자인일 경우 psd 파일 1개로 처리해주세요. (예)
  
• 서브 페이지 UI(head, sidebar, foot 영역), 메인 페이지 디자인은 각각 psd 파일 1개로 해결할 수 있도록 해주세요.
• 주메뉴 영역 등 메인과 서브가 공통적으로 사용하는 디자인은 서브 페이지 디자인에 넣어주세요.
  
• 플래시 링크와 비플래시 링크가 가급적 겹치지 않도록 작업해주세요. (나쁜예)
• 서브 비쥬얼 위에 메뉴를 만들지 마세요. (나쁜예)
• 디자인시 색상 대비에 좀 더 신경을 써주세요.
  
• 웹 접근성 작업 참고 에서 "1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다." 부분 참고
  
• PSD 파일이 너무 커서 컴퓨터가 버벅거립니다.(10M이하를 원하는데, 20M가 넘는 경우도 많군요.)
• 페이지 레아아웃 백그라운드에 그라데이션, 그림자가 없으면 안될까요?
  코딩시 쓸데 없는 코드들을 많이 생성시키고, 페이지 전체 렌더링 속도가 엄청 무거워집니다.

• 이미지를 투명 png-24 파일로 저장해야 하는 경우가 없도록 디자인해주십시오. (나쁜예)
  (IE6에서 비표준코드를 생성해야함).. 단, IE6 점유율이 바닥으로 떨어질 때 사용가능.
• 좌메뉴 등 이미지가 아닌 텍스트 정보는 포토샵에서 자간을 100의 배수(css에서 letter-spacing 1px의 배수)로만 지정해주세요.
• 포토샵에서 Character 패널의 kerning 을 0 또는 Metrics 로 설정하세요. (Optical 은 사용하지 마세요.)
• 메뉴 영역, 제목 영역 등 모든 콘텐츠는 예상할 수 있는 모든 경우를(가장 짧은 것과 가장 긴 것을) 고려하여 디자인해주세요.
• 여러 사이즈(원본, 섬네일 등)로 서비스 되는(DB에 저장되는) 이미지는 가로 세로 비율을 맞춰주세요.
  (모니터 화면, 디카의 일반적인 사이즈인 4:3 비율을 권장합니다.)
• 여러 페이지(서브와 메인 등)에서 같은 콘텐츠가 다른 위치에서 보여질 때 특별한 경우 아니면 디자인을 맞춰주세요. 
•  외국어 디자인시 텍스트 콘텐츠는 해당 언어 OS 범용 폰트로 만들어주세요.
  
• 국문: 돋움, 굴림
• 영문: Tahoma, Arial, Verdana, ..
• 일문: MS UI Gothic, MS Gothic
• 중문: Simsun, SimHei, MS Song

>> [출처] 디자이너에게 바란다|작성자 뭉가

‘font’ 대표속성 규칙.

‘font’ 는 아래 속성을 대표 합니다.

• font-style
• font-variant
• font-weight
• font-size
• font-family
  
  

‘font-size 와 font-family’ 에 밑줄 쫙 친 이유가 있습니다. ‘font’ 에 대한 대표속성을 정의 할 때 주의할 점은 다음과 같습니다.

• ‘font-size 와 font-family’ 는 반드시 정의 되어야 한다.
• ‘font-size 와 font-family’ 는 반드시 그 순서를 지켜야 한다.(잘된 예: ’small dotum’, 잘못된 예: ‘dotum small’)
• ‘font-size 와 font-family’ 는 다른 속성보다 항상 나중에 정의되어야 한다.(잘된 예: ‘bold small dotum’, 잘못된 예: ’small dotum bold’)
• ‘font-size 와 font-family’ 이외의 속성은 없어도 무방하며 ‘font-size 와 font-family’ 보다 먼저 정의되기만 한다면 더이상 순서에 구애받지 않는다.
• ‘font-style, font-weight’ 따위를 정의하지 않으면 마크업에서 기본적으로 ‘italic, bold’ 체로 표현되는 서체에 ‘normal’ 스타일이 적용된다. (예: ‘font-style’ 을 정의하지 않으면 ‘em, address’ 따위의 ‘italic’ 속성이 제거되고 ‘font-weight’ 를 정의하지 않으면 ‘h1~h6, th’ 따위의 ‘bold’ 속성이 제거됨.)
  

라는 점 입니다. ‘font’ 에 대한 대표속성 코딩 규칙에 따르면 최소한 다음과 같은 형식을 가집니다.

#ex1 {font: small dotum;}
#ex2 {font: italic small-caps bold small dotum;}

‘font-size 와 font-family’ 를 반드시 포함하고 있으며 ‘font-size’ 를 먼저 정의하고 ‘font-family’ 를 나중에 정의 하였습니다. 그리고 그것들은 다른 속성들보다 ‘가장 나중에 정의’ 되어 있습니다. 이 규칙을 머리속에 넣기 복잡하다고 생각되시면 ’size & family’ 순이니까 ’si-fa’ 라고 기억하시면 되겠네요. 발음이 좋네요. 욕나오는 것들은 나중에 처리합시다.

‘background’ 대표속성 규칙.



‘background’ 는 아래 속성을 대표 합니다.

• background-color
• background-image
• background-repeat
• background-position
• background-attachment
• #ex {background: #CCC url(dot.png) no-repeat 50% 50% fixed;}

배경색과 배경이미지를 동시에 설정할 수 있습니다. 이런 경우 배경색이 배경이미지보다 아래쪽에 깔립니다. 그리고 배경 이미지의 반복과 배치는 자유롭게 설정이 가능합니다. 위 예제에서 ‘50% 50%’ 부분은 배경이미지의 x좌표와 y좌표에 대한 값 입니다. x좌표와 y좌표를 설정하는 부분을 제외한 나머지 속성값은 그 순서를 지키지 않아도 무방 합니다.


‘list-style’ 대표속성 규칙.

‘list-style’ 은 아래 속성을 대표 합니다.
 

• list-style-image
• list-style-position
• list-style-type
• #ex {list-style:url(bullet.png) inside;}

사실상 목록에 블릿을 표현하는 방법으로서 예제와 같이 ‘image’ 속성을 사용하는 것보다는 ‘background’ 를 이용하는 방식이 훨씬 더 많은 표현의 자유를 보장 합니다. ‘list-style’ 은 블릿의 위치를 ‘inside’ 또는 ‘outside’ 밖에 설정하지 못하지만 ‘background’ 는 자유롭게 배치할 수 있기 때문입니다.

 >>출처 나라디자인 정찬명님

코바코 관리자 포탈에 투입되서 다른 사람이 해 놓은 작업물을 수정하다 스타일 zoom을  발견했다. *를 보아하니 핵같긴 한데 뭐하는 놈인가 해서 찾아보았다.

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>

<style type="text/css">
.left { float:left;}
.right { float:right;}
</style>

위와같이 코딩하면 out 클래스의 division 태그가 높이가 잡히지 않습니다.
.out { *zoom:1; } /* 안의 float 요소까지 높이를 잡아주지만 이것은 ie5~7에서만 가능합니다. */
.out:after { content:""; clear:both; display:block; } /* 높이를 잡아주지만 ie5~7에서 지원하지 않습니다. */
*zoom:1 이 사용되는 영역은 위 두가지 스타일이 모두 적용되어 있을 것입니다.

>>출처 : XE 묻고답하기

위 방법은 zoom 을 이용한 방법이고....아래는 내가 쓰던 방법이다.

<style type="text/css">
.left { float:left;}
.right { float:right;}
.clear{clear:both;}
</style>

<div class="out">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
<div class="clear"></div>
</div>

<object classid=" ">

<param name="movie" value="플레시.swf">

<param name="play" value="true">

<param name="loop" value="true">

<param name="quality" value="high">

<param name="wmode" value="transparent">

<embed src=" "></embed>

</object>

1. Ctrl + F7 눌러 콤보박스를 끌어다 놓는다.

2. 콤보박스를 클릭하고 파라미터를 보면 data 값과 labels 값을 적는 곳이 보인다.

    [] 를 더블클릭하면 적는 곳이 나온다

  data  >> url 을 적어넣는다. (양따옴표등의 기호를 사용하지 않는다.)

  labels >> 이름을 적어넣는다.

3. 콤보박스에 아래의 액션을 적어넣는다. 

on(change){
var obj=this.selectedItem
getURL(obj.data,_blank) }
  

  >> 주황색의 값이 빠질경우 self 가 된다.

1. 웹이란?

1) world-wide-web

2) HTML( 어느곳에서나 같은 화면을 보고싶어함 )

3) Hyper Text - 기존의 문서는 순차적이면서 서열형 구조 > 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조 

4) Markup Language - 이제는 css 에서 처리 (우리가 공부할 때 줄을 치거나, 형광펜 등으로 칠하는 것이 마크업)

5) HTML의 목표 - 생산자들이 만든 문서가 다른 브라우저, 플랫폼에서 다르게 표현되지 않아야함 / 여러 해상도 pc, 핸드폰, 모바일기기 등의 모든 장치들이 정보를 이용가능 하게 하도록 발전됨(정보 그 자체,표현되는것 모두) 

2. 웹표준

1) 웹표준이란?

• W3C가 가장 중심적인 역할(책  참고)
• 향후 시멘틱웹쪽으로 갈 가능성이 매우 큼(팀버너스리 추진)
  

2) W3C

• 웹을 위한 표준을 개발하고 장려하는 조직  
• CSS, HTML, XHTML, XML, RDF, OWL 등의 문서양식 표준화 
   

3) 브라우저의 역사와 웹표준의 경시

• 최초의 브라우저는 모자이크(아마추어)
• 넷스케이프(비로서 전문성을 가진 브라우저 시작)
• 넷스케이프와 익스플로러의 브라우저 1차 전쟁 (OS에 끼워 팔던 익스가 성공을 거둠)

구조 HTML
디자인 레이아웃 CSS
자바스크립트(자바와 상관없음 - 라이브 스크립트) - 이름만 빌려쓴다고 보면 됨
J 스크립트(인터넷 익스플로러) 자바스크립트와는 다름. (ECMA 스크립트가 표준)

• 브라우저 2차 전쟁 ( OS에 넣는 익스플로러와 다른 브라우저간의 싸움) - 익스플로러의 승리 (익스플로러 6.0 으로 익스플로러팀 해체 / 웹표준을 전혀 지키지 않음 - 개판)
• 파이어폭스의 등장(웹표준을 지키는 브라우저를 표면에 내세움)
• 익스플로러 8.0의 등장 표준화로 가고 있음.

4) 웹표준 정책의 혼란

• HTML 2.0x에서 잘못된 요소(태그)와 속성이 사라졌음
• HTML 3.2에서 다시 시각적으로 사용하던 요소와 속성 추가됨(넷스케이프의 압력)
• 그 후 HTML 4.01 에서 2.0버전으로 권고함(Strict 문서형)
• 하지만 보급된 기술을 다시 바로 잡기 힘들고 제작자들이 올바르게 HTML을 사용하는 것에 의미를 느끼지 못함
  
  

5)  웹표준을 지키지 않는 브라우저

• 브라우저가 웹표준을 준수하지 못하므로 웹제작자들은 시각적으로 제대로 표현하기 위해 HTML을 시각적으로
  사용함
• 태그 오용(단지 보여주기 위해 함부로 태그를 사용)
  
  

6) 웹표준 중시와 비즈니스 트랜드

• 웹표준이 웹개발자에 주목받은 사이트
• Wired News(2002년 9월) : XHTML + CSS 기반으로 구축
• 많은 페이지와 막대한 트래픽 문제가 있던 사이트
  

변화된 모습

1. 파일 사이즈가 줄고 랜더링 속도가 향상되고, 문서구조와 시각표현의 분리로 업데이트와 디자인 변경이 효율적으로 이루어짐
2. 웹표준 준수의 경제적 효과를 보여줌
    

7) 웹표준의 목적

• 팀 버너스 리가 웹을 발명시 정보의 무한한 공유를 표방함
• 어떠한 기기나 누구든지 정보에 접근할 수 있는 웹을 만들어야 함
  
  

8) 웹표준 준수 방법

• XML >> 마크업 확장 가능( 사용자 마음대로 태그를 확장하여 사용 가능)
  - 예) 스타크래프트2
  HTML >> 검증된 태그들만을 사용해라
• 구조와 표현, 동작을 분리하여 제작

9) 우리가 기억할 웹표준

• 요소를 의미대로 사용함
• 테이블은 정보를 테이블로 표시할 경우에만 사용
• 레이아웃은 div 요소 사용
• 제목은 <h1 ~6> 요소 사용
• 메뉴나 리스트는 li 요소 사용
• <FONT>, <BIG> 사용 X
• 스타일을 인라인, 속성으로 지정 X (http://www.csszengarden.com/)
  
  

10) 웹표준의 장점

• 수정과 관리가 용이
• 웹 접근성 향상
• 다양한 기기에서 접근 가능
• 검색엔진 최적화
• 검색엔진의 크롤러는 HTML을 그대로 해석하므로 문서구조가 명확하지 않으면검색이 쉽지 않음
• 인간 뿐 아니라 검색엔진에게도 친절한 페이지를 만들자. 시각장애인을 위한 리더기도 마찬가지.