HTML5의 이해
W3C : World Wide Web Consortium의 약자로 웹 표준을 개발하고 논의하며 제정하는 조직
DOCTYPE : HTML의 문서형식 선언으로 HTML 및 마크업언어의 DTD 또는 버전을 명시한다.
Metadata : 문서 또는 파일에 관한 정보를 제공하는 내부 데이터
- HTML 이란? -
* Hyper Text Markup Language의 약자
* 웹용콘텐츠(글 또는 그림 등)의 구조를 지정하는 컴퓨터 언어
* 웹 서버에 저장되어 클라이언트 웹 브라우저의 요구에 따라 불려지는 문서
* 웹 브라우저에 불려진 HTML은 웹 브라우저에 의해 해석 되어 내용이 화면에 보여짐
- HTML의 탄생과 발전 -
1. 1990년 월드 와이드 웹(WWW)과 함께 탄생
* 최초의 웹 브라우저 Tim Berners-Lee의 하이퍼미디어 브라우저
2. 웹이 발전하자 다양한 웹 브라우저의 출현
* 웹의 발전으로 하여금 웹 브라우저의 중요성 확대
* 최초의 대중적 웹브라우저 NCSA 모자익(Mosaic)
3. 모자익을 재 작성한 넷스케이프 네비케이터 (Netscape Navigator)
4. 마이크로소프트는 NCSA 모자일을 라이센스 받아 Internet Explorer (IE)를 개발
- HTML의 탄생과 발전 -
HTML과 CSS의 비표준 심화 : 웹 브라우저 전쟁
1차 웹 브라우저 전쟁
* Netscape 와 Internet Explorer 간의 시장 점유율 전쟁
* 각각의 웹 브라우저 다양한 신 기술과 표현 방법을 배타적으로 적용
* 웹 브라우저 간의 호환성 결여 : 같은 기능도 다른 HTML, CSS 표현을 사용
-> Internet Explorer의 승리
2차 웹 브라우저 전쟁
* 마이크로소프트 사 웹 브라우저 개발을 등안시 함
* 다양한 웹 브라우저의 등장 (예 : 파이어폭스, 오페라)
* 기술적으로 정체 된 웹 브라우저 시장에 빠르고 강력한 기능의 새로운 웹 브라우저 등장
-> Internet Explorer의 시장 점유율 하락 -> 마이크로소프트의 Internet Explorer도 웹 표준화를 준수 입장 표명
1997년 HTML3.2 권고
* HTML3.0 : 웹 브라이주 전쟁으로 혼란해진 HTML을 바로 잡고자 강력한 웹버전 제시
* 혼라해진 HTML을 이용하여 개발된 사이트와 호환 문제로 개발자의 반대
* HTML 사용법을 수용한 타협안 HTML3.2 제시
1999년 HTML4.01 권고
* 엄격함과 타협안이 있는 다양한 버전을 발표
2000년 XHTML 권고
* XML의 엄격함을 주요 내용으로하는 웹 표준 발표
* HTML4.01과 혼용
* 향후 웹 표준은 XHTML로 발전
2014년 HTML5 권고 예정
* HTML5 : 웹 어플리케이션 개발 API를 다수 포함하야 강력한 버전
기존 HTML의 한계
W3C (World Wide Web Consortium) -> XHTML2.0 계획 업게 지지를 얻지 못함 -> 웹 기반 사업과 기술 표현 하기에 XHTML 부족
최근 웹 기반 사업과 기술
1. 웹 기반 사업과 기술의 발전에 따른 HTML의 한계 극복
Ajax : JavaScript를 이용하여 웹서버와 동기화 된 웹의 한계 극복
Web2.0 : 사용자의 능동적인 참여와 편의성이 극대화 된 웹을 통칭
미디어의 일반적인 사용 : 이미지 이외에 미디어가 웹에서 일반적으로 사용
모바일 디바이스의 탄생 : 웹의 접근이 컴퓨터 이외에 다양한 모바딜 디바이스로 확대
웹 어플리케이션 : 문서작성, 클라우드 등 다양한 기능을 하는 웹 어플리케이션의 등장
2. 동적인 웹을 위한 표준화 된 기술 요구
- 동적인 웹을 위한 표준화 된 기술 요구
* 게임, 웹 어플리케이션을 비롯해 일반 웹 사이트들도 동장인 웹에 대한 요구 증가
* 플래쉬와 실버라이트, 자바 등의 기술을 이용하여 동적인 웹 제작
* 플래쉬 및 플러그인 방식의 기술에 대한 거부
- W3C의 XHTML2로 발전 예고
* 여전히 웹 구조와 표현에 집중한 XHTML의 개발을 추진
3. WHATWG(Web Hypertext Application Technology Working Group) 탄생과 활동
- 탄생
* 웹 관련 업체들은 자체적으로 워킹 그룹을 만들어 활동
* 시장의 요구를 분석하고 필요한 기술을 정리
- 활동
HTML5 명세서 작업
* 다양한 시장과 업계의 요구 수용
* 기존 XHTML의 정리와 새로운 기술 적용
* XHTML이 아니고 HTML4.01의 다음 버전임을 내세운 HTML5
2008년 W3C HTML5 초안 발표
* W3C에서 HTML5를 인정하고 초안을 발표
2009년 W3C XHTML2 개발 중단
* HTML5에 개발 집중
HTML5의 의미 : 웹 기술 발전에 큰 전환점
- 실용적 설계
* 기존 기술을 바탕으로 새로운 기술 추가
* 문법 강요하지 않음
* 기존 HTML의 효율적인 요소 추가
* 안전한 보안
- 표현과 내용의 완벽한 분리
- 플러그 인 없이 미디어 처리 및 동적 작동
* 자체적으로 2D, 3D 처리 가능
* 웹 브라우저가 다양한 미디어 처리
* 다양한 이벤트 제공
- 최신 웹 기술 수용
* 지오로케이션, 웹소켓, 웹스토리지, 웹워커 등
HTML5 시작하기
<!DOCTYPE html>
<html>
<head>
<title>첫번째 HTML</title>
</head>
<body>
<p>안녕하세요. 첫 번째 웹페이지에 오신 것을 환영합니다.</p>
</body>
</html>
텍스트 에디터 준비
* HTML은 텍스트 파일
* 단순 텍스트 파일을 생성하는 어떠한 '텍스트 에디터'에서도 작성 가능
ex) 메모장, 워드패드, 워드프로세서 (한글, 워드 등에서 text 포맷으로 저장)
* 전문적인 텍스트 에디터 : 각종 컴퓨터 언어 프로그래밍에 최적화
- 장점
1. 코드 인식률을 높이기 위한 텍스트 컬러링
2. 에러 확인을 편하게 해주는 라인 넘버링
3. 코드 정리를 도와주는 인덴트 기능
4. 편리한 텍스트 이동
5. 코드 제안과 자동 완성
6. 향상된 검색과 치환 기능
7. 기타 프로그래밍 관련 기능들
- 무료로 사용할 수 있는 전문적인 텍스트 에디터
* Notepad++ ( http://notepad-plus-plus.org/ )
- 간단하고 가벼운 텍스트 에디터
* Komodo Edit ( http://www.activestate.com/komodo-edit )
- 강력한 기능의 무료 텍스트 에디터
* Aptana Studio3 ( http://aptana.com/ )
- 강력한 기능의 통합 웹 개발 IDE (매우 복잡한 인터페이스로 초보자에게는 권하지 않음)
DOCTYPE 지정하기와 HTML 구조
DOCTYPE 지정하기
* DOCTYPE 이란
* DOCTYPE 지정 이유 : 웹 브라우저가 정확히 HTML을 표현하기 위해 HTML 버전 명시
* DOCTYPE 표시 방법 : HTML 문서 가장 앞에 DOCTYPE을 표시
* DOCTYPE 지정하기 방법
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Trnasitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!DOCTYPE html>
HTML 서식 : HTML 작성 규칙
- 요소(Elemnt) : HTML의 마크업 명령어
* HTML은 마크업 언어이므로 콘텐츠와 함께 사용
* 요소들은 대소문자를 구분하지 않음
- HTML 요소의 표현
* 콘텐츠와 HTML 요소와 분리하기 위해 요소를 꺽쇠로 둘러쌈
* HTML 요소의 예
<p> : 문단 의미
<a> : 행커 의미
<div> : 구별을 위한 요소
태그(tag) : 꺽쇠로 둘러싼 요소 (Element)
- 요소의 범위
* 요소가 콘텐츠의 구조 정의
-> 요소가 영향력을 미치는 콘텐츠의 범위 중요.
요소의 시작과 끝에 넣어 요소 범위 지정
시작 태그 : <요소명>
마침 태그 : </요소명>
* <p>요소 (단락요소) 지정 예
<p>이것은 단락 입니다.</p>
- 단독으로 사용되는 요소
* 단독으로 사용되는 요소의 예
<br> : 줄바꿈 요소
<img> : 이미지 요소
* 빈요소 (Empty Element)
<br>,</br> 또는 <br/>,</br>로 사용 가능
HTML5에서는 <br> 단독으로 사용 권장
- 요소의 속성 기술
* 요소의 속성 : HTML 요소의 필수적, 부가적인 설정 값 의미
* 요소의 속성 기술 법
1. 요소명 뒤에 공백을 하나 두고 속성명 = "속성값"의 형식으로 기술
예 : <a href="next.html">
2. 요소의 속성이 하나 이상일 경우 : 첫 번째 속성 다음에 공백을 두고 속성명 = "속성값"을 연결해 기술
예 : <img src="img/logo.jpg" alt="Company Logo">
3. 속성값은 따옴표 또는 쌍따옴표 표시
예 : <div id='logo'> 또는 <div id="logo">
HTML의 헤드와 바디
* <html></html> : 전체 HTML 코드를 감쌈
* <html></html> 안쪽에 <head>와<body> 부분으로 나뉨
* <head> 부분
1. 내용이 담긴 <body> 처리 전, 처리되어야 하는 설정 부분
2. HTML 파일의 메타데이터 스크립트와 CSS 등이 위치
3. 웹 브라우저에 나타나는 콘텐츠는 넣지 않음
* <body> 부분
1. 콘텐츠가 담기는 곳
2. 입력한 내용 웹 브라우저에 표시
HEAD 설정하기
- HEAD에 위치하는 요소
1. 타이틀 지정
* 타이틀 : HTML 파일의 제목
* 웹 브라우저 타이틀바에 타이틀이 나타남
* 즐겨찾기나 북마크를 저장 할 때도 사용되므로 적절한 제목을 선택해야 함
* 타이틀 지정 예
<TITLE>웹 페이지 제목</TITLE>
2. 문자 인코딩
* 문자 인코딩 : 문자나 기호들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화 하는 방법
* 작성 위치 : <head> 부분에 위치
* 텍스트 에디터의 문자 인코딩 설정 = HTML 헤더 부분에 설정한 문자 인코딩
* 유니코드인 utf-8을 사용하는 것이 좋음
예 : <meta charset="UTF-8">
* 문자 인코딩을 지정하지 않으면 웹 브라우저에서 기본으로 설정한 문자 인코딩으로 화면 표시
- 메타 요소 : 메타 데이터 정의 하는 부분
1. 메타데이터 : 파일에 관한 정보를 가지고 있는 데이터
* 예
디지털 카메라 사진 : 촬영 날짜, 카메라 모델명, 노출, 촬영 GPS 정보 등
HTML 파일 : 문자 인코딩, 설명, 키워드, 작성자, 저작권, 열락처, 작성일 등
2. HTML의 메타 요소 필요성
* 구글 등 유명 검색 로봇에 의해 수집되는 정보 : 사이트 홍보에 유리
* HTML 파일에 대한 정보를 기록
3. 메타 요소 : 마침 요소가 필요 없는 단독 요소
* 예
description : HTML 파일의 간략한 설명 기술
keywords : HTML 파일의 키워드
author : HTML 파일 작성자
copuright : 저작권 정보
reply-to : 연락처 메일 입력
data : HTML 파일의 작성일
* 메타 요소 중 문자 인코딩 설정만 다른 형식으로 작성함
4. 외부 파일 연결
- 웹 페이지는 HTML, CSS, JavaScript 3가지로 이루어짐
* HTML : 콘텐츠의 구조 정의
* CSS : 콘텐츠의 레이아웃과 표현 등 외향을 정의
* JavaScript : 콘텐츠의 작동을 정의
* HTML, CSS, JavaScript를 HTML 페이지에 같이 넣을 수 있지만 다른 파일로 분리하는 것이 유지보수에 유리
- CSS와 JavaScript 외부 파일을 HTML 파일에 연결하는 방법
* 외부 CSS 파일의 연결
1. <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
2. <link rel="stylesheet" href="css/style.css">
* 외부 JavaScript 파일 연결
1. <script language="javascript"></csript>
-> 초기 Type가 없어 language 속성 사용
2. <script type="text/javascript" src="js/script.js"></script>
-> 사용하면 안되는 표기
3. <script type="application/javascript" src="js/script.js"</script>
-> HTML5 이전까지 올바른 표기
4. <script src="js/script.js"></script>
-> HTML5의 올바른 표기
meta 요소와 Empty요소의 차이
meta 요소는 지금까지의 HTML 요소와 다르게 시작요소만을 가지고 맺음 요소는 존재 하지 않았습니다.
기존 HTML 요소가 웹브라우저에 해당 콘텐츠가 어떤 구조와 의미를 갖는지 알려주는 역할을 했다면 meta 요소는 웹 브라우저에게 문서 정보를 알려주는 역할을 합니다.
그렇다보니 일반적인 HTML 요소가 내용을 감싸는 형식이라면 meta 요소는 속성과 속성 값의 정보를 담고 있을 뿐 내용을 감싸는 것이 아닙니다. 그래서 내용을 가지고 있지 않은 요소 즉, Empty 요소라고 부릅니다. 이러한 Empty 요소에는 img, area, br, hr, input 등이 있습니다.