웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
W3C 표준 권고안. 앞으로 꼭 지켜주세요..
2004.10.29 14:00
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 덕분이죠.. 뭐 테이블을 사용하면 안된다는건 아닙니다.. 필요할땐 써야죠.
지금은 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 덕분이죠.. 뭐 테이블을 사용하면 안된다는건 아닙니다.. 필요할땐 써야죠.
댓글 14
-
dohoons
2004.10.29 21:50
테이블정도는 써줘야 -_- -
장석문
2004.10.30 16:20
이 HTML 과 XML 중간이 xHTML 이지요..
이라고 하셨는데요..
XHTML과 HTML은 별도의 표준이며
XML의 하나의 파생물입니다.
이 부분은 정확하게 알고 계시면 좋겠습니다. -
리스
2004.10.31 19:24
"XHTML과 HTML은 별도의 표준이며 XML의 하나의 파생물입니다."
사실이 저렇다면 HTML은 기존의 방법대로 사용해도 될런지요? 아니 되죠? -
canelia
2004.11.01 12:53
HTML 에서 XML 로 바뀌고 있는 단계입니다.
한번에 바꿔버리면 많은 사용자한테 혼란이 오겠죠..
그 중간에 생긴게 XHTML 이 맞습니다..
XHTML 은 XML 의 기초를 제공하는 것 뿐이구요
지금부터 XHTML 이나 XML 을 사용하면서 조금씩 준비하는게 좋습니다.
XHTML 은 HTML 의 다음버전이라 봐도 됩니다.. 비슷한게 많죠?
XML 처럼 사용도 가능하지요...
수학표기의 예:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>수학 예제</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3 </cn>
</logbase>
<ci> x </ci>
</apply>
</math>
</body>
</html> -
淸風明月(Pe-i)
2004.11.01 22:54
window.close();
window.open();
window 객체 생략은 새로 안거네요 ^^ -
nreal
2004.11.02 11:16
뭐 이런걸 따지는게 중요한건 아니지만 XHTML 은 XML 문서의 종류에 하나라고 보는게 맞다고 생각합니다
XML 문서 정의를 내리는 여러가지 방법이 있는데 XHTML 문서 위쪽에 보면 xhtml 을 정의한 dtd 가 있습니다. 그 dtd 를 수정하면 xhtml 표준과는 다르지만 xml 문서로는 맞는 그런 문서가 되는거죠.
<img>태그도 <img /> 로 해야 표준에 맞는것이지요...w3c 의 xhtml 표준 매뉴얼 보시면 어떤 태그가 내용물이 없는 태그인지 다 나와있습니다.
참고로 <img src="a.gif" /> 이렇게 쓰면 표준에 안 맞습니다 alt 어트리븃이 빠져있기 때문입니다. -
canelia
2004.11.03 19:01
네.. 맞네요.. 그렇군요...
으음.. 또 한가지.. embed 는 비표준이더군요..
네츠케이프에서 확장하고나서.. IE 도 똑같이 따라 적용한거고... 으음;; -
길™기획^실장
2004.11.06 00:40
중요.. 한건,
제로보드에서 걸리는게 쫌 많더라구요;; -
한현규
2005.01.05 10:14
w3에서 위의 사항이 나와있는 Recommendation 의 url 을 구할 수 있을까요 ??
원문을 좀 보고 싶은데...
가르쳐주세요~ -
김화성
2005.01.08 17:36
W3C HTML Home Page, http://www.w3.org/MarkUp/
HTML 4.01 Specification, http://www.w3.org/TR/html4/
XHTML™ 1.0, http://www.w3.org/TR/xhtml1/
XHTML™ 1.1, http://www.w3.org/TR/xhtml11/
Cascading Style Sheets Home Page, http://www.w3.org/Style/CSS/
CSS 2.1 Specification, http://www.w3.org/TR/CSS21/
---
현재 HTML 4.01, XHTML 1.0, XHTML 1.1 모두 W3C Recommandation이고,
CSS 2.1은 W3C Candidate Recommendation입니다.
XML과 같이 문서의 구조와 표현을 분리하는 추세로 가는거죠. -
로크
2005.01.21 20:05
저거 검사하는거 한글판없나요? -
오푸로
2005.11.08 12:17
이상적이긴 한데 현실적으로는 어려운. ^^ 일 같습니다. -
김성현
2006.09.25 20:03
이상의 현실화가 가장 중요하지요~~~ 어렵다 어렵다 하지만..
그래도 이상의 현실화가 그나마 가능하기 쉬운것이 웹이라 생각합니다.
힘냅시다. 전세계가 다양한 웹브라우징을 100% 지원하는 그날까지.. 화이팅!! -
정광수
2008.01.27 01:20
에디터 프로그램이 XML로 제작되도록 되어 있으면 좋을듯...
html... 이제 제대로 놀아보려고 했는데 XML로 전환 하라네 ㄱ-;;
제목 | 글쓴이 | 날짜 |
---|---|---|
아이프레임 가로스크롤바 없애기 [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]
![]() | 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 |