웹표준 웹표준 하길래 따라만 했지. 왜 웹표준을 지켜야 하는지 모르고 있었다.
각설하고 그 이유를 정리하면 다음과 같다.

1. 웹사이트를 더 빨리 불러온다.
2. 호스팅 비용을 낮추어 준다.
3. 재디자인시 보다 효율적이며 비용 발생을 줄여준다.
4. 전체 사이트의 시각적 일관성 유지에 도움이 된다.
5. 보다 나은 검색 결과를 얻게 된다.
6. 모든 방문자와 브라우저의 접근성을 높여준다.
7. 게다가 여러 곳에서 웹표준 사용을 늘려가고 있어 당신의 경쟁력, 즉 직업보장이 된다.

테이블은 왜 쓰면 안돼냐고 물으신다면..

테이블 사용의 문제
  : 표현 데이타와 컨텐츠의 혼용.
 : 페이지의 크기를 불필요하게 증가시킨다. 따라서 사용자가 방문할 때마다 표현
   데이타를다운받아야 한다.
  : 대역폭은 무료가 아니다.
  : 현재의 사이트와 내용(Contents)을 재디자인할 때, 매우 많은 작업과 비용을
   유발하게 된다.
  : 또한 전체 사이트의 시각적 일관성을 유지하는 데 매우 힘들고 과도한 비용을
   발생시킨다.
  : 테이블 기반 페이지는 웹을 이용하려는 장애인, 핸드폰과 PDA 사용자에겐
  접근성을 떨어뜨리게 된다.

http://www.softwant.com/standards/index.php 에서 만화를 통해 쉽게 웹표준을 설명하고 있다. 한글로 번역해놓은것 같은데, 아무리 쉽게 설명했다고 해도 아무래도 기본지식이 필요한건 어쩔수 없나보다.

정말 내가 찾던 프로그램.
개인적으로 css 포멧을 지켜서 코딩했는데 요즘들어 왠지 압축스타일이 끌린다.
다운로드 : http://www.urixsoft.nm.ru/soft/MinCSS/MinCSS.zip
출처 : miniwini

이미지라는것을 강조하기 위해 좀 강력한(?) 예를 들었다.

제목만 보고 이미 감잡으신분들이 계시겠죠.
PHP의 GD 라이브러리를 이용해서 텍스트를 이미지로 바꿔주는 소스입니다.
간단한 텍스트 이미지 하나 만들려고 포토샵을 실행하는 번거로움을 줄일수 있겠죠..^^;
원본 소스로는 한글을 지원하지 않아서 우선은 영어로만 테스트를....
(누...누가 한글지원하게좀 해주세요;;)

출처는 PCDTR 이지만 이곳도 자바스크립트를 이용한 원본을 PHP버젼으로 바꾼거 같네요.
사용법은 간단합니다.

1. 다운받는다
2. image.php 를 열고 자신에 맞게 수정한다.
3. image에 지정한 사용할 폰트를 같은 디렉토리 안에 넣는다.
4. 서버에 올린다
5. index.php 를 실행한다.

원본에는 $text만 지정하게 되어있는데 저같은 경우는

와 같이 폰트크키, 색깔까지 변수로 직접 입력하고 있습니다;
즉 image.php를 실행하실때는

http://경로/image.php?text=내용&font_size=크기&font_color=색깔
과 같이 사용하시면 됩니다.

지금 만들고 있는 스킨에 적용해 봐야겠네요..

Table에서 CSS로 바꾸면서 가장 헷갈리는것중의 하나가 아닐까 생각된다.
실제로 나도 Width를 사용하게 되면 무조건 Padding과 Border를 포함하여 생각해 왔는데 이것은 틀린것이다. 내 경우를 예로들면 CSS에서 Position이 아닌 float을 사용하여 레이아웃을 잡았을때 콘텐츠부분과 메뉴부분의 동일선상에 정렬되지 않고 한쪽이 아래로 내려가는것을 볼 수 있는데, 그 이유중 하나가 바로 위와 같은 내용이 아닐까 생각해본다. width에 맞지 않는 contents. 맞나? 조심하자;;

XHTML 일반 문법 준수

정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.

표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 한다



모든 요소는 완벽하게 중첩되어야 한다.
모든 요소들이 완벽하게 내포(nest) 되어야 하는 것은 필수적이다. 중첩(overlapping)이 부적합(illegal)한 것임에도 불구하고 기존 웹 브라우저들에서 널리 관대하게 사용되었다.



모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호로 묶는다.



모든 요소와 속성은 소문자여야 한다.
XHTML 코드를 생성하거나 정리할 때 태그 및 속성의 대/소문자 환경 설정에 상관 없이 XHTML 코드에서 HTML 요소 및 속성의 이름을 소문자로 강제로 설정해야 한다. 이러한 차이는 XML은 대소문자를 구별(case-sensitive)하므로 필수적이다. 예를 들어, <li>와<LI>는 서로 다른 태그들이다



모든 요소는 닫아야 한다.
DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한다. 코드를 생성하거나 XHTML을 정리할 때 코드에 닫기 태그를 삽입한다.
빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다. 예를 들어, <br>은 잘못된 것이며 <br></br> 또는 <br/>이 올바른 형식이다. 빈 요소로는 area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta 및 param이 있다.
또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다(예: <br/>가 아니라 <br />).



모든 속성값은 속성이 함께 선언되어야 한다.
모든 속성은 최소화되어 표기 되면 안 된다. XML은 속성의 최소화를 지원하지 않는다. 속성 값의 짝들은 모두 작성되어야 한다. a, applet, form, frame, iframe, img, map 등의 요소에는 name 속성뿐만 아니라 id 속성도 있어야 한다. 예를 들어, <a name="intro">Introduction</a>는 잘못된 것이며 <a
id="intro">Introduction</a> 또는 <a id="section1" name="intro">Introduction</a>.가 맞다.
또한 <td nowrap>은 잘못된 것이며 <td nowrap="nowrap">이 올바른 형식이다. 최소화될 수 없는 속성으로는 checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly 및 selected가 있다.
참고: HTML 브라우저에서 HTML 4를 지원하지 않는 경우, 부울 속성이 전체 형식으로
표시되면 브라우저에서 이들 속성을 해석하지 못할 수도 있다.


모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
language 속성이 사용되지 않는 HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야 한다. 코드를 생성하거나 XHTML을 정리할 때 script 요소에서 type 및 language 속성을 설정하고 style 요소에서 type 속성을 설정한다.



모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 설정하고, 찾을 수 없는 alt 속성을 보고한다. 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
자바 스크립트에서 HTML 태그 쓰기에서 많은 경우 오류를 낸다. 자바스크립트 내에 데이터는 CDATA 형식으로 간주되기 때문에 HTML태그가 들어가게 되면 오류를 내게 되어 있다. 예를 들어 아래 예제는 잘못된 방식이다.

HTML4에서는 SCRIPT내에 데이터 중 시작 태그나 코멘트 부분은 인식이 안되지만 종료
태그는 인식이 되기 때문에 이를 역슬래시로 표시해야 한다.

XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언된다.
결과적으로, <과 &는 마크업의 시작으로 처리되고, &lt;과 &amp;와 같은 개체(entities)들
은 XML 프로세서(processor)에 의해 각각 <과 &로의 개체 참조로서 인식되므로
CDATA로 마크업 하여 표시하는 게 좋다.



모든 문서 내 URL에서 &를 쓰면 안 된다.
URL에 &가 포함되어 있는 경우 에러를 낼 수 있다. 이것은 &가 XML 엔티티의 시작으로 인식 하기 때문에 생기는 문제이다. 기존 웹브라우저는 이러한 에러를 복구해 주고 있지만 유효성 검사기에서는 에러를 내게 된다.
HTML 문서 내에서만 &를 &amp;로 바꾸어야 하며 브라우저 주소창이나 이메일 본문에
서는 &를 써야 한다. 웹 서버에서는 &amp;가 아니라 &만을 인식하기 때문이다.



다 알고 있는거라 자신하지 말자.
이밖에도 많은 유용한 팁이 많은데.....
다음에 또 생각나면 옮겨보자 :)

CSS 공부도 할겸 태터 스킨 한번 만들어 봤다.
CSS 어렵다..-_-a
예전에는 디자이너 때려치고 코더로 일할까 싶은 생각을 들정로로 table과 친했었는데,
이제 테이블과 작별하는게 대세라고 하니;;

회사에서 아무런툴도 없이(오직 Notepad로만;;) 만들었더니 이런 어의없는 결과가 나와버렸다; 허허허
이제 집에가서 제대로 한번 만들어 볼까....했는데,
갑자기 귀찮아졌다.

버그가 한 2만개 정도 존재하는거 같은데...
아....혹시 나중에 다시 만들면 그때 잘 만들자;