HTML

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688

언어란 무엇인가?

지금까지 프로그래밍을 위한 준비작업을 했다면 이제부터는 본격적으로 프로그래밍을 시작 할 것이다. 용어 정리를 간단히 정리 해보자. 프로그래밍이란 프로그램을 만드는 행위를 의미한다. 프로그래밍은 그 프로그램이 어떻게 동작할 것인가에 대한 일종의 설계도가 필요한데 이것을 코드(code)라고 부르고, 이 코드를 만드는 행위를 코딩(coding)이라고 한다. 코드는 사람인 프로그래머가 이해할 수 있고, 기계인 컴퓨터도 이해할 수 있도록 약속된 형식을 가지고 있는데, 이 형식을 언어(language)라고 부른다.

잘 아시다시피 언어란 소통을 위한 도구다. 소통을 위해서 제일 중요한 것은 어떤 기호가 어떤 의미를 지니는지에 대한 공통의 합의 즉 약속이 제일 중요하다. 이 약속을 언어의 세계에서는 문법(syntax)이라고 하고, 컴퓨터 프로그래밍의 세계에서도 똑같이 문법이라고 부른다. 그래서 문법을 익히는 것은 프로그래밍의 세계에서 매우 중요한 일이다. 하지만 두려워할 필요는 없다. 프로그래밍 언어는 인간의 언어에 비하면 매우 단순하다. 지금부터 배울 HTML은 문법 자체를 이해하는데 (10분은 너무하고) 20분도 걸리지 않는다.

HTML이란?

HTML이란 웹페이지를 만들기 위한 언어다. HTML 문법에 맞게 코드를 작성해서 브라우저로 열어보면 브라우저는 이것을 해석해서 사람이 이해할 수 있는 웹페이지를 만든다.

HTML에 대한 자세한 내용은 생활코딩 HTML 수업을 참고하자. http://opentutorials.org/course/11

기본지식

HTML과 웹페이지의 관계

HTML은 마크업이라는 형식의 언어다. 어떤 정보가 있을 때 그 정보의 성격이나 기능을 태그라는 형식으로 감싸는 것이 마크업이다.

다음 예제에서 <h1>을 태그(tag)라고 부르고, <h1>을 여는 태그 </h1>을 닫는 태그라고 부른다. h1은 웹페이지에서 가장 큰 제목을 의미하는 태그인데 Hello world라는 문자를 열리는 태그 <h1>과 닫히는 태그 </h1>으로 감싸면 브라우저는 Hello world가 가장 큰 제목임을 알게 되면서 이 문자열을 크고 진하게 화면에 표시한다.

<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>

다음은 위의 예제를 브라우저에서 실행한 결과다.

다음 예제는 링크를 만드는 예제다. 이 예제에서 열리는 태그는 <a>이고 닫히는 태그는 </a>인데 a 태그는 생활코딩이라는 문자가 링크임을 브라우저에게 알려주고 있다. href="http://opentutorials.org" 와 같은 것을 속성이라고 부르는데, href는 속성명, http;//opentutorials.org는 속성 값이라고 한다. href 속성의 역할은 링크가 어떤 문서를 가르키는지를 명시하는 것이다. 태그만으로는 그 태그가 감싸고 있는 컨텐츠의 성격이나 기능을 나타내기 어려운 경우 속성이 사용된다.

<a href="http://opentutorials.org">opentutorials.org</a>

위의 코드는 아래와 같은 링크를 만든다.

opentutorials.org

위와 같이 태그는 약속이다. h1은 제목을 a 태그는 링크를 의미한다는 약속이 이미 맺어져 있다. 그래서 하나의 HTML 코드를 작성하면 모든 브라우저에서 거의 동일한 화면을 볼 수 있는 것이다. 바로 이 약속을 이해하는 것이 웹페이지를 만드는 기본이 된다. 아래의 링크를 방문해보면 생활코딩에서 공동번역을 진행 중인 HTML 태그 사전이 있다. http://opentutorials.org/course/8 이 태그 사전의 목록들이 HTML 웹페이지를 만드는데 동원되는 태그들이다. 양에 주눅이 들지 말자. 자주 사용하는 태그는 이것보다 훨씬 적고, 어떤 태그가 있는지만 대충 알고 있으면 그때그때 사전의 도움을 받으면 된다. 생활코딩 HTML 수업을 듣는 것만으로도 기본적으로 알고 있어야 하는 태그들을 자연스럽게 알게 된다. http://opentutorials.org/course/11

HTML 실습

이제 웹페이지를 직접 만들어보자.

에디터를 실행한다. 이번 수업에서는 aptana를 에디터로 사용할 것이다. (http://opentutorials.org/course/488/2604)

opentutorials 프로젝트에 마우스 포인트를 올려놓고 오른쪽 클릭한 후에 new > file 을 선택한다. new file 창에서 File name으로 sample.html을 입력하고 Finish 버튼을 누른다.

그리고 아래 내용을 복사해서 입력한 후에 저장한다.

<html>
       <head>
               <title>opentutorials.org</title>
       </head>
	<body>
		<h1>Hello world</h1>
		<h2>Hello world</h2>
		<h3>Hello world</h3>
		<a href="http://opentutorials.org">coding everybody</a>
	</body>
</html>

firefox를 실행하고 주소표줄에 아래 URL을 입력한다.

http://localhost/opentutorials/sample.html

아래와 같은 결과가 출력되면 당신은 직접 서버를 구축해서 자신이 작성한 HTML문서를 화면에 표시하는 웹서비스를 만든 것이다! 그 결과가 약간 소박하기는 하지만, 앞으로 다양한 기술을 익혀가면서 점점 세련된 결과를 얻게 될 것이다.

기본 태그

위에서 실행한 예제 코드를 보면 몇 가지 태그가 등장하는데 각 쓰임은 아래와 같다.

html : 이 문서가 html 문서임을 의미하는 태그다. 모든 태그는 <html>과 </html>태그 사이에 온다.
head : 웹페이지의 제목이나 작성자나 키워드와 같이 그 문서 자체를 설명하는 정보가 온다. 화면에 출력되지 않는다.
title : head 태그 안쪽에 등장해야 하고 그 문서의 제목을 의미한다.
body : 웹페이지의 실제 정보가 등장한다.

opentutorials 의 HTML 실습

제일 먼저 해야 할 것은 UI 모델링에서 그린 기본 골격을 HTML로 만드는 것이다. 아래는 그림은 UI 모델링 수업에서 그려본 대략적인 서비스의 구성이다.

UI 모델링

전체 코드

위의 그림을 HTML 코드로 작성하면 아래와 같다. opentutorials 프로젝트의 index.html 파일에 아래의 코드를 복사&붙여넣기하고 저장한다. HTML 코딩에는 정답이 없다. 그 코드를 만드는 사람의 취향과 목적에 따라서 다양한 형태의 코드가 나올 수 있기 때문에 꼭 아래와 같이 해야 하는 것은 아니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>

	<body id="body">
		<div>
			<header>
				<h1>JavaScript</h1>
			</header>
			<div id="toolbar">
				<input type="button" value="black" />
				<input type="button" value="white" />
			</div>
			<nav>
				<ul>
					<li><a href="http://opentutorials.org/course/49/17">JavaScript</a></li>
					<li><a href="http://opentutorials.org/course/49/16">변수와 상수</a></li>
					<li><a href="http://opentutorials.org/course/49/18">연산자</a></li>
					<li><a href="http://opentutorials.org/course/49/19">함수</a></li>
					<li><a href="http://opentutorials.org/course/49/20">이벤트</a></li>
					<li><a href="http://opentutorials.org/course/49/21">객체</a></li>
				</ul>
			</nav>
			<article>
				<h2>변수와 상수</h2>
				<div>
					<p>변수란</p>
					<ul>
						<li>
							변하는 값
						</li>
						<li>
							x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
						</li>
					</ul>
					<p>
						상수란
					</p>
					<ul>
						<li>
							변하지 않는 값
						</li>
						<li>
							x = 10 일 때 오른쪽항인 10이 상수가 된다.
						</li>
					</ul>
				</div>
			</article>
		</div>
	</body>
</html>

실행

웹브라우저를 이용해서 이 파일에 접속한다.

http://localhost/opentutorials/index.html

실행 결과는 아래와 같을 것이다. UI 모델링에서 그린 모습과는 많이 다르다. 걱정 말자. 디자인은 CSS라는 언어의 몫이다. HTML은 정보를 표현하는 언어이기 때문에 시각적인 부분은 신경 쓰지 않아도 된다. 이게 무슨 뜻인지는 다음 강의인 CSS 편에서 곧 알게 된다.

헤더영역

전체 코드를 봤으니 부분별로 살펴보자. 아래는 상단의 헤드 부분이다.

<header>
        <h1>JavaScript</h1>
</header>

header 태그는 이 태그가 감싸는 컨텐츠가(위의 예제에서는 <h1>...</h1>) 제목이나 로고 또는 검색과 같이 통상 페이지의 최상단에 등장하는 정보들을 그룹핑할 때 사용된다.

웹페이지들은 관습적인 구성을 가지고 있는데, 예를 들어 상단에는 타이틀이 오고, 왼쪽 측면에는 다른 페이지로 이동할 수 있는 네비게이션이 위치하고, 최하단에는 (회사소개나 도움말과 같은) 부가적인 정보 페이지로 이동하는 푸터(footer)를 가지고 있다. 이런 관습적인 구성을 표현하기 위해서 아래와 같은 태그들이 준비되어 있다.

header : 페이지의 제목이나 검색창과 같은 요소. 블로그로 치면 블로그의 제목
nav : 다른 페이지로 이동할 수 있는 메뉴와 같은 요소. 블로그로 치면 방명록이나 관리자로 이동할 수 있는 링크들
aside : 그 페이지의 핵심적인 컨텐츠와는 큰 관련이 없는 부가적인 요소들이 온다. 블로그로 치면 사이드 바에 있는 최근 글이나 카테고리
article : 페이지의 핵심적인 내용에 해당하는 요소. 블로그로 치면 본문
footer : 페이지의 하단에 오는 요소들. 회사소개, 도움말, 개인정보 보호정책 등

<h1> 태그는 그 페이지에서 가장 중요한 제목이 온다. 중요한 제목이 무엇인가를 판단하는 편리한 방법은 가장 크게 표시되어야 하는 정보가 무엇인가를 생각해보는 것이다. 예제에서는 수업의 제목인 JavaScript를 h1태그가 감싸고 있다.

테마기능

사용자의 취향에 따라서 검은색/흰색 배경의 디자인을 선택할 수 있도록 버튼을 제공한다. 이 기능은 html만으로는 구현할 수 없기 때문에 현재는 동작하지 않는다.

<div id="toolbar">
    <input type="button" value="black" />
    <input type="button" value="white" />
</div>

div 태그는 특별한 의미가 있는 태그가 아니고, 태그와 태그들의 경계를 설정할 때 사용한다. 위의 예제에서는 두개의 input 태그를 하나로 그룹핑해서 다른 태그들과 구분하고 있다.

네비게이션 영역

네비게이션은 다른 페이지로 쉽게 이동할 수 있도록 한 목록을 의미한다. UI 모델링 그림에서는 아래의 부분이 여기에 해당한다.

코드는 아래와 같다.

<nav>
    <ul>
        <li><a href="http://opentutorials.org/course/49/16">JavaScript</a></li>
        <li><a href="http://opentutorials.org/course/49/17">변수와 상수</a></li>
        <li><a href="http://opentutorials.org/course/49/18">연산자</a></li>
        <li><a href="http://opentutorials.org/course/49/19">함수</a></li>
        <li><a href="http://opentutorials.org/course/49/20">이벤트</a></li>
        <li><a href="http://opentutorials.org/course/49/21">객체</a></li>
    </ul>
</nav>

nav 태그는 header 태그처럼 그 하위 컨텐츠들이 네비게이션의 역할을 한다는 것을 의미하는 태그다.

ul 태그는 목록을 의미한다. 이 태그의 하위 태그로 등장하는 li 태그는 앞에 점이 붙어서 이 태그들이 목록의 항목을 나타내고 있음을 시각적으로 표현한다.

예제에서는 각각의 토픽을 의미하는 'javascript, 변수와 상수, 연산자'등이 일종의 목록이기 때문에 ul 태그를 사용했다. 목록에 대한 자세한 내용은 생활코딩 HTML 목록 편을 참고한다. http://opentutorials.org/course/11/67

본문 영역

<article>
	<h2>변수와 상수</h2>
	<div>
		<p>
			변수란
		</p>
		<ul>
			<li>
				변하는 값
			</li>
			<li>
				x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
			</li>
		</ul>
		<p>
			상수란
		</p>
		<ul>
			<li>
				변하지 않는 값
			</li>
			<li>
				x = 10 일 때 오른쪽항인 10이 상수가 된다.
			</li>
		</ul>
	</div>
</article>

기획안에 따르면 본문은 크게 두 개의 정보가 표시된다. 토픽의 제목과 본문의 내용이다. 이제 '제목' 하면 떠올라야 하는 태그가 있다. <h1>, <h2>... 말이다. 그런데 기획상 이 페이지 상에서 가장 크게 표시돼야 하는 것은 "JavaScript"라는 수업의 제목이다. 그 다음에 크게 표시돼야 할 것이 본문의 제목이기 때문에 제목의 태그로 h2를 사용했다. 그리고 본문이 시작되는 부분은 div 태그로 감싸줬는데 div 태그는 지금까지 살펴본 태그들과 다르게 특별한 의미를 가지고 있지 않다. 그냥 필요에 따라서 태그들을 그룹핑해서 구획을 나누는데 사용된다. div 태그 안쪽의 내용들은 본문의 내용인데, 이 부분은 샘플이기 때문에 따로 설명하지 않는다.

버전관리

이렇게 해서 HTML코딩이 끝났다. 만약 git으로 버전관리를 하고 있다면 지금까지 작업한 내용을 커밋해서 로컬 저장소로 동기화하자.

1. 터미널을 실행한다.

2. 작업 중인 디렉토리로 이동한다.

cd /var/www/opentutorials

3. 추가된 파일인 index.html에 대한 버전관리를 시작한다.

git add index.html

4. 작업한 내용을 커밋한다. 'add html' 부분은 작업이력이기 때문에 취향에 따라서 메시지를 바꿔보자.

git commit -am 'add html'

이제 로컬 저장소와 원격저장소를 동기화하자. git pull로 원격 저장소의 소스를 우선 다운로드하고, git push로 로컬의 소스를 업로드한다.

git pull origin master;
git push origin master;

지금까지 작업한 내용을 github.com으로 업로드 했다. github.com을 방문해서 자신의 저장소를 확인해보자.

정리

지금까지 매우 간단한 형태의 HTML 마크업을 해봤다. HTML은 이해하기 쉬운 언어다. 하지만 프로그래밍을 처음 시작하는 입장에서는 쉬운 것도 당연히 어렵다. 그렇다고 너무 걱정할 필요는 없다. 후속 수업에서도 지속적으로 HTML과 관련된 언급을 반복할 것이고, 생활코딩의 HTML 수업을 통해서 HTML에 대한 체계적인 지식을 구축할 수 있을 것이다. 다음 수업에서는 CSS라는 기술을 이용해서 못생긴 웹페이지를 디자인해볼 것이다.

사족. 이 많은 것을 암기해야 하나?

프로그래밍 입문자의 시작을 돕다보면 기억에 의존해서 코드를 짜야 한다는 강박관념을 발견하게 됩니다. 프로그래밍의 궁극적인 경지는 머릿속에 담겨있는 지식으로 일필휘지 코딩하는 것이라는 건 맞습니다. 하지만 이것은 다시 강조하지만 '경지' 입니다. 여러분은 (참조할 정보를 의미하는) 레퍼런스가 넘쳐나는 인터넷을 가장 중요한 도구로 실제 코딩을 하게 됩니다. 모르는 것은 찾아봐야 합니다. 자주 찾는 지식은 머리속에 남아서 자연스럽게 암기될 것이고, 자주 찾지 않는 지식은 도태될 것입니다. 이런 과정을 반복하다보면 효율적이면서 개인화된 레퍼런스가 머리속에 만들어지게 되고 결국 궁극적인 경지에 도달하게 되는 것이죠. 암기는 시험을 치뤄야 하는 공교육과 검색 불가인 올드 정보들의 한계가 가져온 저주입니다. 한때는 암기가 필요한 시대도 있었을 것입니다. 하지만 세상이 바뀌었는데도 암기는 가장 중요한 학습방법으로 남아있습니다. 다시 한번 강조하지만 실무 공학에서 암기란 없습니다. 지루하게 암기하지 마시고, 즐겁게 경험하시길 바랍니다. 코딩은 세상에서 제일 재미있는 일입니다.