웹 브라우저
마크업 언어
마크업markup은 본문(텍스트)과 구분할 수 있는 마크가 추가된 시스템을 말한다. 예를 들어 예전에 책을 만들 때는 작가들이 편집자들에게 이 부분은 굵게 표시해주세요. 이 부분은 글꼴을 바꿔주세요 라고 원고에 직접 표시를 하는 방식을 사용하곤 했었는데, 마크업 언어는 이와 비슷하게 이루어진다.
유명한 HTML 또한 하이퍼텍스트 마크업 언어, HyperText Markup Language의 약어이다. 마크업에서는 구분할 수 있는 마크를 추가해준다고 했는데, 이것 또한 텍스트로 이루어진다. 하지만 마크업 언어에서 특정한 문자에 특별한 역할을 부여해주어서 텍스트 파일을 마크업 하는 것이다.
XML은 확장 가능한 마크업 언어, eXtensible Markup Language를 말하고, 이 둘(HTML과 XML)은 모두 SGML을 뿌리로 한 언어이다(하지만 SGML 표준을 준수하지는 않음)
URL
브라우저는 URL(균일 자원 위치 지정자), Uniform Resource Locator를 사용해 서버에 문서를 요청한다. 서버는 문서를 브라우저에 보내고 브라우저는 문서를 표시하는 방식으로 수행된다.
URL은 일정한 구조를 따르는 텍스트 문자열로
1
2
https://98tech-savvy.github.io/posts/cs/blahblah~
└─스킴─┘└──────호스트──────────┘└────경로───────┘
로 구분된다.
스킴은 통신 메커니즘으로, https는 안전한 하이퍼 텍스트 전송 프로토콜을 bitcoin은 비트코인을, file은 로컬파일(컴퓨터 내부에 위치한 파일)을 가리킨다.
호스트는 통신하려는 서버를 말한다. 숫자로 된 인터넷 주소(IP) 대신 도메인 이름을 사용해 호스트를 가리킨다.
경로는 통신하려는 서버 내에 위치한 파일의 경로를 가리킨다.
HTML DOCUMENT
HTML은 하이퍼텍스트를 활용하는데 웹 페이지 등에 다른 대상에 대한 링크가 들어있는 것을 말한다. 그리고 HTML은 마크업 언어라고 했는데, HTML에서는 <>가 특별한 힘을 가진다. <>안에 엘리먼트를 추가해줘서 특정한 기능을 수행한다. 여는 <>가 있다면 닫는 </>로 태그를 닫아주어야 한다.
예를 들어 타이틀은 <title></title>, 몸통 부분(바디)는 <body></body>안에 내용을 넣어주면 된다. 만약 본문(텍스트)에 <>를 표현하고 싶다면, 엔티티 참조를 이용해주면 되는데, \<라는 문자 시퀀스가 그 역할을 수행한다. 저 문자 시퀀스를 html문서 안에 넣어주면 저 문자 시퀀스는 < 로 바뀐다.
또 애트리뷰트라는 기능에 다른 기능을 추가해주는 요소가 있는데, 태그 안에 애트리뷰트를 포함시켜 태그에 대한 이름이나 여러가지 기능을 정의해줄 수 있다.
문서 객체 모델, Document Object Model
웹 브라우저는 문서를 DOM에 따라 처리한다.
DOM은 DAG(유향 비순환 그래프)이면서 트리 구조이기도 하다.
트리 관련 용어
| 용어 | 의미 | 예제 |
|---|---|---|
| 노드 | 트리를 이루는 엘리먼트들 | html, head, body |
| 내부 노드 | 자신에게서 나가는 화살표가 존재하는 노드 | html, head, title |
| 종단 노드 | 자신에게서 나가는 화살표가 없는 노드 | My Title, A heading |
| 루트 | 트리의 최상위 노드 | html |
| 부모 노드 | 두 노드를 연결하는 화살표가 있을 때 화살표의 출발점에 있는 노드 | head(부모)>title(자식) |
| 자식 노드 | 두 노드를 연결하는 화살표가 있을 때 화살표의 끝에 있는 노드 | 위에 설명 |
| 후손/자손 노드 | 직/간접적으로 다른 노드의 자식이거나 자식의 자식 등의 관계가 있는 노드 | html(부모)>head(html의 자식)>title(html의 자손) |
| 선조/조상 노드 | 직/간접적으로 다른 노드의 부모이거나 부모의 부모 등의 관계가 있는 노드 | 위에 설명 |
| 형제/자매 노드 | 한 부모의 자식인 노드 간의 관계 | head, body |
DOM 처리
DOM은 기계어로 컴파일할 일이 없기 때문에 깊이 우선 순회를 통해 트리를 해석해나간다. 여기서 깊이 우선 순회란 루트에서 시작해 첫 번째 자식으로 내려간 후 종단 노드에 이르르면 종단 노드의 부모로 돌아가 방문한 적이 없는 자식을 찾고 이 행위를 반복한다 그리고 이 과정을 모든 노드를 방문할 때 까지 반복한다.
CSS
CSS는 HTML을 좀 더 멋스럽게 꾸며줄 수 있는 방법이다. 화면의 시각적 효과가 중요해지면서 HTML을 작성하는 사람들이 페이지가 표시되는 모습을 세밀하게 조정할 수 있도록 갖가지 기능을 추가해서 만들어졌다. CSS, Cascading Style Sheets이란 약어로 그 뜻에 맞게 HTML에서 스타일 정보를 분리해서 HTML을 한 번만 작성해도 대상 장치에 따라 여러 스타일을 적용할 수 있게 했다.
XML등의 마크업 언어
XML 태그는 미리 정해진 의미가 없다. 그래서 우리들은 원하는 대로 태그에 의미를 부여할 수 있고 새로운 마크업 언어를 만들어낼 수 있다. 예를 들어 회사에 사용하는 마크업 언어 CML을 만들 수도, 집에서 사용하는 마크업 언어 HML을 만들어 낼 수도 있다. 하지만 이렇게 누구나 마크업 언어를 만들어낼 수 있기 때문에 충돌이 생길 수도 있는데, 예를 들어 CML과 HML에 동시에 <name>이라는 엘리먼트가 있다고 할 때 두 개의 마크업 언어를 사용할 때 name이 어느 언어의 name을 가리키는지 모른다.
이 때 네임 스페이스, namespace 즉, 이름 공간을 통해 해당 언어의 태그를 찝어낼 수 있다. 이름 공간을 지정해주고 이름 공간:태그 식으로 사용한다.
예를 들어 hml의 name은 <hml:name>식으로 가리켜줄 수 있다.
자바스크립트
이전의 웹 페이지들은 정적의 웹 페이지들이었다. 동적인 웹 페이지를 만들고싶다면 자바스크립트를 공부해야한다. 정적인 웹 페이지에서 표시 중인 내용을 변경하려면 URL을 웹 서버에 요청하고 새 문서를 받아오는 방법 뿐이다. 이 과정은 아주 느리고 자원 또한 낭비한다. 하지만 동적인 웹 페이지를 만든다면(자바스크립트를 사용한다면) 서버가 아닌 우리들의 컴퓨터에서 실행될 수 있는 실제 프로그램을 웹 페이지에 포함시켜서 동적으로 데이터를 변화시켜줄 수 있는 것이다.
자바스크립트와 서버의 상호작용은 비동기 자바스크립트와 XML을 통해 이루어진다(AJAX라고 한다). 요새는 XML을 사용하지 않고 JSON이라는 녀석을 쓰기 때문에 AJAJ라고도 하지만, 흔히들 AJAX라고 부른다.
jQuery
이전의 브라우저들은 브라우저와 브라우저간의 불일치가 일어났다. 그래서 웹을 만드는 사람들은 이 불일치를 변수에 두고 만들어야했다. jQuery는 그 변수를 없애주는데, 브라우저 사이의 불일치를 부드럽게 메꿔주고 사용하기 쉬운 DOM 인터페이스를 제공한다.
JSON
JSON은 자바스크립트 객체 표기법을 줄인 말이다. JSON은 근본적으로 자바스크립트 객체를 사람이 읽기 쉬운 방식으로 표현한 것이다. 자바스크립트 객체를 JSON형식으로 손 쉽게 바꿀 수 있을 뿐더러 자바스크립트의 eval함수를 사용하면 JSON으로 만들어진 데이터를 마치 자바스크립트 프로그램인 것처럼 직접 실행할 수도 있다. 자바스크립트의 데이터를 내보내고 들여올 때 추가로 코드를 작성할 필요가 없다는 뜻이기도하다.
댓글남기기