1주차의 마무리를 하는 날이었습니다. 오늘 강의에서는 정을수 강사님께서 HTML의 기초 개념을 알려주셨습니다. 단순히 HTML만을 다룬 것이 아닌, 기초 CS 지식을 기반으로 알려주셔서 비전공자인 제 입장에서는 매우 알찬 강의였습니다.
메모리
메모리 기본 개념
메모리의 개념은 아이러니하게도 컴퓨터 자체의 개념을 먼저 이해하면 더욱 쉽게 이해할 수 있습니다.
컴퓨터는 곧 메모리에 있는 data를 CPU를 통해 계산해주는 계산기라고 볼 수 있기 때문입니다.
즉, 컴퓨터는 메모리의 데이터를 쉽게 사용하기 위한 장치인 것입니다. 그럼 메모리의 개념에 대해서도 살펴보아야겠죠?
메모리는 입력된 신호(주소/데이터)에 대한 전자 상태를 유지하고 변경하기도 하는 장치입니다.
흔히들 컴퓨터의 언어는 1과 0이라고 하는데, 이는 실제로 메모리가 0과 1의 상태를 통해 전자 신호를 컴퓨터에게 전달하기 때문입니다.
다만, 메모리는 컴퓨터의 전원이 꺼지는 순간 모든 상태를 잃어버리므로 반드시 하드디스크와 같은 개별 저장 장치가 마련되어 있어야 합니다.
프로그래밍 언어
프로그래밍 언어의 태동
메모리를 설명하면서 언급했듯이, 실제 메모리가 보내고 받는 신호는 0과 1로 이루어져 있습니다.
그래서 우리가 특정 문자나 숫자를 칠 때에도, 16진법을 이용해 0과 1로 된 신호를 주고 받는 과정을 거치게 됩니다.
다만, 옛날에는 이런 방식의 문자열 변환 시스템이 당연히 갖춰져 있지 않았습니다.
그러다 보니, 실제 프로그래머들이 0과 1만 가지고 코드를 짜는 것은 너무나 고역이었어요. 그래서 결국 어셈블러가 등장하게 되었습니다.
어셈블러
어셈블러는 간단한 구조의 실행 명령들을 기계어 코드로 변환해주는 일종의 번역기입니다.
0과 1로 인간이 코드를 모두 짜기에는 너무나 비효율적이고 어려웠고, 따라서 어셈블러가 도입되어 코드 작성을 보조하게 되었습니다.
어셈블러로 작성한 실행 명령들은 모두 기계어 코드로 컴파일되어 프로그램 영역에 올라가는 식으로 작동합니다.
다만 어셈블러는 단순 명령 식으로 작성이 되어집니다. 그래서 조금이라도 복잡한 프로그램을 작성하기 위해서는 여전히 불편을 감수했어야 합니다.
고수준 언어
어셈블러조차도 단순한 명령 코드로만 프로그램을 작성할 수 있었기 때문에, 컴퓨터 공학자들은 더욱 효율적인 수단을 강구했습니다.
그 결과가 바로 자동화된 문자 표현입니다. 보통 이러한 문자 표현 자동화를 탑재한 언어들은 고수준 언어로 분류됩니다.
예를 들어, 고수준 언어 중 하나인 자바스크립트에서 변수를 만드는 경우를 생각해 보세요.
a = 1;이는 곧 10진수를 저장할 수 있는 메모리를 미리 확보하고, a라는 글자로 주소
를 쓸수있도록 하며, 1이라는 10진수를 저장하라는 주문을 컴퓨터에게 전달하는 것입니다.
컴파일/인터프리터 언어
지금까지 설명한 프로그래밍 언어들은 개발자가 작성한 코드를 머신 코드까지 가져가는 방법에 어느 정도 차이가 있습니다.
먼저 컴파일 언어들은, 머신코드까지 완성된 변화를 파일로 만들어 둔 후
원할 때 CPU에 전달하는 방식으로 작동합니다.
대표적인 언어로는 C와 Java를 들 수 있겠습니다. 이들 컴파일 언어들은 CPU에 전달할때 모든 코드에 대해 번역 단계를 거친 머신코드를 저장한 후 실행되므로 속도가 빠릅니다.
반면에 인터프리터 언어들은 파일을 만들지 않고 머신코드까지 변화 과정을 거쳐서 바로 CPU에 전달합니다.
이러한 인터프리터 언어는 컴파일 명령을 별도로 하지 않고 한 줄 한줄 자동으로 번역하고 바로 실행되기 때문에 편리하다는 장점이 있습니다.
대표적인 언어로는 자바스크립트, 파이썬, HTML 등이 있겠습니다.
인터넷에 대한 이해
World Wide Web
팀 버너스 리가 만든 World Wide Web이 바로 우리가 사용하는 인터넷 그 자체라고 할 수 있습니다. 이러한 WWW의 원칙은 간단합니다.
정보를 공유하고자 하는 사람이 서버 컴퓨터에 프로그래밍 된 파일을 올려두면
누구나 다운받아 자신의 컴퓨터로 해석해서 볼 수 있게 하는 것이죠.
그 당시에는 모든 컴퓨터에 고유 번호가 부여되고, 이 번호(IP: Internet Protocol)를 이용해서 데이터를 주고 받는 식으로 통신이 이루어졌습니다.
인터넷의 원칙: 보편성
팀 버너스 리는 인터넷을 구상하면서, 특별한 선수 지식이 없는 사람들 조차도 인터넷을 위한 프로그래밍에 접근하길 원했습니다.
보편성을 확보하게 된다면 더욱 파급력이 높아질 것이라고 생각했기 때문입니다.
그 과정에서 나온 것이 바로 HTML입니다.
과거의 인터넷은 기본적으로 이 HTML을 정보를 담는 매개체로 사용했습니다. 이러한 HTML은 실제로 오늘날까지 누구나 쉽게 배울 수 있는 언어로 유지되고 있습니다.
인터넷의 원칙: 약속
인터넷을 통해 요청을 하고, 특정 데이터를 넘겨 받는 식의 통신은 아주 유용하고 매력적인 기능이었습니다.
다만, 수많은 사용자들이 수많은 경로로 요청을 보내게 된다면, 통신 방식이 호환되지 않아 생기는 비효율이 감당할 수 없는 수준에 이를 수도 있죠.
그래서 정립된 것이 바로 프로토콜, 즉, 통신 간의 규약입니다.
인터넷이 태동할 때부터 이어져 오던 통신 방식에 대한 규약이 바로 HTTP(HyperText Transfer Protocol)이고요.
인터넷의 원칙: 접근성
다만, 세상의 모든 컴퓨터가 인터넷 통신을 목적으로 만들어지는 것은 아닙니다. 하물며 인터넷이 처음 등장한 90년대에는 더더욱 그랬고요.
그래서 컴퓨터에 인터넷 통신을 소화할 수 있는 도구나 틀이 자체 내장되어 있는 경우는 거의 없었습니다.
그리하여 인터넷 통신을 해석하고 사용자에게 띄워주는 도구가 나타나게 되었는데, 이것이 바로 브라우저입니다.
이러한 브라우저만 설치하면, 사용자들은 손쉽게 인터넷 통신에 접근할 수 있는 여건이 마련된 것입니다.
HTML의 개념
HTML의 역할
기본적으로 HTML은 <열기>와 </닫기> 태그를 이용해 부모→자식 관계를 만들고, 이로써 원하는 데이터 구조를 메모리 상에 만드는 디자인(설계) 도구입니다.
또한 HTML을 다룰 때 표준에 따라 만들어지는 데이터의 체계를 DOM(Document Object Model) 이라고 부르며, 프로그래밍 언어로 이것을 다룰 수 있도록 다양한 도구(API)가 제공됩니다.
웹 표준이나 DOM에 관련해서는 MDN 페이지에도 상세한 개념이 잘 정리되어 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
HTML의 태그들
HTML은 여러 가지 태그들로 내용이 구성됩니다. 그 중 문서를 구성하기 위한 최소한의 태그는 다음과 같습니다.
<html> <head> <body>HTML 파일을 띄우는 브라우저가 한 글자라도 보여주기 위해서는 최소한 위 세가지 태그를 통해 필요한 데이터를 메모리에 올려야합니다. 그리고 반드시 html로 시작되어야 합니다.
body 태그 안의 내용은 실질적인 웹 페이지의 내용이 됩니다. 제목, 문단, 이미지 등등 실제 웹 페이지를 구성하는 내용들은 모두 body 태그안에 위치하게 됩니다.
head 태그 안에는 추가적으로 웹 페이지의 세부 사항들을 설정하는 내용들이 들어갑니다. 브라우저 표시줄의 제목이나, 메타 데이터, 외부 링크 등이 여기에 해당합니다.
이외에 HTML에는 여러 가지 태그가 있는데, 중요한 점은 코드 작성자의 의도에 부합하는 성격의 태그를 반드시 적어줘야 한다는 점입니다.
이를 semantic하게 태그를 사용한다고 하며, 이러한 방식으로 HTML을 작성하여야 사람과 컴퓨터 모두가 이해하기 쉬운 문서 작성이 이루어집니다.
