웹마스터 팁

xHTML 사용을 생활화 합시다.. -_-;;

지금은 HTML 에서 XML 로 전환중인 단계입니다..

이 HTML 과 XML 중간이 xHTML 이지요..

xHTML 에 대해 간략히 소개해보고자 합니다..

xHTML 은 모든 브라우져에서 지원합니다... 표준이지요..

계속 인터넷익스플로러(이하 IE 라 함) 전용속성에 따라가다보면

현재 진행중인 MS 의 PC시장 독점 전략을 도와주는 꼴이 되지요..



서문이 길었네요.. 시작합니다..

닫는 태그가 없는 경우..

img, embed 같은것들요..

모두 /> 로 닫습니다..

<img src="a.gif" />

혹은..

<img src="a.gif"></img>

이런식으루요..

따옴표 역시 빼먹어서는 안되구요..

혹시 제로보드에서 소스 봤을때.. <br /> 이란 태그 본 적 있으신지요..^^

br 은 문단의 흐름을 깨기때문에.. 표준이긴 하지만 w3c 에서 비추천 하더군요..

또.... 값을 제외한 모든건 소문자로 해주세요...

모든건.. p 와.. div.. 그리고 작은 한 속성을 지정할땐 span 에 id 주고.. css 에서...

아무튼.. 속성은 모두 css 에서 처리하는게 좋습니다.

즉.. img 에서의 width, height 같은건 상관없지만..

border="0" 을 써놓고 검사해봤더니 그곳에서 걸리더군요..

검사하는건 조금 있다가.. ^^



보통.. <style> 이런식으루 쓰시는데..

<style type="text/css">

이렇게 사용하셔야 합니다. 이게 표준이지요..




자바스크립트 사용하실때도..

<script> 로 그냥 쓰시면.. 이게 기본적으로 VBScript 로 되어있는 경우

자바스크립트를 인식하지 못하고 에러를 냅니다..

이땐..

<script type="text/javascript"> 이런식으로 사용하시는게 좋아요..


닫는태그는 [항상] 있어야 합니다.

없어도 된다는건 옛말이구요.. 이게 표준입니다.. -_-;

자세한건 www.w3.org / www.w3c.org 의 표준권고안을 살펴보세요..


자바스크립트에서도요..

<img src="a.gif" id="img1" />

이때.. 자바스크립트에서 이 객체에 접근..

이때 그냥

img1.src = "b.gif";

이런식으로 사용이 가능한데. 이건 IE 에서만 됩니다.

다른브라우저 사용시 아무것도 처리되지 않고 오류가 나지요..

이럴땐 변수를 하나 만들어놓고 그 안에 객체를 담거나 직접 사용하시면 됩니다..

두가지 예가 있겠네요..

obj = document.getElementById("img1");
obj.src = "b.gif";

이렇게 사용하는방법과..

document.getElementById("img1").src = "b.gif";

이런방법... 편한대로 하시면 됩니다..


그리고 이건 주제와 어긋난 얘기인데..

window.close();
window.open();

이런함수들 있죠? window 객체명 생략 가능합니다.

그냥 close(); 나 open(); 이런식으루.. 사용하시면 되죠..

document.location.href 이것도 그냥 location 이라고 사용하시면 됩니다..

window 객체 바로 하위에 location 객체가 있구요.. 뒤의 href 는 생략해도 무방합니다..

새로운 기능을 봤을때.. 이것이 표준인지

아니면 MS 의 비표준 확장인지 의심해보는것도 좋은 습관입니다.. -_-;;

꼭 IE 에서만 되는 기능을 구현하고 싶을때.. 이럴땐 아래의 if 문 안에 구현해주세요..

if(document.all) 로 검사하셔서.. 이게 참이 나오면 IE 고.. 아니면 이외의 브라우져..

document.all 은 MS 의 비표준 확장 객체이기 때문에 검사해보면 거짓이 나옵니다..

이 대신 document.getElementById() 를 쓰면되죠..

모든 내용은 body 태그 안으로 들어가야 하며,

이 외의 script 나 style 등은 head, body 둘 중 하나로 들어가야 합니다.

html 태그 하위에는 head 와 body 혹은 frame 태그만 올 수 있고요...

테이블은 가급적 사용하지 않는게 좋습니다.

모든건 div 로 사용가능합니다.

또한 웹에디터는 개념이 없습니다. 쓸데없는것들이 난무합니다..

직접. 작성하시는걸 추천하구요.. 이것도 하다보면 익숙해지겠지요..

나모웹에디터는 정말 개념이 없습니다.. 그나마 드림위버는 table -> div 변환기능이 있죠..


자신의 홈페이지가 xhtml 표준에 맞는지 검사하고 싶으시다면.. 한번 검사해보세요..

http://validator.w3.org/ 이곳에서 URL 입력하시면 됩니다..

검사하시면.. 거기서 여기저기 태클을 많이 걸겁니다-_-;..

나오는대로 하나씩 수정하시면 되지요..


확인해서.. 모든게 표준이면.. 그곳에서 마크를 부여하지요..ㅋ

http://canelia.net/

뭐 내용은 없지만.. 저도 달았습니다..-_-;;

그리고.. 기본소스 모양을 고칠 필요가 있습니다.

그건 http://canelia.net 의 소스를 참고하시구요..

간단히.. 기본소스만 적어놨습니다.


제일 상단에 이렇게 써주시는것..

<?xml version="1.0" encoding="euc-kr"?>

이걸썼더니.. 제대로 처리되지 않는경우..

이걸 php 로 인식해서 그런경우가 발생하는데

<?= "<?xml version="1.0" encoding="euc-kr"?>" ?>

이렇게 쓰시면 해결되지요...

여기까지 다 보셨나요?

헤헴.. 감사합니다..


http://www.w3c.org 한번 방문해보세요..

테이블 없이 저런 디자인이 가능하다는것..

css 덕분이죠..  뭐 테이블을 사용하면 안된다는건 아닙니다.. 필요할땐 써야죠.
제목 글쓴이 날짜
아이프레임 가로스크롤바 없애기 [3] 백승창 2004.05.28
처음올립니다;ㅂ; 너무 신기한 거 발견;; [19] 올리못™ 2004.05.30
relative 속성 레이어를 이용한 메뉴를 자리차지하지 않게... [1] PHASE 2004.06.03
어쩌다 나온 깔끔한 그레이 스크롤바.. 흠흠.. [11] ☺심심 2004.06.06
이미지에 필터만으로 그림자주기.. [15] Simsim 2004.07.07
도메인 포워딩 하기 [4] 나준혁 2004.07.27
동영상과 함께 자막 재생하기. [4] 세강:D 2004.08.16
경고창 없이 부모창 닫고 아기창에서 마우스 오른버튼 클릭시 아기창도 닫는다. [4] 詩와언어™ 2004.08.27
테이블 주위에 점선효과!!!~~(초간단팁!) [6] 초라 2004.09.25
TabIndex를 이용하여 탭키 컨트롤하기 [5] 손상모 2004.10.08
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
<button>태그를 아시나요? [6] 그냥이렇게。 2004.10.13
타이틀 바에 움직이는 타이틀 넣기. [5] 덜렁이 2004.10.16
스타일시트에서 링크포커스 없애기 [12] keymove 2004.10.26
W3C 표준 권고안. 앞으로 꼭 지켜주세요.. [14] canelia 2004.10.29
각 객체접근.. [2] canelia 2004.10.29
웹문서 검색을 대비한 헤더,푸터 나누기. [4] 그럴까? 2004.10.29
a링크를 이용 새창 띄우기 [10] 토토루 2004.11.07
웹폰트사용에 대한 실체를 밝힌다!! [22] Multi_Taeji 2004.11.13
최근게시물의 폰트크기와 링크색상 바꾸는 방법 LUFFY 2004.11.20