컴퓨터 언어란?
언어란 사람과 사람이 생각을 주고 받기 위한 공통의 약속입니다. 마찬가지로 컴퓨터 언어란, 사람과 컴퓨터 모두가 이해할 수 있는 공통의 약속을 의미합니다. 많은 컴퓨터 언어가 있고, HTML은 그 중의 하나입니다.
HTML이란?
HTML은 웹페이지를 만들기 위한 언어입니다. 여러분이 만들고 싶은 웹페이지가 무엇인지를 HTML이라는 언어의 문법에 맞게 작성해서 웹브라우저에게 전달하면, 웹브라우저는 HTML의 문법에 따라서 이것을 해석해서 웹페이지를 화면에 보여줍니다.
HTML의 특징
오늘날 웹페이지는 인류의 생각과 사상 그리고 마음이 담기는 거대한 그릇이라고 할 수 있습니다. 그런 점에서 HTML은 세상에서 제일 중요한 컴퓨터 언어 중의 하나입니다.
만약 HTML이 어려웠다면 웹은 성공할 수 있었을까요? 웹이 성공할 수 있었던 것은 태초의 언어인 HTML이 정말 쉬웠기 때문입니다. HTML은 앞으로 여러분이 배울 어떤 컴퓨터 언어보다 쉽습니다.
즉 중요하고, 쉽다는 점에서 HTML은 배우기에 매력적인 언어입니다. 지금부터 HTML의 간단한 문법을 배워봅시다.
원인과 결과
구체적인 실습을 하기에 앞서서 아래 웹페이지를 방문해보세요. 웹페이지에서 오른쪽 클릭을 하고 소스보기(View Page Source)를 해보세요.
https://codingeverybody.github.io/WebApplication/html/
아래처럼 이해할 수 없는 문자가 나올꺼예요. 이것이 코드 혹은 소스라고 부르는 것입니다. 여러분이 코드를 작성해서 브라우저에게 전달하면 브라우저는 코드에 따라서 웹페이지를 만들어서 화면에 표시해줍니다.
<!doctype html>
<html>
<head>
<title>Home page</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Web Application</h1>
</header>
<nav>
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript</a></li>
</ol>
</nav>
<article>
<h2>Welcome</h2>
Happy coding!!
</article>
</body>
</html>
즉 아래와 같은 관계라고 할 수 있습니다. 코드가 원인이 되어서 웹페이지라는 결과가 만들어지는 것입니다. 아무리 어렵고 복잡한 것도 본질적으로는 이런 구조를 가지고 있습니다.
기본
그럼 이제 코드를 한번 살펴봅시다. 그리고 이런 느낌을 가져보세요. (매우 중요합니다)
무슨 뜻인지 모르겠다. ㅠㅠ
이해되지 않는 코드가 나오니까 마음이 어지러울꺼예요. 좋습니다! 바로 그런 상태가 필요합니다. 이제부터 아주 아주 간단한 HTML의 문법을 배워볼 것입니다. 약간의 지식이 내 안으로 들어왔을 뿐인데, 내 안에서 어떤 혁명적인 변화가 생기는지 음미해보시길 바래요. 실습을 시작해보죠. 준비물은 웹브라우저와 메모장(맥에서는 textedit)만 있으면 됩니다.
1. 메모장을 켜고 아래와 같이 입력해주세요.
우리는 모두 <strong>스스로 익힌 것</strong>을 제일 잘 배운다. (도널드 커누스)
맥을 쓰는 경우는 textedit를 켜고 포맷에서 일반 텍스트 만들기를 선택한 후에 위의 내용을 입력해야 합니다.
2. 파일을 저장합니다.
파일의 이름은 helloworld.html로 합시다. 메모장을 사용하는 분은 파일 형식을 꼭 모든파일로 하고 저장해야 합니다. 그렇게 하지 않으면 helloworld.html.txt 파일이 생성될꺼예요.
3. 파일을 엽니다.
파일 아이콘을 더블 클릭하면 웹브라우저가 실행되면서 웹페이지가 표시될꺼예요. 또는 윈도우는 Ctrl+O , 맥은 Command + O 키를 누른 후에 파일을 선택해서 열면 됩니다. 아래와 같이 웹페이지가 표시되면 성공한 것입니다.
문법
<strong>과 </strong>을 태그(tag)라고 합니다. 이 태그는 '스스로 익힌 것'이 화면에 진하게 표시되야 한다는 것을 웹브라우저에게 설명하고 있습니다.
일상에서도 태그라는 말을 사용합니다. 아래처럼 생긴거 아시죠? 이런 것을 태그라고 합니다.
그럼 컴퓨터 공학자들은 <strong>과 같은 기호를 왜 태그라고 이름 지었을까요? 그것은 일상에서 사용하는 태그와 이 기호가 같은 성격을 가지고 있기 때문이겠죠. 그래서 컴퓨터 공학자들은 이 기호에 태그라는 이름을 붙였습니다. 시적인 표현인 것이죠. 컴퓨터 공학의 많은 개념들이 태그처럼 시적인 표현인 경우가 많습니다. 컴퓨터 공학은 거대한 시입니다.
내 안의 혁명
아직은 대단한 것을 안 배운 것 같죠? 아닙니다. 우리는 대단한 것을 배운 것입니다. 우리 안에서 이미 시작된 혁명을 한번 음미해봅시다.
아까 본 태그를 다시 살펴보시죠. 여전히 모르는 태그가 많습니다. 무슨 혁명이 일어났다는 것인지도 공감하기 어렵죠.
<!doctype html>
<html>
<head>
<title>Home page</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Web Application</h1>
</header>
<nav>
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javascript</a></li>
</ol>
</nav>
<article>
<h2>Welcome</h2>
Happy coding!!
</article>
</body>
</html>
위의 코드 중에 하나를 살펴봅시다.
<h1>Web Application</h1>
h1이 무엇일까요? h1를 잘 보면 우리가 모르는 것과 아는 것이 뒤섞여 있습니다. 우리는 h1이 구체적으로 무엇인지는 모르지만, h1이 태그라는 것은 알고 있지 않나요? 태그를 배우기 전과 배운 후의 차이를 곱씹어 봅시다. 전에는 무엇을 모르는지도 몰랐다면, 이제는 무엇을 모르는지는 아는 상태가 되었다고 할 수 있습니다.
무엇을 모르는지 알면
검색할 수 있습니다.
질문할 수 있습니다.
생각할 수 있습니다.
검색해봅시다. 자주 쓰는 검색엔진을 이용해서 아래와 같이 검색해보세요.
HTML 태그 h1
그래서 아래와 같은 설명이 있는 페이지를 찾았다고 해보죠.
h1부터 h6까지는 제목은 나타내는 태그입니다. 아래 예제를 보시죠.
h1이 무엇인지 알겠죠? 이것은 혁명적인 변화입니다. 정보기술이 등장하기 전에는 무엇을 모르는지 아는 것이 별로 의미가 없었을지도 모릅니다. 알고 싶은 것이 있어도 알 수 있는 방법이 마땅히 없었을 것이니까요. 그래서 예전에는 필요할지도 모르는 지식을 모두 머리속에 넣어 두어야 했습니다.
하지만 지금은
컴퓨터
인터넷
웹
검색엔진
커뮤니티
모바일 장치를
항상 가지고 다닙니다.
과연 이런 시대에도 모든 지식을 머리속에 다 가지고 있어야 할까요? 정보기술이 존재하는 시대에 공부하는 방법은 달라져야 합니다. 정보기술 덕분에 우리는 시작하는 순간 많은 것을 할 수 있게 됩니다. 진도를 더 나가는 것 보다 이런 혁명적 변화를 천천히 음미해보는 것이 더 가치있다고 생각합니다. 우리의 시작이 시시각각 대단해지고 있습니다.
