9강. 정리. HTML, HTML5, CSS, Javascript란 무엇인가.

HTML이란?

HTML이란 무엇일까? 풀어 쓰자면 hyper-text makeup language가 된다. 이건 아마도 초창기 HTML의 개념이라면 설명이 가능하다. 하지만 요즘의 HTML은 문자와 문서를 연결 시켜주는 것을 훨씬 뛰어넘는 다양한 기능들을 수행하고 정보를 표현 할 수 있는 언어로 진화 했다.

HTML은 문서를 꾸며주는 언어이다. 사용자 입장에서 흔히 홈페이지라고 하는 것이 제작자 입장에서 본다면 하나의 문서다. 멀티미디어 정보를 다룰 수 있는 특별한 문서가 모여 홈페이지를 이루고 있다. 문서의 글씨, 이미지, 영상 정보를 독특하게 꾸며주거나 화면의 적당한 위치에 배치 시키는 역할을 HTML이 담당하고 있다. 문자와 문서를 연결하고 이미지를 표현하고 영상과 음원을 재생하고 정보를 입력받아 웹서버로 전송하는 등 다양한 일들을 처리 할 수 있다.

HTML5란?

HTML5는 최근 많은 웹 제작들에게 관심을 끌고 있다. 과거의 HTML은 문서를 표현하고 공유하는데 중점을 뒀었다. 하지만 시간이 지나면서 정보의 형태가 멀티미디어로 바뀌면서 기존의 HTML로 모든 정보를 표현하기에 어려움이 있었다. 그래서 플러그인을 자주 사용하게 되는데 이는 또 브라우저에 별도의 프로그램을 추가 설치 해야 하거나 보안상의 헛점을 들어내고 있다. 최근의 HTML 문서는 또 웹표준을 지향하면서 홈페이지 접근성과 크로스 브라우징을 간과 할 수 없게 되었다. 따라서 별도의 플러그인 없이도 멀티미디어 정보를 표현할 수 있고 문서를 보다 구조적 형태로 꾸밀 수 있는 태그들이 추가 되고 보안상 취약하거나 웹 표준에 맞지 않는 태그들은 빠지게 되었다. 그렇게 나온 것이 HTML5 버전이다. 기존의 HTML에서 몇 가지 태그에 변화가 생겼다고 보면 된다.

HTML5에서 새롭게 초가 된 태그에 관한 정보는 이 곳에 자세히 설명 돼 있다. http://htmlschool.tistory.com/

태그는 일반적으로 속성이 따라 붙는다.

<div id="hakgwa" name="multi" class="multicss">멀티미디어</div>

이런 형태의 태그가 있다고 할 때 id="", name="", class="" 이런 건 모두 div 태그의 속성이 된다. 각 속성은 각자의 역할이 있다.

id는 이 태그의 고유 이름이다. 다른 태그들과 id가 겹치지 말아야 한다. id가 중복 된다고 해서 문서 내에서 특별히 오류를 일으키지는 않지만 자바스크립트를 이용해 해당 개체를 다루고자 할 때는 문제가 생길 수 있다. 그래서 한 문서에서 각각의 태그에는 같은 id를 사용하지 않는다.

name은 div라는 태그의 이름이다. 이름은 id와 비슷하게 사용 되지만 중복이 가능하다.

<div id="hakgwa" name="multi" class="multicss">멀티미디어</div>
<div id="multi" name="multi" class="multicss">멀티미디어학과</div>

이 예문에서 id는 서로 다르지만 name은 중복 사용 됐다. 자바스크립트에서 getElementByNames를 이용해 multi라는 태그 속성을 읽어 올 때는 배열로 두 개의 태그 모두를 갖어오게 된다.

class는 stylesheet의 이름이다. <style>~</style> 안에 multicss라는 클래스가 정의 돼 있어야 한다.

CSS(cascading style sheets)란 무엇인가?

HTML로 문서를 작성 할 때 각각의 문자나 이미지, 영상 정보들을 꾸며 주는데 한계가 있다. 디자인을 꾸밀 때 태그에서 할 수 없는 다양한 표현을 제공하기 위해 CSS가 필요하다.

<style>
.multicss { font-weight:bold; } 
</style>

<span class="multicss">멀티미디어</span>

이런 형태로 사용되며 span에 포함 된 문장은 bold체(굵게)로 표현 된다.

<span style="font-weight:bold;">멀티미디어</span>

이렇게 inline 속성인 style을 이용해 직접 stylesheet를 적용 할 수도 있다.

자바스크립트란?

HTML만으로 지원되 않는 동적 페이지를 구현하기 위해 필요한 언어가 javascript이다. 자바스크립트는 클라이언트(브라우저)를 통해서 해석이 되며 웹서버가 없어도 실행 가능한 인터프리터 언어이다.

자바스크립트는 HTML 문서의 태그들을 엘리먼트(요소)로 취급한다. 문서 내의 element를 제거하거나 추가 할 수도 있고 element의 속성을 변경 할 수 있다. 또 클라이언트에서 정보를 처리해야 하는 경우에도 사용 된다. 클라이언트에서 HTML 문서를 조작하는 모든 곳에 사용 할 수 있다. 요즘은 자바스크립트의 복잡한 문법들을 좀 더 쉽게 다룰 수 있는 jQuery를 많이 사용한다. jQuery는 자바스크립트로 만들어진 라이브러리(함수의 집합, 또는 프레임 워크라고도 한다)라 할 수 있다. jquery 파일은 http://jquery.com/에서 구할 수 있다.