[HTML5&JavaScript] HTML5의 탄생과 의미 알아보기
HTML이란
Hyper Text Markup Language의 약자
웹 콘텐츠(글 또는 그림 등)의 구조를 지정하는 컴퓨터 언어
웹 서버에 저장되어 클라이언트 웹 브라우저의 요구에 따라 불려진다
웹 브라우저에 불려진 HTML을 웹 브라우저에 의해 해석되어 내용이 화면에 보여진다
HTML은 1990년 WWW(World Wide Wep)과 함께 탄생
최초의 웹 브라우저: Tim Berners-Lee의 하이퍼미디어 브라우저
최초의 대중적인 웹브라우저: NCSA Mosaic
기존 HTML의 한계
XHTML은 웹 기반 사업과 기술을 표현하기에 부족해서 W3C(World Wide Wep Consortium)의 XHTML 2.0계획이 업계 지지를 얻지 못했다
최근 웹 기반 사업과 기술
Ajax는 JavaScript를 이용하여 웹서버와 동기화 된 웹의 한계를 극복했다
Web2.0은 기술은 아니라 경향으로, 사용자의 능동적인 참여와 편의성이 극대화된 웹을 통칭한다
이미지 이외에 미디어가 웹에서 일반적으로 사용된다
웹의 접근이 컴퓨터 이외에 다양한 모바일 디바이스로 확대되었다
WHATWG(Web Hypertext Application Technology Working Group)을 통해 다양한 시장과 업계의 요구를 수용하고
기존 XHTML의 정리와 새로운 기술을 적용
기존 HTML4.1을 연장한다는 의미에서 HTML5이라고 한다
HTML5의 의미
1. 호환성 유지: 기존 기술을 바탕으로 새로운 기술 추가
2. 실용적 설계: 문법 강요하지 않음, 기존 HTML의 효율적인 요소 추가, 안전한 보안
3. 표현과 내용의 완벽한 분리
4. 플러그인 없이 미디어 처리 및 동적 작동: 자체적으로 2D, 3D 처리 가능, 웹 브라우저가 다양한 미디어 처리, 다양한 이벤트 제공
5. 최신 웹 기술 수용: 지오로케이션, 웹소켓, 웹스토리지, 웹워커 등
복습
Markup, W3C, XHTML, HTML5
[HTML5&JavaScript] HTML5 시작하기
HTML은 텍스트 파일
단순 텍스트 파일을 생성하는 어떠한 텍스트 에디터(메모장, 워드패드, 워드프로세서 등)에서도 작성 가능하다
전문적인 텍스트 에디터의 장점
1. 코드 인식률을 높이기 위한 텍스트 컬러링
2. 에러 확인을 편하게 해주는 라인 넘버링
3. 코드 정리를 도와주는 인덴트(자동 들여쓰기) 기능
4. 코드 제안과 자동 완성
무료로 사용할 수 있는 전문적인 텍스트 에디터
Notepad++
Komodo Edit
Aptana Studio 3
DOCTYPE: HTML5 코드 작성할 때 가장 먼저 입력하는 부분
DOCTYPE 지정 이유: 웹 브라우저가 정확히 HTML을 표현하기 위해 HTML 버전 명시
DOCTYPE 표시 방법: HTML 문서 가장 앞에 DOCTYPE 표시
HTML 서식: HTML 작성 규칙
1. 요소(element): HTML의 마크업 명령어
HTML은 마크업 언어이므로 콘텐츠와 함께 사용
요소들은 대소문자를 구분하지 않음
2. HTML 요소의 표현
콘텐츠와 HTML 요소와 분리하기 위해 요소를 꺽쇠로 둘러쌈
HTML 요소의 예
3. 요소의 범위
요소가 콘텐츠의 구조 정의
요소가 영향력을 미치는 콘텐츠의 범위가 중요하다
<p>요소 (단락요소) 지정 예
<p>이것은 단락 입니다</p>
단독으로 사용되는 요소
요소의 속성 기술
요소의 속성: HTML요소의 필수적, 부가적인 설정 값 의미
요소의 속성 기술법
1. 요소명 뒤에 공백을 하나 두고 속성명="속성값"의 형식으로 기술
<a href="next.html">2. 요소의 속성이 2개 이상일 경우
첫 번째 속성 다음에 공백을 두고 속성명="속성값"을 연결해 기술
<img src="img/logo.jpg" alt="Company Logo">3. 속성값은 따옴표 또는 쌍따옴표 표시
<div id='logo'> 또는 <div id="logo">
HTML의 헤드와 바디
HTML 파일은 HTML, CSS, JavaScript 등의 코드가 섞여 있어서 구분을 위해 HTML 코드는 시작과 끝을 표시해야 한다
<html></html>: 전체 HTML 코드를 감싼다
<html></html>안쪽에 <head>와 <body>부분으로 나뉜다
실습
<!DOCTYPE html>
<html>
<head>
<title>첫 번째 HTML</title>
<meta charset="utf-8">
</head>
<body>
<p>안녕하세요. 첫 번째 웹 페이지에 오신 것을 환영합니다.</p>
</body>
</html>HTML페이지 제작은 DOCTYPE 선언부터다
입력하면 아래 내용이 나온다
안녕하세요. 첫 번째 웹 페이지에 오신 것을 환영합니다.
HEAD 설정하기
HEAD에 위치하는 요소
1. 타이틀 지정
타이틀: HTML 파일의 제목
웹 브라우저 타이틀바에 타이틀이 나타난다
즐겨찾기나 북마크를 저장할 때도 타이틀 요소로 저장되므로, 적절한 제목을 선택해야 한다
타이틀 지정 예
<title>웹 페이지 제목</title>
2. 문자 인코딩
문자 인코딩: 문자나 기호들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화 하는 방법
작성 위치: <head>부분에 위치
텍스트 에디터의 문자 인코딩 설정 = HTML 헤더 부분에 설정한 문자 인코딩
유니코드인 utf-8을 사용하는 것을 권장
<meta charset="UTF-8">
문자 인코딩을 지정하지 않으면, 웹 브라우저에서 기본으로 설정한 문자 인코딩으로 화면 표시
메타 요소: 메타 데이터를 정의하는 부분
1. 메타 데이터: 파일에 대한 정보를 가지고 있는 데이터
①디지털 카메라 사진: 촬영 날짜, 카메라 모델명, 노출, 촬영 GPS 정보 등
②MP3 음원: 연주자, 앨범 정보, 가사 등
③HTML파일: 문자 인코딩, 설명, 키워드, 작성자, 저작권, 연락처, 작성일
2. HTML의 메타 요소의 필요성
구글 등 유명 검색 로봇에 의해 수집되는 정보가 메타 데이터이기 때문
HTML 파일에 대한 정보를 기록한다
3. 메타 요소 사용 방법
메타 요소: 마침 요소가 필요 없는 단독 요소
name 속성에 메타 데이터의 종류를 쓰고, content 속성에 메타 데이터의 내용을 쓴다
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML5와 JavaScript 학습 콘텐츠">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<meta name="author" content="Lee HaeBum">
<meta name="copyright" content="gomtomi@imacca.com">
<meta name="date" content="2012-05-30T12":35:2-+09:00">
</head>
외부 파일 연결
웹 페이지는 HTML, CSS, JavaScript 3가지로 이루어졌다
HTML: 콘텐츠의 구조 정의
CSS: 콘텐츠의 레이아웃과 표현 등 외향을 정의
JavaScript: 콘텐츠의 작동을 정의
HTML, CSS, JavaScript를 하나의 HTML 페이지에 같이 넣을 수 있지만, 다른 파일로 분리하는 것이 유지보수에 유리하다
분리된 CSS파일과 JavaScript파일은 HTML에 연결해야 HTML파일을 읽을 때 모든 파일을 같이 읽을 수 있다
CSS와 JavaScript 외부 파일을 HTML 파일에 연결하는 방법
외부 CSS파일은 링크 요소를 이용해 연결한다
CSS는 href 부분에 css파일의 경로를 HTML파일의 위치를 기준으로 상대경로를 입력한다
<lint rel="sytlesheet" type="text/css" media="screen" href="css/style.css">
type과 media 속성이 복잡하다면 간단하게 rel과 href속성 만으로 연결이 가능하다
<link rel="stylesheet" href="css/style.css">
외부 JavaScript파일은 스크립트 요소를 이용해 연결한다
스크립트 요소는 HTML속에 스크립트를 작성하기 위해 사용되지만 내용을 비우고 source 속성에 JavaScript파일의 경로를 입력하면 외부 JavaScript파일을 연결할 수 있다
웹 브라우저가 사용하는 언어가 JavaScript뿐이 아니어서 스크립트 요소에는 사용하는 스크립트 언어의 종류를 명기해야 했다
초기에는 스크립트 요소에 type속성이 없어서 language요소에 사용하는 언어의 종류를 명기했다
<script language="javascript"></script>
그 후 type속성이 생겨
<script type="type/javascript" src="js/script.js"></script>으로 스크립트 요소를 정의했다
그런데 type속성이 text와 JavaScript로 되어 있다. HTML과 CSS는 text타입이지만 JavaScript는 스크립트 코드이므로 이 표기는 바르지 못하다. JavaScript를 바르게 표기하려면 text가 아니라 application에 표기해야 한다. 하지만 이 표기는 몇몇 웹브라우저에서 잘 인식되지 않는다
<script type="application/javascript" src="js/script.js></script>
속성이 HTML5부터는 JavaScript연결이 간단해졌다. HTML5부터는 기본 스크립트가 JavaScript로 정해졌으므로 따로 type을 지정할 필요가 없다 source속성에 JavaScript파일 경로만 지정하면 된다
<script src="js/script.js></script>
실습
<!DOCTYPE html>
<html>
<head>
<title>첫 번째 HTML</title>
<meta charset="utf-8">
<meta name="description" content="HTML5와 JavaScript 학습 콘텐츠">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<meta name="author" content="Lee HaeBum">
<meta name="copyright" content="©2012 Lee HaeBum">
<meta name="reply-to" content=gomtomi@imacca.com>
<meta name="date" content="2012-05-30T12:35:20+09:00">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js></script>
</head>
<body>
<p>안녕하세요. 첫 번째 웹 페이지에 오신 것을 환영합니다.</p>
</body>
</html>