웹 브라우저

개요

웹 브라우저는 가상 머신이자 인터프리터로, 애플리케이션으로 볼 수도 있고, 프로그래밍을 할 수 있는 하나의 컴퓨터로 볼 수도 있다. 이러한 웹 브라우저에 어떤 기능이 있고 어떻게 동작하는지에 대해 살펴보자

마크업 언어

• 대표적으로 HTML이 있다.
• 본문과 구분할 수 있는 마크를 추가할 수 있는 시스템이다.
• 일부 문자에 특별한 기능을 부여한다.
• 과거에는 troff라는 마크업 언어가 존재했다.
• IBM이 만든 GML, SGML 같은 마크업 언어도 있다.
• SGML보다 좀 더 실용적인 마크업 언어로 XML이 있다.

URL

• 일정한 구조를 따르는 텍스트 문자열이다.
• 스킴, 호스트, 경로로 나뉘어진다.
  • https://, www.naver.com, /news/abcd
• 스킴은 통신 메커니즘을 표시하고, 호스트는 통신하려는 서버를 나타내며, 경로는 리소스의 위치를 의미한다.

HTML 문서

• 하이퍼텍스트는 다른 대상에 대한 링크가 포함된 텍스트다.
• 부등호는 마크업 엘리먼트를 열고 닫는 특수한 기능을 갖는다.
• 만약 부등호 같은 특수한 기능을 문자열 그자체로 표현하고 싶다면 엔티티 참조를 사용해야 한다.
• 태그에는 이름과 값 쌍을 갖는 속성이 포함될 수도 있다.

DOM: 문서 객체 모델

• 브라우저는 문서를 DOM에 따라 처리한다.
• 트리 구조다. (html(head, body(div, div, …)))
• 브라우저는 이러한 문서 트리로 깊이 우선 순회를 통해 트리를 해석한다.
• 방문 순서는 HTML을 작성한 순서를 따라간다.

CSS

• 초기 웹 페이지는 브라우저가 HTML을 어떻게 표시할지 스스로 알아내는 방식이었다.
• 화면의 시각적 효과가 중요해지면서 효율적으로 관리하기 위해 CSS가 등장했다.
• 엘리먼트는 트리 구조(자식들은 이중 연결 리스트)고 어트리뷰트는 단일 연결 리스트 구조다.
• CSS는 셀렉터를 사용해 DOM의 엘리먼트 위치를 지정한다.
• 즉, 선택된 엘리먼트와 애트리뷰트를 연결해준다.
• 셀렉터 { 프로퍼티:값 } 형식이다.

XML 등의 마크업 언어

• XML도 HTML과 마찬가지로 엘리먼트를 열면 반드시 닫아줘야 한다.
• HTML은 웹 페이지를 위해 만들어진 것이라면, XML은 더 범용적인 용도의 언어다.
• HTML과 다르게 XML 태그는 미리 정해진 의미가 없다.
• 사용자가 원하는 대로 의미를 부여할 수 있다.
• 하지만 누구나 원하는 대로 마크업 언어를 만들 수 있어 충돌이 발생할 수도 있다.
• 엘리먼트 태그 앞에 접두사를 붙여 엘리먼트가 어느 종류의 XML에 속하는지 구분할 수 있게 해주는 이름 공간 방법이 있다.
• DTD(문서 타입 정의)는 마크업 언어 문법에 맞는 엘리먼트에 대해 정의할 수 있다.
• XPath는 XML 문서에 대한 셀렉터를 제공한다.

자바스크립트

• 정적인 웹 페이지를 동적으로 다루기 위해 등장한 언어다.
• DOM을 변경하고 직접 웹 서버와 통신할 수 있어졌다.
• AJAX를 사용해 서버와 비동기 상호작용을 할 수 있다.

jQuery

• DOM 함수는 동작이 브라우저마다 다르고, 사용하기가 불편하다.
• 이러한 차이를 해결하기 위해 등장한 라이브러리다.
• 셀렉터와 액션을 조합해서 사용한다.

SVG

• 크기 변경이 가능한 백터 그래픽스다.
• 마크업 언어다.

HTML5

• HTML의 최신 구현이다.
• 다양한 시맨틱 엘리먼트가 추가됐다.
• 캔버스가 추가됐다.
• 오디오와 비디오 엘리먼트도 추가됐다.

JSON

• 자바스크립트 객체를 사람이 읽기 쉬운 방식으로 표현하는 표기법이다.