웹 브라우저는 그 자체가 가상 머신이다. 브라우저는 크고 복잡한 애플리케이션인 동시에 소프트웨어로 구현된 프로그래밍할 수 있는 컴퓨터이다.
마크업 언어
마크업은 텍스트와 구분할 수 있는 mark를 추가할 수 있는 시스템이다. 마크업 언어는 새로운 개념이 아니고 컴퓨터가 생기기 전부터 마크업 언어가 있어왔다.
많은 마크업 언어가 있고 웹 페이지는 이와 같은 그냥 텍스트 파일에 지나지 않는다.
확장 가능한 마크업 언어(XML)은 좀 더 실용적인 SGML의 하위 집합이고 브라우저들은 나중에 XML을 지원하게 됐다.
균일 자원 위치 지정자
브라우저는 균일 자원 지정자(URL)를 사용해 HTTP 프로토콜을 통해 서버에게 문서를 요청한다. 서버는 문서를 브라우저에게 보내고 브라우저는 문서를 표시한다.
URL은 일정한 구조를 따르는 텍스트 문자열이다. 스킴은 통신 매커니즘을 표시한다. 그리고 통신하려는 서버가 호스트, 문서는 경로가 가리키는 위치에서 추출된다.
HTML 문서
최초의 웹 페이지는 HTML로 작성됐고, HTML은 하이퍼텍스트를 활용한다. 그리고 하이퍼텍스트는 웹 페이지 등 다른 대상에 대한 링크가 들어 있는 텍스트를 말한다.
HTML에서 부등호 (<)는 특별한 힘을 갖고 있다. 이 부등호는 마크업 엘리먼트를 시작한다. 그리고 시작하는 tag가 있으면 끝나는 /tag도 들어있다.
그리고 HTML에는 < 의 특별한 능력을 빼앗을 수 있는 비책이 있다. ‘엔티티 참조’는 문자를 다른 문자열로 표현하는 방법이다.
DOM: 문서 객체 모델
웹 브라우저는 문서를 DOM에 따라 처리한다. 일련의 엘리먼트들이 다른 엘리먼트를 둘러써고 있는 것으로 웹 페이지를 생각할 수 있다.
1) 트리 관련 용어
2) DOM 처리
문서트리로 할 수 있는 일은 깊이 우선 순회를 하면서 트리를 해석하는 일이다. 종단 노드에 도달할 때까지 순회를 계속하고, 종단 노드의 부모로 돌아가 방문한 적이 없는 다음 자식을 찾는다. 방문하는 순서는 HTML을 작성한 순서를 따른다. 그리고 깊이 우선 순회는 스택을 사용하는 또 다른 예이기도 하다.
CSS
화면의 시각적 효과가 중요해지면서 HTML을 작성하는 사람이 페이지가 표시되는 모습을 더 세밀하게 조정할 수 있도록 갖가지 기능이 추가됐다. 원래 HTML에도 스타일 정보가 들어있었다. 하지만 웹 페이지가 핸드폰, 데스크탑에 이르는 광범위한 장치에 표시될 수 있기 때문에 이런 접근 방법은 제대로 작동하지 않았다.
Cascaging Style Sheets(CSS)는 HTML에서 스타일 정보를 분리해서 HTML을 한 번만 작성해도 대상 장치에 따라 여러 스타일을 적용할 수 있게 했다. CSS는 selector라고 하는 DOM의 엘리먼트 위치를 지정하므로 구성요소를 어떻게 구성하느냐가 중요하다.
XML 등의 마크업 언어
HTML은 웹 페이지라는 구체적인 응용을 위해 만들어지고, XML은 더 일반적인 용도의 마크업 언어로 다양한 응용 분야가 있다.
1
2
3
4
5
6
7
8
9
10
<xml>
<garden>
<vegetable>
<name>tomato</name>
<variety>Cherokee Purple</variety>
<days-until-maturity>80</days-until-maturity>
</vegetable>
</garden>
...
</xml>
누구나 원하는 대로 마크업 언어를 작성할 수 있어 충돌이 발생할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
<xml>
<garden>
<vegetable>
<name>tomato</name>
<variety>Cherokee Purple</variety>
<days-until-maturity>80</days-until-maturity>
<name>Purple Tomato Salad</name> /* 충돌 발생 */
</vegetable>
</garden>
...
</xml>
위 예에서 name 엘리먼트가 채소마크업언어인지 레시피 마크업언어인지 구분할 방법이 없다. 이를 구분하기 위한 방법으로 namespace가 있다.
1
2
3
4
5
6
7
8
9
10
11
<xml xmlns:vml="http://www.garden.org" xmlns:rml="http://www.recipe.org">
<vml:garden>
<vml:vegetable>
<vml:name>tomato</vml:name>
<vml:variety>Cherokee Purple</vml:variety>
<vml:days-until-maturity>80</vml:days-until-maturity>
<rml:name>Purple Tomato Salad</rml:name>
</vml:vegetable>
</vml:garden>
...
</xml>
XML 등의 마크업 언어
HTML은 웹 페이지라는 구체적인 응용을 위해 만들어지고, XML은 더 일반적인 용도의 마크업 언어로 다양한 응용 분야가 있다.
1
2
3
4
5
6
7
8
9
10
<xml>
<garden>
<vegetable>
<name>tomato</name>
<variety>Cherokee Purple</variety>
<days-until-maturity>80</days-until-maturity>
</vegetable>
</garden>
...
</xml>
누구나 원하는 대로 마크업 언어를 작성할 수 있어 충돌이 발생할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
<xml>
<garden>
<vegetable>
<name>tomato</name>
<variety>Cherokee Purple</variety>
<days-until-maturity>80</days-until-maturity>
<name>Purple Tomato Salad</name> /* 충돌 발생 */
</vegetable>
</garden>
...
</xml>
위 예에서 name 엘리먼트가 채소마크업언어인지 레시피 마크업언어인지 구분할 방법이 없다. 이를 구분하기 위한 방법으로 namespace가 있다.
1
2
3
4
5
6
7
8
9
10
11
<xml xmlns:vml="http://www.garden.org" xmlns:rml="http://www.recipe.org">
<vml:garden>
<vml:vegetable>
<vml:name>tomato</vml:name>
<vml:variety>Cherokee Purple</vml:variety>
<vml:days-until-maturity>80</vml:days-until-maturity>
<rml:name>Purple Tomato Salad</rml:name>
</vml:vegetable>
</vml:garden>
...
</xml>
XML 문서로부터 파스 트리를 만들어주는 라이브러리도 많다. 예로 문서 타입 정의 DTD를 들 수 있다. DTD는 XML처럼 보이는 문서이며 마크업 업어 문법에 맞는 엘리먼트가 어떻게 생겼는지 정의할 수 있다. 또 XML 경로 언어(XPath)는 XML 문서에 대한 실렉터를 제공한다. XPath는 확장 가능한 스타일 시트 언어 변환 (XSLT)의 중요한 일부분이기도 하다.
자바스크립트
HTML로 작성된 웹 페이지는 정적이었다. 그래서 브라우저에 표시중인 내용을 변경하려면 새로운 URL을 웹 서버에 요청해서 새 문서를 받아오는 방법뿐이었다. 1995년 넷스케이프에서 자바스크립트를 소개했고 이후 ECMA-262로 표준화 되었다.
자바스크립트는 DOM을 직접 변경하고 직접 웹 서버와 통신할 수 있다. 서버와의 상호작용은 비동기 자바스크립트와 XML 즉 AJAX를 통해 이뤄진다. script 태그를 HTML 문서에 포함시켜 사용할 수 있다.
1
2
3
4
5
6
<script>
window.onload = function() {
var big = document.getElementsByTagName('big');
big[0].style.backgroud = "green";
}
</script>
jQuery
DOM 함수는 2가지 문제점이 있다. 1)DOM 함수 동작이 브라우저마다 다를 수 있다. 2)DOM 함수를 사용하기 상당히 불편하다.
jQuery는 위 두 가지 문제를 해결해 준다.
1
2
3
4
5
6
7
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script>
$(function() {
$('big').css('backgroud', 'green');
});
</script>
jQuery를 사용하려면 먼저 script 태그에 import를 해주어야 한다.
SVG
크기변경이 가능한 벡터 그래픽스(SVG)는 브라우저가 지원하는 마크업 언어에 속한다. SVG는 멋진 그래픽과 텍스트를 만들 수 있도록 지원하지만, 브라우저에서 사용 가능한 그 밖의 마크업 언어와는 완전히 다른 언어다.
HTML 5
HTML5는 HTML의 최신 구현으로 여러 시맨틱 엘리먼트가 추가 됐다. 이런 엘리먼트들은 문서의 구조에 일관성을 더해준다. 또 canvas가 추가 됐고, SVG와 비슷하지만 캔버스는 캔버스를 위해 만들어진 새로운 자바스크립트 함수를 통해 조작해야만 한다는 점이 다르다.
또 audio, video 엘리먼트도 추가되어 오디오와 비디오를 다루는 표준적인 매커니즘을 제공한다.
JSON
JSON은 자바스크립트 객체 표기법을 줄인 말로 자바스크립트 객체를 사람이 읽기 쉬운 방식으로 표현한 것이다.