XHTML 문법 !!

Programming/HTML 2010. 5. 17. 13:52

■ HTML 개발툴의 종류

1. 메모장

- 장점 : 가장 가벼움, 새로운 프로그램(Application)을 설치할 필요가 없음

- 단점 : 오타가 나기 쉽고, 모든 코드를 외워서 코딩해야 함

2. 텍스트 에디터 : EditPlus, UltraEdit 등

- 장점 : 꽤 가벼움, 유용한 기능들이 존재함

- 단점 : 개발시 불편한 점이 있음(코드 자동 완성 기능 등이 없음)

3. 웹에디터(WYSIWYG 가능 툴) : DreamWeaver, 나모웹에디터 등

- 장점 : 마우스만으로 코딩이 가능함, 쉽고 편리한 코딩이 가능함

- 단점 : 유료, 불필요한 코드가 생길 가능성이 높음

편리해 실제 코딩에는 익숙하지 않게 됨

4. IDE(통합환경 개발툴) : Eclipse, NetBeans, Aptana 등

- 장점 : 자동완성 기능과 디버깅이 가능함(일부), 그 외 기능들

- 단점 : 복잡해 보임

프로그램 자체가 무거움

WYSIWYG란?

What You See Is What You Get "보는 대로 얻는다" 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다.

IDE란?

코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어이다.

■ Aptana studio의 장점

1. 브라우져 실행없이 바로 실행 결과를 확인 가능

2. 강력한 자동완성기능과 크로스 브라우징 지원 확인

3. 클릭만으로 코딩을 지원

■ Aptana Studio의 설치

1. 홈페이지 접속 : http://aptana.org/

2. 다운로드 페이지로 이동

3. 다운로드

4. 압축풀기 및 실행환경 설정

■ Aptana Studio의 실행

1. 첫 화면

2. 환경 및 폰트 설정

3. 원하는 폰트로 설정

폰트 선택시 주의사항

1. 숫자 1과 소문자 l과 대문자 I가 다르게 표현되어야 함(현재 나눔고딕)

숫자 1과 소문자 l과 대문자 I가 다르게 표현되어야 함(현재 나눔고딕코딩 폰트)

2. 숫자 0과 대문자 O가 다르게 표현되어야 함(현재 나눔고딕)

숫자 0과 대문자 O가 다르게 표현되어야 함(현재 나눔고딕코딩)

3. 한글주석도 들어가므로 한글도 깨지지 않고 제대로 표현되어야 함

4. 추천폰트 : 나눔고딕코딩폰트(http://dev.naver.com/projects/nanumfont)

Bitstream Vera Sans Mono(veramono로 검색)

■ aptana 시작 및 프로젝트 생성

1. 프로젝트 텝에서 default web project 선택

2. 오늘날짜로 프로젝트를 생성

■ aptana view 소개 및 상세 설정

1. project 폴더 view

2. outline view

3. source view

4. preview tab

5. 상세 설정

1. HTML이란?

■ Hyper Text Markup Language의 약자로 웹페이지를 작성하기 위한 언어

■ world wide web에서 볼 수 있는 하이퍼텍스트 문서를 만들기 위한 언어

■ 하이퍼텍스트(Hyper Text)

- 텍스트에 하이퍼링크 설정이 가능하고 텍스트들이 서로 연결되어

있다는 의미

- 단순한 클릭으로 다양한 정보를 접할 수 있도록 편리함을 줌

■ 마크업(Mark up)

- 종이 인쇄 산업시대때 복사 편집인이 인쇄할 종이의 여백 부분에 특별

한 글꼴이나 색을 지정하기 위해 표시(마크업) 했던 것에서 마크업이란

말이 사용 됨

2. HTML의 기본구조

■ 태그라는 문법으로 이루어짐

■ 기본태그 : <html>, <head>, <title>, <body>태그

■ 기본태그로만 이루어진 기본HTML

예제 1 : c:\html_study\0525\htmlEx01.html

<HTML>

<HEAD>

</HEAD>

<BODY>

My First HTML

</BODY>

</HTML>

1. XML의 정의

■ ‘eXtensible Markup Language’ 의 약자

■ Extensible : 확장가능하다는 의미

여기서의 확장가능은 markup이 확장가능하다는 뜻이 된다. 즉 우리가 어떤 실제 데이터를 표현하고자 할 때 이 실제 데이터에 특정 정보를 덧붙일 때 어떤 기호나 표시를 미리 정해진 범위 내에서 사용하는 것이 아니라 필요에 따라 이를 사용자가 새롭게 정의하는 것이 가능하다는 것을 의미한다.(여기서 새롭게 정의한다는 것은 사용자가 정말 아무런 규칙없이 정의하는 것이 아니라 정해진 규칙 안에서 사용자가 새롭게 정의할 수 있다는 뜻이다.)

■ Markup : 조판지시라는 뜻

인쇄업계에서 출판할 원고의 특정 부분을 어떻게 출력할 것인가를 인쇄업자에게 지시하는 내용을 편집자가 써 넣은 것은 의미하는 용어로 사용되었다. 즉 출력하고자 하는 데이터에 어떤 정보를 덧붙이고자 할 때 이를 표시하기 위한 방법이며 이런 부가 정보를 우리는 메타 데이터(meta data)라고도 한다.

■ Language : 언어

컴퓨터에서 사용하는 언어라는 뜻인데 컴퓨터 분야에서 보통 언어라고 하며 프로그래밍 언어를 뜻하지만 XML에서의 언어는 프로그래밍을 위한 언어는 아니다. XML에서의 언어는 어떤 정보를 표현하기 위한 수단을 의미한다.

■ 어떤 정보를 표현하는데 있어 필요한 부가 정보를 함께 기술하기 위한 방법을

사용자가 새롭게 정의하여 사용할 수 있는 프로그래밍 언어

2. 문서의 기본구조

■ 내용 : 실제 본문내용(데이터)

■ 구조 : 문서의 구성 정보(제목, 장, 절, 각주, 문단 등)

■ 스타일 : 문서를 표현하기 위한 정보(글꼴, 글자색, 크기, 여백 등)

3. XML의 발전 과정

■ SGML(Standard Generalized Markup Language)

① 기술적 문서 마크업을 생성하는 기법을 제공함

② 다양한 입력으로부터 내용, 구조를 표준화하기 위한 방법 제공

③ 시스템 독립적 / 논리적인 정보만을 제공하기 때문에 포맷정보와 내용을 분리함

④ 많은 장점을 가지고 있지만, 구성과 문법이 복잡하여 사용하기 힘듦

⑤ 쉽게 사용하기 위해 만들어진 마크업 언어가 HTML임

■ HTML(Hyper Text Markup Language)

① 웹에서 정보를 표현할 목적으로 제안한 마크업 언어

② SGML 태그중 일부를 미리 정의하여 사용하기 쉽게 만듦

③ 인터넷의 발달로 가장 많이 쓰이는 마크업 언어

■ HTML의 단점

① 사용할 수 있는 태그가 한정적임 : 유연성과 확장성이 떨어짐

② 정보를 표현하는데 집중 : 태그 내용이 어떤 의미인지 알 수 없음

③ 구조화환 정보를 표현하고 검색하기 어려움 : 정보간 연관성을 표현할 수 없음

④ 문서의 유효성을 검증하기 어려움

⑤ 전체 문서만 표현이 가능함(일부만 표현하기 어려움) : 문서의 조작이 어려움

■ XML의 탄생

① SGML과 HTML의 문제점을 해결할 수 있는 차세대 마크업 언어

② SGML로부터 정보의 구조적인 기술방법과 정보내용과 표시정보를 분리한 구조를 차용함

③ HTML로부터 인터넷의 이용 환경을 이어 받음

4. XML의 기본 개념

■ 구조적인 데이터로 표현하여 작성함

■ HTML과 비슷해 보이지만 다름

■ 텍스트이지만 읽히는 것만을 목적으로 하지 않음

■ 확장할 수 있음

① XML(eXtensible Markup Language) : extensible의 뜻이 ‘확장가능한’

② 문서의 데이터도 계속 늘어날 수 있고, 사용자가 태그를 직접 정의해서 사용함

■ 기술의 집합

① Xlink, XPointer, XFragments, CSS, XSL, XSLT 등 기술의 집합

② 이 외에도 보안, 저장기술 등 다양한 분야의 기술과 접목함

■ 새로운 기술이 아니라 발전된 기술

SGML과 HTML의 장점을 발전시켜 만든 마크업 언어

■ XML은 HTML을 XHTML로 이끌었음

① 기존 HTML이 XML의 영향을 받아 변형한 것이 XHTML

② XHTML은 확장형 HTML임

■ XML은 모듈

다른 포맷을 조합하거나 재사용함으로써 새로운 문서 포맷을 정의하는 것을 허용함

■ XML은 RDF와 시맨틱 웹의 토대

① 시멘틱 웹이란?

Semantic Web은 웹상에 존재하는 여러 가지 자원(웹 문서, 각종 파일들, 서비스 등)간에 관계나 의미의 정보를 컴퓨터가 스스로 처리할 수 있는 형태(온톨로지)로 표현하고 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.

온톨로지(Ontology)란 사람들이 사물에 대해 생각하는 바를 추상화하고 공유한 모델로 정형화되어 있고, 개념의 타입이나 사용상의 제약조건들이 명시적으로 정의된 기술을 의미한다.

② RDF란?

Resource Description Framework(자원묘사 프레임워크)의 약자로 XML의 문제를 해결하기 위해 나온 기술로, XML은 사람이 이해하기는 어렵지 않으나, 기계(컴퓨터)가 이해하는 데 무리가 있다.

즉, 태그의 사용법은 정의 내릴 수 있으나, 컴퓨터가 스스로 태그간의 연관성을 추측할 수는 없다.

그렇기 때문에 RDF를 이용하면 컴퓨터가 문서의 태그간의 의미와 문서의 의미를 표시할 수 있고, 자동화 처리가 한결 쉬워진다.

RDF는 데이터가 처음 생성되거나 업데이트 될 때 생성되는 정보이며, 검색엔진의 로봇들이 데이터를 찾는 키워드이며, 웹 페이지의 지적 권리를 나타내는 지표이다. 또 웹을 인식하며 돌아다니는 기계들이 정보를 인식하고 교환할 수 있도록 정보 상호 운용성을 제공한다.

■ 라이센스 제약이 없고, 플랫폼 독립적이며, 많은 자원이 있음

① XML은 무료로 개발해서 사용할 수 있음

② W3C에서 기술지원을 하고 있기 때문에, 별도의 개발 비용도 없음

5. XML의 활용분야

■ 메타데이터 : 데이터에 대한 정보를 가지는 데이터

■ 소프트웨어 설계, 배포, 설정

■ 멀티미디어 그래픽(png, svg, vml, jsml 등)

■ 전자 상거래

■ 과학, 교육

■ 무선 웹 컨텐츠

■ 보안 등

6. XML의 문서 구조

■ XML 선언부

<?xml version="버젼" [ encoding="문자코드" standalone="yes or no" ]?>

① ‘<?xml’ 로 시작하고 공백이 없어야 함

② 버전은 필수속성, 인코딩과 독립형 여부는 선택 속성

■ XML 주석

■ XML 요소(Element)

① XML 문서 내의 데이터를 표현하기 위한 태그 정의와 데이터를 말함

② XML몸체에 반드시 한 개의 최상위 요소가 있어야만 함(root element)

③ 시작과 종료태그는 반드시 한 쌍(pair)으로 존재해야 함

④ 다른요소의 시작과 종료태그를 겹치면 안됨

■ XML 속성(Attribute)

① 요소 내의 정보나 데이터를 표현하기 위한 방법

② 하나의 요소에 여러개의 속성을 표현할 수 있음

③ 속성은 속성명과 속성값으로 이루어짐

<person	id =	"100">
↑	↑	↑
요소명	속성명	속성값

7. XML의 문서 제작

■ XML의 종류

① Well-formed 문서 : XML의 문법에 맞게 만들어진 오류없는 문서

② 유효한(Valid) 문서 : DTD로 정의된 규칙대로 만들어진 검증된 문서

■ Well-formed 문서 예제

XMLEx01.java

<?xml version="1.0" encoding="UTF-8"?>

</person>

</person>

</persons>

■ DTD 선언 : [!DOCTYPE 루트 엘리먼트이름 [ ...내부DTD... ]>

■ 요소 선언

<!ELEMENT 이름 (내부 엘리먼트이름 or #PCDATA or EMPTY) >

■ 선언자 기호

선언자 기호	설 명
무기호	특별한 기호가 없으면 지정한 요소를 1번만 정의
,	선언한 요소의 순서대로 자식 요소를 사용
\|	선언한 요소의 사용에 따라 자식 요소를 골라 사용
()	() 요소를 그룹으로 선언해서 정의
*	선언한 요소를 0번 이상 사용할 수 있음(0~n)
+	선언한 요소를 1번 이상 사용할 수 있음(1~n)
?	선언한 요소를 0, 1번 사용할 수 있음

PCDATA란?

PCDATA는 Parsed Character DATA 의 약자로서 XML 파서(해석기)가 해석하는 문자 데이터를 의미함.

해석을 한다라는 말은 문자 데이터 안에 XML 권고안에 규정되어 있는 문자로 쓰여 졌는지 조사하고, 또한 엔티티 참조가 있다면 엔티티 참조에 해당하는 값으로 치환하는 작업을 의미함

■ 속성 선언

<!ATTLIST 요소이름 속성이름 속성타입 속성_기본값 데이터_기본값>

■ 속성의 기본값

속성 기본값	설 명
속성 초기값	속성 값을 지정하지 않는 경우에는 초기값을 사용하여 정의함
#FIXED	XML 문서에서 속성을 정의할 수도 있고, 안할 수도 있음. 명시한다면 초기값과 일치
#IMPLIED	XML에서 속성을 명시할 수도 있고, 안할 수도 있음(초기값 X)
#REQUIRED	속성을 반드시 명시적으로 사용해야 함(초기값 X)

■ 속성 타입

속성 타입	설 명
열거형	사용자가 정의해 놓은 여러 속성 중 하나를 선택하도록 정의
ID	속성 값이 유일한 문자 데이터를 의미, 요소를 구분하는 데 사용(숫자로 시작 불가)
IDREF	속성 값이 문서 내부에서 선언한 ID를 참조
IDREFS	속성 값이 문서 내부에서 선언한 여러 ID를 참조
NMTOKEN	ID와 유사하고 속성 값을 XML 문서 작성 규칙에 맞게 작성해야 함
NMTOKENS	공백 문자로 구분한 NMTOKEN을 여러 개 사용 가능
ENTITY	외부의 이진 데이터 참조
ENTITYS	외부의 이진 데이터 이름을 여러 개 참조

■ DTD 문서 예제

XMLEx02.java

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE 학생정보 [

<!ELEMENT 학생정보 (학생)>

<!ELEMENT 학생 (이름,전화,이메일)>

<!ELEMENT 이름 (#PCDATA)>

<!ELEMENT 전화 (#PCDATA)>

<!ELEMENT 이메일 (#PCDATA)>

<학생정보>

<학생>

<이름>홍길동</이름>

<전화>010</전화>

<이메일>hong@korea.com</이메일>

</학생>

</학생정보>

XMLEx03.java

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE 회원목록 [

<!ELEMENT 회원목록 (회원+,이달의회원,신규회원)>

<!ELEMENT 회원 (이름,전화번호)>

<!ELEMENT 이름 (#PCDATA)>

<!ELEMENT 전화번호 (#PCDATA)>

<!ELEMENT 이달의회원 EMPTY>

<!ELEMENT 신규회원 EMPTY>

<!ATTLIST 회원 등급 (준회원|정회원|우수회원) "준회원">

<!ATTLIST 회원 회원번호 ID #REQUIRED>

<!ATTLIST 이달의회원 회원번호 IDREF #REQUIRED>

<!ATTLIST 신규회원 회원번호 IDREFS #REQUIRED>

<회원목록>

<회원 등급="정회원" 회원번호="A123">

<이름>Michael</이름>

<전화번호>010</전화번호>

</회원>

<회원 회원번호="B125">

<이름>마루치</이름>

<전화번호>010</전화번호>

</회원>

<이달의회원 회원번호="A123"></이달의회원>

<신규회원 회원번호="B125 A123"/>

</회원목록>

■ XHTML과 HTML의 차이점

1. W3C에 따르면 XHTML은 HTML을 재구성한 것이라 정의함

2. 기본적으로 거의 똑같이 작동함

3. XHTML을 쓴다는 것은 좀 더 엄격해진 규칙과 한 두 개의 속성이 추가된 HTML 을 사용하여 사이트를 제작한다는 것

4. 과거의 HTML에서는 종료태그를 사용하지 않아도 표현이 되었음

5. 이런 엄격하지 않은 특성 때문에 브라우져 별로 다르게 표현될 가능성이 있음

6. XML의 엄격한 특성과 HTML이 가진 심플함을 같이 가지고 있는 XHTML

7. XHTML은 신,구 버전의 브라우져에서 HTML처럼 작동하는 XML이며,

PDA, 휴대폰, 스크린리더까지 인터넷기기가 모두 사용할 수 있음

8. XHTML 1 버전이 HTML의 4버젼을 대신함

■ XHTML의 전체 모양과 서식

1. 전체 모양

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>어떻게 보여질까요?</title>

</head>

<body>

<h1>마구 궁금합니다.</h1>

</body>

</html>

2. XHTML의 서식

① 요소명은 ‘< >’으로 둘러싼다.

<h1> 제목입니다. </h1>

② <요소명> ~ </요소명> 형식으로 기술한다.

- 시작태그와 종료태그가 정확하게 기술되어야 한다.

- HTML에서는 시작태그나 종료태그를 생략할 수 있는 요소가 존재하지만,

XHTML에서는 생략할 수 없다.

- <img>나 <p>처럼 종료요소가 없는 경우도 있음

이 경우에 <요소명 /> 종료 ‘/’를 표현해 주어야 함(빈 공백도 기술)

③ 요소에 속성을 부여할 때 시작태그를 <요소명 속성명 = “속성값”> 형식

<a href="http://www.hanbitedu.co.kr">한빛교육센터</a>

- 요소명 : a

- 속성명 : href

- 속성값 : http://www.hanbitedu.co.kr

- 요소명과 속성명은 반드시 빈공백으로 구분함

- 속성명과 속성값은 = 으로 연결

- 속성값은 “ ”으로 둘러쌈(‘ ’ 홑따옴표도 사용가능하나 관습상 “ ” 사용)

④ 하나의 요소에 복수의 속성을 부여할 때는 빈공백으로 구분

⑤ 부모 요소와 자식 요소의 관계를 적절하게 지정함

<p>자세한 내용은 <a href="http://www.hanbitedu.co.kr">한빛교육센터</a> 참조</p>

- p 요소가 부모 / a 요소가 자식 요소

- 즉 요소가 번갈아 적용되면 안됨

<p>자세한 내용은 <a href="http://www.hanbitedu.co.kr">한빛교육센터</p> 참조</a>

- 부모와 자식요소의 관계가 적절한 상태를 정형식(well-formed)이라 표현함

⑥ 공백문자 처리

- 유니코드에서 스페이스, Tab키, 엔터 등이 공백문자

- 아무리 많은 공백문자가 포함되도 하나의 공백문자로 정리됨

- 시작태그 바로 뒤 공백문자, 종료태그 바로 앞의 공백문자는 무시됨

⑦ 태그나 속성명은 모두 소문자로 적음

- XHTML에서는 대소문자 구별함

- 속성값이나 내용은 대소문자 구별 필요없음

⑧ 모든 속성에는 값이 있어야 함

- 모든 속성은 값을 가져야 함

잘못된 예 :

바뀐 예 :

⑨ 모든 < 와 & 등은 변환해줌

- < : <

- & : &

잘못된 예 :

바뀐 예 :

■ XML 선언

1. XHTML의 경우 XML이기 때문에 xml 선언문이 필요

2. W3C에서 반드시 선언할 필요는 없다고 이야기 하고 있음

3. 문서의 MIME Type이 정확하고 Charset이 UTF-8(또는 UTF-16)

일 때에는 XML 선언을 생략할 수 있음

MIME 타입이란?

- Multipurpose Internet Mail Extension의 약자

- 여러 문서를 주고 받기 때문에 클라이언트가 다양한 타입의 데이터를 어떻게 처

리하는지 사전에 약속하지 않으면 문제가 발생

- 이를 위해 Mail에서 사용하던 MIME 타입을 이용하여 클라이언트와 서버간의 주고

받는 데이터의 타입을 지정

- 주타입/서브타입 형식으로 지정

- text, multipart, message, application, image, audio, video 7개 주 타입

- 각 주타입에 서브타입들이 존재함

4. 선언 문법

<?xml version="1.0" encoding="UTF-8"?>

① 버전은 XHTML버젼이 아닌 XML 버전을 지정

② 인코딩은 character code set을 지정함(utf-8, 16, euc-kr 등)

UTF-8이란?

유니코드(한 개의 문자코드 체계에 다언어처리를 가능하게 한 문자셋)의 종류

8비트 가변 멀티바이트로 문자를 표현함(한글 3바이트 처리)

UTF-16이란?

유니코드 한 종류로 16비트 가변 바이트로 문자를 표현

일부 브라우져에서 지원하지 않음

EUC-KR이란?

유닉스 서버와 워크스테이션의 표준 문자세트코드

■ DTD(Document Type Declaration) 선언

1. DTD 선언의 이유

- 현재 문서가 어떠한 구조를 갖고 있는지, 어떠한 표준을 준수하고 있는지를

브라우저에게 알려주는 역할

- HTML과 XHTML은 여러 버전이 있으므로 정의해주어야 브라우져가 맞게 해석

- 올바른 DOCTYPE이 아니라면 마크업과 유효성 검사 불가능

- DOCTYPE에 따라 원하는 결과가 수행되지 않을 수도 있음

2. DOCTYPE의 종류

① Transitional : 유연하고 덜 까다로운 DTD

② Strict : 표현을 위한 마크업 요소와 속성을 사용하는 엄격한 DTD

③ Frameset : 90년대 스타일로 frameset을 사용하는 DTD

3. DOCTYPE 선언의 내용

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

① 공개 식별자와 시스템 식별자로 구성됨

- 공개 식별자 : -//W3C//DTD HTML 4.01 Transitional//EN

- 시스템 식별자 : http://www.w3.org/TR/html4/loose.dtd

② 공개 식별자는 문서형 정의를 참조하기 위한 식별자로 임의로 바꿀 수 없음

③ 시스템 식별자는 그 문서가 준수하는 문서형 정의를 참조하는 URI

(상대경로로 지정 가능)

④ HTML에서는 시스템 식별자 생략 가능 / XHTML에서는 생략 불가

4. DTD 버전의 종류

■ http://en.wikipedia.org/wiki/Document_Type_Declaration

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

5. 사용할 DOCTYPE 선정

① 가장 무난한 DTD는 XHTML 1.0 Transitional

- a요소의 target 속성 사용 가능

- iframe 사용가능

■ 네임스페이스와 언어코드

1. <html> 요소에 xmlns 속성과 lang 속성에 코드를 지정

2. xmlns 속성 : 네임스페이스를 지정

XHTML에는 [http://www.w3.org/1999/xhtml]이라는 네임스페이스가

주어져 있으므로 이를 값으로 지정

네임스페이스는 단지 구분의 의미밖에 없음

3. 언어코드는 xml:lang 속성으로 지정함

- 언어코드는 ISO 639 로 규정되어 있음

(http://ko.wikipedia.org/wiki/ISO_639)

- 한국어는 [ko], 영어는 [en], 프랑스어는 [fr], 중국어는 [zh] 등

- XHTML1.0에서는 후방호환성(오래된 브라우저도 문제없이 표시해, 안정적

으로 동작하도록 하는 것) 을 고려하여 lang 속성으로 xml:lang 속성과

같은 값은 지정한다. (XHTML1.1에서는 lang속성자체가 인정되지 않기

때문에 xml:lang 속성만 언어코드로 지정한다.)

■ 타이틀

1. <head> 요소 안에 반드시 한번만 지정

2. 페이지의 내용을 구체적으로 표현

잘못된 예 :

바뀐 예 :

<title>XHTML과 HTML에 대한 설명</title>

■ MIME 타입과 문자코드 셋

1. <head>요소 안의 자식 <meta>요소의 http-equiv 속성, content속성

2. 한글등 비 ASCII문자가 나오는 부분보다 앞(title 태그보다 앞부분)에 지정

3. http-equiv 속성은 HTTP헤더와 동일한 정보를 추가적 또는 우선적으로

출력지시

MIME 타입	HTML4	XHTML1.0	XHTML 1.1
Text/html	추천	가능	비추천
Application/xhtml+xml	금지	추천	추천
Application/xml	금지	가능	가능
Text/xml	금지	가능	가능

4. 문자코드셋은 xml선언 속성에서 지정한 경우 중복하지 않아도 되나, 일부

브라우져에서 인코딩 속성의 정의를 정상적으로 인식 못할수도 있으므로

“charset=UTF-8” 으로 지정하는 편이 좋음

■ 설명문과 키워드

vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,

primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,

FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic

html,internet,database,development,Web building,Webmaster,html guide" />

1. meta요소에 name 속성과 content 속성을 추가해 메타데이터를 지정가능

2. name 속성 : description이라 지정해 설명문을 기술

3. name 속성 : keyword라 지정해 keyword를 기술

4. 검색엔진이 읽어드림 / 하지만 악용하는 사이트가 있었기 때문에 현재는

많이 반영되지는 않음

5. 하지만 일부 검색엔진에서는 아직도 리스트하고 있으므로 지정하는 것이 좋음

6. 길이는 권고안에 없지만 적절한 길이 / 키워드는 동의어와 유의어 포함

■ 익스플로러 8에서 이전 버전으로 랜더링하는 법

1. DTD가 없는 웹 사이트 대응 방법

•Quirks Mode란 DTD를 표준에 따라 인식하지 못했던 과거의 IE5 브라우저

의 렌더링을 그대로 흉내 내는 모드

2. DTD가 있는 웹 사이트 대응 방법

DTD가 있고 IE5에 최적화 된 페이지 대응 방법

DTD가 있고 IE5에 최적화된 웹 페이지는 HTML 소스 코드 <head>…</head> 안쪽에 다음과 같은 코드 한 줄을 포함시키면 된다.

DTD가 있고 IE6에 최적화 된 페이지 대응 방법

IE6에 최적화 된 페이지는 IE7에 최적화 작업 후 다음 코드로 대응한다.

DTD가 혼재되어 있는 웹 사이트 대응법

DTD가 없는 페이지는 IE8이 Quirks Mode로 렌더링 하기 때문에 아무런 대응을 하지 않아도 페이지는 깨지지 않는다. DTD가 있는 페이지에 한하여 IE7에 최적화 시킨 후 다음 코드를 적용 하면 된다.

가장 최신의 브라우져로 랜더링

■ 참고 서적 및 사이트

1. 제프리 젤드만의 웹표준 가이드

2. 웹표준 교과서

3. CSS 마스터 전략

4. CSS 완벽 가이드

5. 크리에이티브 디자이너를 위한 웹표준

6. 실용예제로 배우는 웹표준

7. http://w3c.org

8. http://validator.w3.org/

9. http://jigsaw.w3.org/css-validator/

10. http://riddle.pl/emcalc/

11. http://en.wikipedia.org/wiki/Document_Type_Declaration

12. http://validator.kldp.org/

13. http://wave.webaim.org/

14. http://w3schools.com/

15. http://trio.co.kr/webrefer/html40/interact/scripts.html

16. http://msdn.microsoft.com/ko-kr/library/cc817575(en-us).aspx

17. 마이크로소프트웨어 잡지

18.http://html.nhndesign.com/?mid=blog&category=87&page=2&document_srl=654

19. http://www.wah.or.kr/index.asp

20. XML 원리와 응용

저작자표시

'Programming > HTML' 카테고리의 다른 글

FaceBook Share.php (0)	2015.04.28
HTML 색상표 (0)	2010.05.03
ASCII 코드 (0)	2010.05.03

ABOUT ME

공부하는 민군 공부하는 민군

'Programming > HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Programming > HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바