10.1 HTML

10.1.1 웹 페이지의 대부분은 HTML 로 되어 있다

HTML(HyperText Markup Language)웹 상에서 하이퍼텍스트를 보내기 위해서 개발된 언어 이다. 하이퍼텍스트는 문서 시스템의 하나로서, 문서 중에 임의의 장소의 정보가 다른 정보(문서나 이미지 등)에 관련된 즉, 링크되어 있는 문서이다. 마크업 언어(Markup Language) 는 문서의 일부에 특별한 문자열을 붙임으로써, 문서를 수식하는 언어이다. HTML 에서는 이 특별한 문자열을 HTML 태그라고 부른다.

평상시에 여러분이 보고 있는 웹 페이지의 대부분은 이 HTML 이 사용되고 있다. HTML 로 쓰여진 문서를 브라우저가 해석해서 렌더링(Rendering) 처리를 한 결과가 웹 페이지에 표시된다.

10.1.2 HTML 버전

팀 버너스 리가 HTTP 를 발표했을 때 HTML 의 원형도 제창되었다. 1993년에 일리노이 대학의 NCSA 에서 모자이크라는 브라우저가 발표되는데, 모자이크가 해석할 수 있는 HTML 의 사양을 정리한 것이 HTML 1.0 으로 공개되었다.

1999년 12월에 HTML 4.01 이 W3C 라는 조직에 의해서 권고안이 출시되었다. 다음 버전인 HTML5 는 2014년 정식으로 권고안이 발표되었다. HTML5 는 브라우저 간의 호환성 문제를 해결하거나 텍스트를 데이터로서 다룰 수 있도록 하여 재사용하기 쉽게 하거나 애니메이션 등의 효과를 충실히 하는 것이 사양에 포함된다.

HTML 은 현재에 이르기까지 많은 문제를 안고 있다. 브라우저에 따라 HTML 사양에 따르지 않은 것이나 독자적인 태그를 확장하고 있는 것도 있어 사실상 HTML 규격은 아직도 통일되어 있지 않은 상태이다.

10.1.3 디자인을 적용하는 CSS

CSS(Cascading Stype Sheets) 는 HTML 의 각 요소를 어떻게 표시할지를 지시하는 것으로, 스타일 시트라고 불리는 사양 중의 하나이다. 같은 HTML 문서라도 적용시킬 CSS 를 바꾸면 브라우저에서 보이는 외관을 변경할 수 있다. CSS 는 문서의 구조와 디자인을 분리한다는 이념으로 만들어졌다.

10.2 다이나믹 HTML

10.2.1 웹 페이지를 동적으로 변경하는 다이나믹 HTML

다이나믹 HTML(Dynamic HTML) 은 정적인 HTML 내용을 클라이언트 사이드 스크립트를 사용해서 동적으로 변경하는 기술을 말한다. 클릭하면 펼쳐지는 메뉴나 구글 맵스(Google Maps) 같이 스크롤하는 지도에도 다이나믹 HTML 이 사용되고 있다. 다이나믹 HTML 기술은 HTML 등으로 만들어진 웹 페이지를 Javascript 등의 클라이언트 사이드 스크립트로 조작하여 동적으로 변화시킨다. 동적으로 바꾸고 싶은 HTML 요소를 지정하기 위해서 DOM 이라는 구조를 사용한다.

10.2.2 HTML 을 조작하기 쉽게 해주는 DOM

DOM(Document Object Model)HTML 문서와 XML 문서를 위한 API(Application Programming Interface) 이다. DOM 을 사용하면 HTML 내의 요소를 오브젝트로 다룰 수 있기 때문에 요소 내의 문자열을 추출하거나 CSS 를 프로퍼티로서 변경해 디자인을 변경할 수 있다. DOM 을 사용하게 되면 Javascript 등의 스크립트를 사용하여 HTML 을 쉽게 조작할 수 있다.

10.3 웹 어플리케이션

10.3.1 웹을 사용해서 기능을 제공하는 웹 어플리케이션

웹 어플리케이션은 웹 기능을 사용해서 제공되는 프로그램을 지칭한다. 쇼핑 사이트나 인터넷 뱅킹, SNS 나 게시판, 검색 엔진, e-러닝 등 인터넷이나 인트라넷 상에는 다양한 웹 어플리케이션이 있다.

본래 HTTP 를 사용한 웹 구조는 사전에 준비된 콘텐츠를 클라이언트의 리퀘스트에 맞게 변화하는 것이다 그러나 웹이 보급됨에 따라 이것만으로는 부족해서 프로그램이 HTML 등의 콘텐츠를 생성할 필요가 생겼다.

이러한 프로그램에 의해서 생성된 콘텐츠동적 콘텐츠 라 부르고 사전에 준비된 콘텐츠정적 콘텐츠 라고 부른다. 웹 어플리케이션은 동적 콘텐츠에 해당된다