썸네일의 모든 텍스트에 사용된 폰트는 123RF입니다.

포스트 제목 ::니힐의 웹 프로그래밍 학습 - HTML

작성 시간 ::2019년 05월 01일 - 06시 : 00분

작업 환경 ::윈도우 7, 네이버 웨일 브라우저

관련 키워드 ::HTML, 웹, 프로그래밍, 코딩

니힐입니다. 아주 오랜만에 포스트를 작성합니다. 이게 올라가는 시간은 아마 5월 1일입니다. 네, 지금 그 시간에 적고 있습니다. 게임도 하고 공부도 하면서 시간을 보냈습니다. 게임은 질려갔고 공부는 아직도 할 게 많습니다. 이 블로그를 완전히 버릴 수는 없기 때문에 이렇게라도 간간히 찾아옵니다. 내려놨던 웹 프로그래밍 공부를 처음부터 다시 천천히 시작하고 있습니다. 이 글의 제목에서 볼 수 있듯 이 글은 HTML에 대한 글입니다. HTML을 알려드리기 위한 글은 아닙니다. 제가 알고 있고 배웠던 것들을 복습하며 되새겨보기 위한 일지 같은 느낌으로 작성할 생각입니다. 물론 모르시는 분들이 보기에 도움이 될 수는 있습니다. 하지만 기본적으로 이건 강의가 아닙니다.

수많은 프로그래밍 언어들 중에서 가장 기본적으로 접하기 쉬운 건 HTML입니다. 제일 직관적이고 제일 간단합니다. 이 HTML에 대해 알아보면서 하나 하나의 기능을 파헤치려고 합니다. 가장 자주 사용되는 것들부터 미세한 부분까지 말이죠. 강의가 아니라고는 했지만 무언가를 배웠을 때 그걸 이용해서 타인을 가르쳐보면 자신의 것이 된다는 것은 일리 있고 그런 방법을 사용하는 게 괜찮다고 생각은 하고 있습니다. 즉 이런겁니다. 강의는 아니지만 누군가 배워갈 수는 있다. 시작하기 전에 이 글들은 제가 정리해놓은 일지 같은 것이다. 라는 것을 미리 알려두고 시작하려고 합니다.

프로그램과 프로그래밍은 무엇인가?

본론으로 들어가봅시다. 프로그램이란 건 무엇일까요. 최근엔 앱. 애플리케이션이라고도 합니다. 응용성이 있고 짜여진 순서대로 실행되는 무언가. 그걸 프로그램이라고 할 수 있죠. 프로그램은 연극이나 어떤 행사에서 순차적으로 진행되는 코너? 이벤트? 들의 최소단위 입니다. 프로그램이 짜여진대로 진행되고 끝을 봅니다. 우리가 훗날 만들 프로그램도 우리가 정한 것들에 따라 순차적으로 실행될 겁니다. 그래서 프로그램이라고 불리는 것이죠. 그럼 자연스럽게 프로그래밍은 프로그램을 만드는 행위입니다. 그렇다면 프로그램은 어떻게 만들까요? 우리가 프로그램을 만들기에 있어서 필요한 건 컴퓨터와 대화를 하는 것입니다. 컴퓨터는 인간의 말을 알아먹지 못합니다. 프로그램을 만들기 위해선 우리 인간이 컴퓨터가 알 수 있는 말을 배워야하죠. 그게 바로 프로그래밍 언어입니다.

우리는 하나의 언어를 배워서 프로그램이라고 하기는 아주 아주 아주 애매하고 부족하지만 무언가를 만들어 볼 겁니다. 프로그래밍은 다른 말로 코딩이라고도 합니다. 프로그래밍은 프로그램의 설계도를 만드는 것이고 그 설계도를 컴퓨터한테 건네주면 설계도를 바탕으로 컴퓨터가 프로그램을 만들어줍니다. 즉 우리는 코딩을 하게 될 거라는 것이죠. 프로그래밍과 코딩. 같은 말입니다. 수많은 프로그래밍 언어들 중에서 HTML을 먼저 건드리는 이유는 가장 쉽기도 하고 가장 기초가 되기 때문입니다. 우리는 이제부터 HTML이라는 것에 대해서 알아보게 될 겁니다. 왜 HTML인가 하면, 간단하기 때문에 결과를 바로 바로 확인할 수 있어 흥미를 붙이기에 안성맞춤이기 때문입니다. 프로그래밍을 처음 접하면 신기해하고 빠져들게 됩니다. 저는 지금도 그렇고 앞으로도 그럴 겁니다. 우리는 이제 웹 프로그래밍을 하게 될 겁니다. 웹을 만들고 더 깊은 곳으로 들어가보도록 합시다.

HTML은 무엇인가?

그럼 이 HTML은 뭐하는 물건일까요. 사실 HTML은 프로그래밍 언어는 아닙니다. 순차적으로 진행되긴 하지만 프로그래밍적으로 움직이지는 않습니다. HTML은 인터넷 페이지를 구성하는 뼈대라고 할 수 있습니다. 인터넷 상에서 보이는 모든 것들은 HTML로 이루어져 있습니다. 그렇지 않은 것은 없습니다. 지금 보고 계신 이 페이지도 HTML로 만들어졌습니다. 웹을 만든다는 것은 HTML 코드를 짠다는 것과 똑같습니다. HTML은 HyperText Markup Language하이퍼 텍스트 마크업 랭귀지라고 해서 마크업 언어라고 불립니다. 형태를 구성하는 언어죠. 뼈대를 만드는 언어입니다. 우리는 기본적으로 이 뼈대를 만드는 방법부터 배울 겁니다.

HTML이 어떻게 만들어졌고 어떤 역사를 갖고 있는지는 아직 중요하지 않습니다. 그건 여러분이 직접 알아보시면 됩니다. 흥미가 생기고 더 깊은 지식을 원한다면 그렇게 하면 됩니다. 저는 정리를 위해 이 글을 작성하는 것이기 때문에 그런 것은 다루지 않겠습니다. HTML버전은 최신 버전이 5입니다. 그걸 기반으로 알아볼 겁니다.

HTML은 어떻게 생겼는가?

어떻게 생겼는가부터 알아봐야겠죠. 아주 간단합니다. HTML은 아래처럼 생겼습니다.

자 우리는 HTML을 다룰 때에 하나 하나의 요소를 태그라고 부를 겁니다. 위에 있는 코드는 div 라는 이름의 태그입니다. 우리는 HTML을 다룰 때 처음부터 끝까지 이런 규칙을 사용할 겁니다. 꺽쇄로 시작해서 꺽쇄로 끝나는 모양이죠. Hello world를 감싸는 앞의 div와 뒤의 div의 모양이 살짝 다른 걸 알 수 있을 겁니다. 우리는 이런 모양을 태그라고 부를 겁니다. 왜 태그라고 불리는 걸까요. 간단합니다. 상표처럼 항상 붙어 있기 때문이죠. 옷을 사거나 할 때에 태그가 붙어있는 것처럼 붙어있어서 태그라고 부릅니다. 이 div태그는 수많은 태그 중에 하나입니다. 보통은 영역을 만들 때에 사용합니다.

몇몇의 예외 사항을 제외하곤 모든 태그는 같은 규칙을 공유합니다. 여는 태그와 닫는 태그. 저 코드에서 보자면 여는 태그는 <div> 입니다. 닫는 태그는 </div> 입니다. 닫는 태그에는 이렇게 슬래쉬를 항상 붙여줘야 합니다. 그렇다면 저 코드가 어떤 것을 의미하는 것인지 이야기를 해보겠습니다.

우리가 저렇게 태그를 작성하면 이런 의미가 됩니다. 브라우저야. div 태그를 만들고 그 안에 hello world를 출력해줘. 그럼 컴퓨터는 저것을 보고 이 태그를 읽어서 그 안에 어떤 내용이 있는지를 보고 그걸 그대로 화면에 그려줍니다. 그래서 결과적으로 저 div 태그는 hello world라는 문자를 출력하게 됩니다. html이 무엇인가에 대한 자세한 이야기는 사실 할 필요가 없...습니다. 그래서 기본적으로 어떻게 생겼는지를 알아봤습니다. 다음부터는 본격적으로 기본적인 태그들을 배워보도록 합시다.

앞으로 많은 태그를 배울 겁니다. 당장 다음 글에선 html 문서의 기본적인 형식에 대해서 다뤄보도록 하겠습니다. 오랜만에 쓰는 글이라 뭔 소리를 하는건지 잘 모르겠지만, 가끔 심심하면 정리하는 시간을 가져보도록 해야겠습니다. 지금까지 니힐이었습니다. 다음 글에서 봅시다. 언제가 될 지는 모르겠지만요.

연락처

이 아래는 SNS 연락처들입니다. 하고 싶은 말이 있으시거나 포스트에 관한 질문 사항이 있으시면 연락 주시면 빠르게 답변드리도록 하겠습니다. 인디게임 소개, 리뷰 같은 제의도 받고 있으니까 언제든지 연락을 주시면 두팔을 벌려 맞이해드리겠습니다.

이메일 ::nihil_ncunia@naver.com

트위터 ::@NIHIL_ILLUST

인스타그램 ::nihil_illust

플리커 ::니힐_NIHIL

디스코드 ::니힐 NIHIL#3841