인터넷 검색하면 다 나오는 내용인데 짧은 시간에 쉽고 빠르게 이해하라고 적은 글이다. 웹을 가르치는 학원 강사들도 잘 구분을 못 한다.
1. HTML(Hyper Text Markup Language)
ML(마크업 랭귀지)은 표시 언어란 뜻으로 사람과 기계가 동시에 문서를 읽을 수 있도록 단어, 구, 문장 등에 괄호 형태로 묶어 꼬리표(Tag)를 다는 것을 말한다. 이렇게 할 경우 컴퓨터는 문장의 뜻을 몰라도 그 문장에서 주어, 목적어, 술어, 인명, 지명 등을 구분할 수 있게 된다. 하이퍼 텍스트란 기존 텍스트를 초월한다고 붙인 이름 같다.
과연 친일독재잔당은 친일파후손과 군부독재잔당의 결합일까?
위와 같은 문장은 사람은 이해하지만 기계는 이해하지 못 한다. 이 문장에 꼬리표를 달면 컴퓨터도 문장 성분을 구분할 수 있을 것이다.
p{과연 n{친일독재잔당}은 n{친일파후손}과 n{군부독재잔당}의 결합일까?}
괄호를 치고 그 괄호 앞에 Tag를 단 형태이다. 이건 수학 함수 표기법과 비슷하다. 그런데 헛갈리니까 표기법을 다음과 같은 식으로 바꿀 수 있을 것이다. HTML 언어의 괄호 형태가 수학 함수와 본질적으로 같다는 것을 보이기 위해서 일부러 위와 같이 나타내었다.
<p>과연 <n>친일독재잔당</n>은 <n>친일파후손</n>과 <n>군부독재잔당</n>의 결합일까?</p>
괄호를 표현하면서도 괄호의 짝을 맞추었다. <p> ~ </p> 형태로 시작 괄호와 끝 괄호에 같은 Tag p를 달며 시작과 끝(/)을 표기했다. 이렇게 하면 괄호의 시작과 끝이 일치하는지 검사하기 쉽다. 예를 들어 p는 문장이란 의미고, n은 이름이란 의미가 있다고 하면 컴퓨터가 인식하여 뽑아낼 수 있을 것이다. 이와 같은 괄호 형태는 우리들도 마음대로 만들 수 있을 것이다. 예를 들어 다음과 같은 식으로 말이다.
<p:과연 <n:친일독재잔당:n>은 <n:친일파후손:n>과 <n:군부독재잔당:n>의 결합일까?:p>
그런데 이미 사용하고 있는 ML 언어들이 모두 <p> ~ </p>와 같은 형태의 괄호를 사용한다. 괄호 표기법도 다시 정의해서 바꿀 수 있다고 하는데 문법이 그만큼 복잡해진다.
SML → SGML → XML + HTML → XHTML
처음엔 미국에서 SML이란 언어를 만들었다. 이것이 SGML로 발전하여 공문서, 인쇄, 출판에서 사용하다가 좀 더 간단한 XML, HTML을 개발한다. XML은 Tag를 마음대로 만들어 붙일 수 있는데 HTML은 Tag 이름들이 정해져 있다. 그러니까 HTML이 좀 삐딱한 언어가 된다. 그래서 HTML Tag와 XML 문법을 결합하여 XHTML이란 것을 만든다. 그래서 XML에서 Tag 이름을 HTML처럼 정한 형태, XML의 부분집합이 될 수 있는 형태로 다시 HTML을 정의한 것이 XHTML이다. 그러니까 XHTML은 겉모습이 XML과 같아서 XML을 처리하는 프로그램으로 다룰 수가 있다.
간단한 문법 차이를 보자. HTML에선 괄호 쌍이 되지 않는 단독 Tag에 <br>이 있다. 의미는 다음 행으로 가라는 뜻이다. XHTML에선 XML문법에 따라 <br/>이라고 표기한다. 이건 시작과 동시에 끝이란 의미다. 그러니까 수학 함수에서 괄호는 시작과 끝이 일치하는 표기고 콤마는 끝이면서 동시에 시작인 구분자이다. 이 구분자와 같은 것이 <br/>이 된다. 예를 들어 sum(a, b, c) 같은 경우에서 콤마에 해당한다. 개인적 생각으론 HTML을 없애고 대신 XML을 쓰는 것이 더 바람직할 것 같다. 그런데 XHTML이 결국 없어지고 HTML 5가 나올 거 같다.
※ HTML 4, XHTML 1까지가 표준이다. HTML 5는 진행 중이다.
2. CSS(Cascading style sheet)
여하튼 이 ML언어들은 문서의 내용을 구분하는 목적으로 사용된다. 고로 어떻게 화면에 표시하라는 정보가 없다. 예를 들어 인명이나 지명은 굵게 표시하라는 정보가 없다. 그런 표시, 디자인에 관한 정보는 CSS라는 언어로 나타낸다. 예를 들어 다음과 같은 형식이다.
- n{글꼴:고딕; 크기:11포인트; 색상:빨강}
- p{글꼴:명조; 크기:10포인트; 색상:검정}
Cascading/케스케이딩은 겹친다는 의미다. 꼬리표 n은 꼬리표 p의 안에 있기 때문에 p의 명령과 겹친다. 이 경우 가장 안쪽의 n는 자기 CSS 명령에 따르고, 자기 명령이 없으면 자기 밖의 p의 CSS 명령에 따른다. 그래서 처리가 좀 복잡하다. 별도의 지정이 없다면 디폴트(기본값)에 따르겠지만 만약 괄호의 층수가 10개라고 하면 10층을 순서대로 따라가며 무엇이 적용되었는지 판단해야 한다. 이건 기계가 아니면 할 수 없는 일이다.
※ CSS 2까지가 표준이다. CSS 3는 진행 중이다.
3. JavaScript
자바스크립트는 C와 비슷한 문법인 객체지향 인터프리터 언어이다. Java도 C와 문법이 비슷하고 이름이 비슷하지만 약간 다르다. 웹브라우저에서 동작하는 언어인데 HTML 문서를 마치 프로그램처럼 보이게 할 수 있다. 그러까 웹브라우저만 있으면 실행시킬 수 있는 소규모 프로그램이나 게임을 만들 수 있는 것이다. 이것과 경쟁자가 바로 Flash Action Script이다. HTML 5와 CSS 3의 등장으로 Flash가 위협받고 있다.
HTML + JavaScript = DHTML
HTML과 자바스크립트를 결합시켜 DHTML(동적 HTML)을 만들 수 있다. DHTML은 무슨 기술 명칭이 아니라 기술을 묶은 이름이다. HTML이 문서의 내용을 담당하는 것이고 CSS가 디자인을 담당하는 것이라면 JavaScript가 문서의 내용과 디자인을 동적으로 바꿀 수가 있다. HTML은 컴퓨터가 문서의 내용을 파악하게 만든 것이고, CSS는 이 문서를 화면에 예쁘게 보여주는 것이고 여기까지는 정적이다. 프로그래머의 코드가 더해져서 드디어 동적이게 되었다는 것이다. 그래서 역할 분담이 다음과 같다. 모든 문서는 따로 제작하여 HTML 문서에 링크만 걸어 둔다.
- HTML 문서(*.html) : 문자열 데이터 담당
- CSS 문서(*.css) : 디자이너
- JavaScript 문서(*.js) : 프로그래머
4. DOM(Document Object Model)
문서 객체 모델의 약자인데 HTML, XML 문서는 괄호 형태가 겹쳐져 있기 때문에 나무 가지 모양의 계층 구조를 가지게 된다. 이것을 분석해서 메모리에 올려놓기 때문에 문서가 매우 길 경우 메모리 용량에 부담이 되지만 문서의 내용을 자바스크립트가 빨리 찾아 바꿀 수 있다는 장점이 있다. 고로 작은 문서에는 이게 적합하다. 여기에 반해서 큰 문서를 좀 더 단순하게 처리하는 방식이 XML의 SAX(Simple API for XML)이다. 아마도 처음부터 문서를 해석하는 방식 같다.
- <A><B></B><C><D>친일독재잔당좆까!</D></C></A>
- DOM : A → C → D
- 단순 검색 : A → B → C → D
자바스크립트가 문서의 내용을 바꾸거나 디자인을 바꾸려면 그것을 해 주는 클래스나 함수가 있어야 할 것이다. 이 클래스와 함수들이 DOM에 해당 된다. 보통 어떤 데이터 구조(클래스)와 그것을 다루는 함수를 묶어서 라이브러리로 제공 하면서 기술 이름을 붙인다. 그러니까 C언어의 표준 문법과 C에서 제공하는 표준 함수 외의 다른 함수들은 누군가 추가로 만들어서 기술 이름을 붙여 제공하는 것이다. 예를 들면 DirectX 같은 것 말이다.
5. Ajax(Asynchronous JavaScript and XML, 에이잭스)
화면 표시 내용은 HTML + CSS를 사용하고, 동적인 효과는 DOM + JavaScript를 사용한다. 여기까진 기존과 같다. 그런데 이 문서의 내용 일부를 바꾸고 싶을 때 웹 페이지를 새로 받는 것이 아니라 그 일부 내용을 서버와 XML, HTML, Text, JSON 등으로 통신하여 받아 그것만 살짝 바꾸는 기술 조합을 Ajax라고 부른다. 약간의 내용이 바뀌었다고 해서 전체 문서를 다시 다운 받을 필요 없이 일부 데이터만 받아 바꾸기 때문에 효율적이다. JSON(제이슨, JavaScript Object Notation)은 XML처럼 데이터를 나열하는 문서 형식이다. 서버와 통신할 때는 서로 알아먹을 수 있는 형식이 필요하기 때문이다.
Ajax가 동작하려면 Ajax가 필요로 하는 기능들이 모두 담긴 브라우저가 필요하다. HTML + CSS, DOM + JavaScript까지는 기본으로 다 있겠고 웹서버와 XML, HTML, Text, JSON 통신 기능이 추가로 필요하겠지? 이런 기능들 조합해서 데이터의 일부만 받는다는 아이디어를 실현한 것을 Ajax라고 부른다. Ajax는 기술 이름이 아니다. 자바스크립트를 이용한 프로그램 방식 정도 의미가 되나?
6. jQuery(제이쿼리)
자바스크립트로 만든 라이브러리다. 다시 말해서 HTML, CSS 문서와 함께 전송되는 JS(자바스크립트) 문서라고 보면 된다. 당연히 다운로드 속도를 저하시킬 것이다. 허나 여러 브라우저에서 동작이 되도록 만들었고, 묘하게 만들어져 jQuery라는 별도의 언어처럼 보인다. 그러니까 자바스크립트를 사용하지 않고 jQuery 문법에 따라 간편하게 코딩하는 장점이 있다. 프로그래머가 코딩을 간편하게 하는 대신 웹 페이지를 보는 사람은 jQuery 라이브러리를 매번 다운 받아야 하는 단점이 있고, 라이브러리가 jQuery 문법을 해석하는 시간 소모가 발생한다. 이 문제는 브라우저가 아주 자바스크립트 내부에 jQuery 문법을 표준으로 넣어 버리면 해결 된다. 언제 그게 되겠는가?
이런 종류의 자바스크립트 라이브러리가 많다. 예를 들어 2D를 조합해서 3D 표현을 가능하게 해 주는 라이브러리 같은 것이다. 아니면 물리 시뮬레이션을 해 주는 라이브러리 같은 것. 당연히 표준 라이브러리가 아니고 외부에서 제작하여 추가한 라이브러리다. 단지 인터프리터 언어라서 그 내용을 누구나 볼 수 있어 자동으로 오픈 소스라는 것이다.
만약 불법 도청을 통해 살인 증거를 녹음한 경우 살인자를 처벌해야 할까 아니면 불법 도청자를 처벌해야 할까? 당연히 살인자를 처벌해야 한다. 그런데 한국에선 불법 도청자를 처벌한다. 이게 사생활 보호법이 아니라 범죄자 보호법이다. 그러니까 국세충, 경찰이 황당하게 국민을 도청하고 검열하겠다고 언론에 떠벌리는 나라에서 막상 친일독재잔당의 범죄를 도청하거나 증거 자료를 유출하면 도청자와 유출자를 잡아 족친다. 그래서 친일독재잔당이 한국 최고 조폭 또는 불법단체라고 하는 것이다.
댓글 없음:
댓글 쓰기