12. HTML의 기초

소개

이번 장에서 당신은 HTML의 역사를 간단히 소개하고 HTML이 무엇인지, 어떤 일을 하는지 그리고 문서에서 HTML의 구조가 어떻게 보이는지를 배우게 될 것이다. 이 장에서 HTML의 개별적인 부분들을 깊이 있게 살펴볼 수 있을 것이다. 이 장의 내용은 다음과 같다:

  • HTML은 무엇인가
  • HTML은 어떻게 생겼는가
  • HTML의 역사
  • HTML의 구조
  • HTML의 문법
  • 블록 요소와 인라인 요소
  • 문자 참조
  • 요약

HTML은 무엇인가

대부분의 데스크탑 어플리케이션은 파일을 읽고 쓰는데 특별한 파일 포멧을 사용한다. 예를 들어, 마이크로소프트 워드는 ‘.doc’ 파일을 이해고 엑셀은 ‘.xls’를 이해한다. 이런 파일들은 당신이 파일을 열었을 때 문서를 재설계(출력)하는 방법같은 명령을 포함한다. 문서의 콘텐츠가 무엇인지, 저자나 문서의 최종 수정일과 같은 글에 대한 “메타데이터”를 통해서 버전 사이에서 이리 저리 갈 수 있다.

HTML은 웹 문서의 콘텐츠를 기술하는 언어다. HTML은 사용자 에이전트가 문서를 이해할 수 있도록 문서내의 텍스트 주변을 (‘요소’라고 불리는) 마커로 감싸는 특별한 문법을 사용한다.

기술적 용어인 “사용자 에이전트”는 “웹 브라우저”로 더 많이 사용된다. 사용자 에이전트는 사용자편에서 웹 페이지를 접속하기 위한 소프트웨어다. 여기에는 중요한 차이가 있는데 모든 종류의 데스크탑 브라우저 소프트웨어(인터넷 익스플로어, 오페라, 파이어폭스, 사파리 등)와 다른 기기들의 대체 브라우저들(위 인터넷 채널과 오페라 미니와 아이폰의 웹킷과 같은 모바일 폰 브라우저들)은 사용자 에이전트다. 그렇지만 모든 사용자 에이전트가 브라우저 소프트웨어인 것은 아니다.

자동화된 프로그램인 구글과 야후!의 검색 엔진은 웹을 색인화 하기 위해서 사용되고 있고 사용자 에이전트로 볼 수 있지만 누구도 그것들을 직접 통제하고 있지는 않는다.

HTML은 어떻게 생겼는가

HTML은 콘텐츠의 원문을 그대로 표현한다는 의미를 가지고 있다. 예를 들어, 헤더의 “The Purpose of HTML“의 코드는 다음과 같다:

<h2 id="htmllooks">What HTML looks like</h2>

<H2>는 문서 흐름 가운데 두번째 수준의 제목을 의미하는 표시(마커)이다. 각각의 마커를 우리는 “태그”라고 부른다. </H2>는 두번째 수준의 제목의 끝을 의미하는 태그로 우리는 이를 “종료 대그(Closing Tag)” 라고 부른다. 시작 태그와 종료 태그 그리고 둘 사이의 모든 내용을 포함해서 “요소(Elements)“라고 부른다. 많은 사람들이 “요소”와 “태그”를 바꿔 사용하지만, 아주 엄격하게 사용되지는 않는다. id=“htmllooks”는 속성이다. 당신은 속성에 대해서 이후에 더 많이 배우게 될 것이다.

대부분의 브라우저들은 보통 “보기(View)” 메뉴 아래 “소스”나 “소스 보기” 옵션을 제공한다. 만약 당신의 웹브라우저에 이 옵션이 있다면 지금 이 웹페이지의 HTML 소스를 살펴보자.

HTML의 역사

인터넷과 웹의 역사 장에서 현대적 웹이 되기까지의 역사에 대해서 조금 배웠다.

팀 버너스 리가 월드 와이드 웹을 발명했을 때 그는 첫번째 웹 서버와 웹 브라우저 그리고 첫번째 버전의 HTML을 창조했다.

HTML은 처음 나온 이후로 적지 않게 변해왔으며 최근의 HTML 컨텐츠들은 첫 문서에서 구체화되었고 절반 이상의 “태그들이 기초 HTML태그 상에서 설명되며 여전히 문서상에 존재한다.

웹 페이지 작성을 시작하는 사람들이 늘었고 HTML에 더 많은 기능들이 추가되면서 본래 브라우저 소프트웨어가 대체되었다. 많은 기능이 채택되었다.(NCSA 모자익이 처음 구현되었을 때 문서 안에 이미지를 삽입하기 위해서 img 요소가 생겼다. )

어떤 것들은 더욱더 독점화 되었고, 정말로 오직 한 두개의 브라우저들만 사용되었다. 점차 표준화의 필요성이 증가되었다. 그래서 다른 웹 브라우징 소프트웨어 저자들은 HTML의 부분을 구현하는데 실패하는지 않는지를 판단할 수 있도록 기술된 (명세서라고 불리는) 문서를 포함했다.

IETF1는 1993년에 HTML의 초안을 공개했지만 1994년에 표준이 되기 전에 만기되었다. 하지만 HTML 표준화를 위해 워킹 그룹이 만들어지면서 IETF를 자극하게 된다.

1995년 “HTML 2.0”은 HTML 초안에서 아이디어를 받아들여 쓰여졌다. 대체 제안된 “HTML+” 은 Dave Raggett에 의해서 작성되었으며 (NCSA Mosaic가 개척한 문서 안에 이미지 삽입을 위한 기술 같은) 브라우저에 의해 구현된 많은 새로운 요소들이 기본적으로 사용되었다.

HTML 3.0 초안은 이듬해 진행되지만 브라우저 제작사들로부터 진로에 대한 지원이 없어서 중단됐다.HTML 3.2는 3.0의 새로운 기능과 인기 브라우저였던 모자익과 넷스케이프 네비게이터가 만든 기능들이 많이 채택되었다.

1997년 W3C는 HTML 4.0을 권고안으로 발표했다. 더 많은 브라우저 전용 확장 기능들을 채택되었지만 또한 합리적이고 깨끗하게 HTML을 정리하는 시도를 했다. 이것은 폐기될 여러 요소들을 표시하는 일이었다. 여전히 이 버전에서는 존재하지만 다음 버전에서는 사라지게 될 것이라는 것을 의미했다. 이것은 문서 안에서 HTML을 더욱 더 의미있게 사용하도록 장려한 것이다.( 웹 표준 모델에서 더 자세히 설명되었다.)

1999년에 HTML 4.01이 공개되었고, 2001년에 정오표가 공개되었다. 이것은 비록 HTML 5가 현재 초안이 작성된 상태이지만 HTML의 가장 최신 버전이라고 할 수 있다.

2000년에 W3C는 또한 XHTML 1.0 명세서를 발표했다. 이것은 HTML을 유효한 XML 문서가 되도록 재 설계한 것이다.

HTML의 구조

가장 작은 유효한 HTML 문서는 이런 것이 가능하다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Example page</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

문서의 처음은 문서형 요소 또는 doctype( 올바른 문서형을 선택에서 더 자세히 설명되었다)으로 시작한다.

이것은 브라우저가 문서를 해석하는 방법을 결정할 수 있고 문서가 어떤 HTML 유형의 규칙을 따르고 있는지를 기술한다.

이후, 당신은 HTML 요소의 여는 HTML 태그를 볼 수 있다. 이 태그는 문서 전체를 감싼다. 닫는 HTML 태그는 문서의 마지막에 위치한다.

HTML 요소 안에는 HEAD 요소가 있다. HEAD 요소는 (메타데이터 같은) 문서에 대한 정보를 담는 요소들을 감싼다. HEAD 요소는 다음 장에서 더 자세히 살펴보자. HEAD 요소 안에는 TITLE 요소가 있다. TITLE 요소는 메뉴바의 제목 영역에 “Example page”라고 출력해준다.

HEAD 요소 다음에는 BODY 요소가 나타난다. BODY 요소는 페이지 안의 실제 콘텐츠를 감싸는데 이 예제처럼 “Hello world.”라는 텍스트를 포함하는 최상위 레벨의 H1 요소를 포함하고, 이는 문서 전체를 말한다.

이처럼 요소들은 종종 다른 요소들을 포함한다. 문서의 바디는 변함없이 수 많은 중첩 요소들을 포함하며 끝나게 될 것이다. 페이지 분할은 문서의 구조를 만들고, 하위 분할을 포함하게 될 것이다. 이것들은 제목, 단락, 목록들을 포함할 것이다. 단락은 다른 문서로의 링크 요소를 포함할 수 있고 인용과 강조를 포함한다. 당신은 강좌가 진행될 수록 더 많은 요소들에 대해서 알아가게 될 것이다.

HTML의 문법

당신이 이미 보았듯이, HTML에서 기초 성분은 텍스트의 블록을 감싸는 두개의 마커로 이루어져 있다. 어떤 요소들은 텍스트를 둘러 싸지 않는다. 그리고 대부분의 모든 경우에 요소들은 자식 요소들을 포함한다.(위 예제에서 HTML이 HEAD와 BODY를 포함하는 것처럼)

요소들은 또한 속성들을 가진다. 속성들은 요소의 행동을 변경할 수 있고 추가적인 의미를 가진다.

<div id="masthead">
  <h1>The Basics of
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </h1>
</div>

예제에서 DIV 요소(페이지 분할, 논리적 블럭으로 문서를 끊는 방법)는 ID 속성을 추가했다. 그리고 이 ID는 ‘masthead’의 값을 가졌다. DIV는 H1 요소를 포함한다.(H1 요소는 첫번째, 또는 최상의 수준의 제목)

DIV는 텍스트를 차례로 포함하는 H1 요소를 포함한다. 텍스트의 일부는 (요약의 전체를 기술하기 위해 사용하는)ABBR 요소로 감싸져 있다. ABBR 요소는 TITLE 속성을 가지고, “Hypertext Markup Language”라는 값을 정의한다.

몇 몇 속성들이 요소에 특정적이라고 하더라도 많은 속성들이 여러 요소들에서 공통으로 사용된다. 속성들은 항상 keyword=“value”의 형태를 가진다. 값은 홀 또는 쌍 따옴표로 둘러 쌓여질 수 있다.(어떤 상황에서는 인용부호가 생략도리 수 있지만 이것은 예측가능성, 이해성 그리고 명쾌함에서 좋은 방법은 아니다.-당신은 값 주변에 인용부호를 항상 넣어야 한다. )

속성과 가능한 값은 거의 대부분 HTML 명서세에 의해서 정의된다.—당신은 HTML을 유효하지 않게 만들지 않고는 전용 속성을 사용할 수 없다. 이것은 사용자 에이전트를 혼란시키고 웹페이지를 정확하게 해석하는데 문제가 된다.

단지 ID와 CLASS 속성만이 예외가 된다. ID와 CLASS의 값은 당신이 통제할 수 있다. 당신의 문서에서 전용 의미와 의미있는 이름을 추가할 수 있다.

요소 안에 또 다른 요소는 “자식” 요소로 불려진다. 그래서 위 예제에서 ABBR은 H1의 자식 요소이고, H1 요소는 DIV의 자식 요소가 된다. 거꾸로 말해, DIV는 H1요소의 “부모”가 된다. 이 부모/자식 관계는 CSS의 기초와 자바스크립트를 강력하게 사용하는데 있어서 중요하다.

블록 요소와 인라인 요소

HTML에는 일반적으로 콘텐츠의 유형과 구조에 부합하는 블록 레벨 요소와 인라인 요소 두가지가 있다.

블록 레벨은 높은 수준의 요소를 의미하는 것으로 일반적으로 문서의 구조 정보를 말한다. 블록 레벨 요소는 블록 레벨 요소 이전에 어떤 것이 왔던지간에 새로운 행을 시작하게 한다. 몇 몇 블록 레벨 요소들은 단락과 목록, 제목과 표를 포함한다.

인라인 요소들은 블록 레벨 요소 내에서 그 문서의 내용의 구조적 요소와 단락이나 그룹이 아닌 작은 단위를 감싼다. 인라인 요소는 문서에 나타나기 위해 새로운 행을 유발하지 않는다. 인라인 요소는 텍스트의 단락 안에서 나타날 수 있다. 몇 몇 일반적인 인라인 요소는 하이퍼텍스트 링크, 구문 강조된 단어 또는 절, 짧은 인용구를 포함한다.

문자 참조

마지막 항목은 HTML 문서에서 특수 문자들을 포함하는 방법이다. HTML 안에서 ‘<‘, ‘>’과 ‘&’는 특별하다. 이것들은 ‘-이하’와 ‘-이상’, ‘-과(와)’을 표현하기 보다 HTML 문서의 시작과 끝을 나타내는데 사용된다.

웹 저작자의 초기 실수중 하나는 문서 안에서 앰퍼샌드(&)를 사용할 때인데 때때로 예상치 못하게 나타날 수 있다. 예를 들어, “Imperial units measure weight in stones&pounds”라고 작성할 때 어떤 브라우저들은 “…stones£s”라고 나타나고 끝나버릴 수 있다.

이것은 ”&pound;”라는 리터럴 문자열 때문인데 이 리터럴 문자는 HTML 안에서 실제 참조 문자이다. 참조 문자는 문서 안에서 키보드를 사용하여 입력하기 어렵거나 불가능한 문자를 포함하는 방법이다.

앤퍼샌드(&)를 참조하고 세미 콜론(;)으로 끝낸다. 그러나 많은 사용자 에이전트는 세미 콜론을 생략하는것 같은 실수를 허용하고 있다. 그리고 ”&pound”는 참조 문자로 처리된다. 참조는 개별 숫자들(숫자 참조)과 짧은 단어(엔티티 참조)가 될 수 있다.

앰퍼샌드는 문서 안에서 ”&amp;”로 입력되어진다. 앰퍼샌드는 엔티티 참조 문자다. 또는 ”&#38”로 숫자 참조한다. 전체 참조 문자 표는 evolt.org에서 찾아볼 수 있다.

요약

이번 장에서 당신은 HTML 문서의 구조 속에서 약간의 통찰력을 갖고, HTML의 기초를 배웠다. 우리는 이제 <BODY> 콘텐츠 전에 <HEAD> 섹션을 조금 더 깊이 있게 설명할 것이다.

저자에 대해서

Mark Norman Francis는 웹이 발명되기 전부터 인터넷에서 일을 했었다. 그가 마지막으로 일했던 Yahoo!에서 세상에서 가장 큰 웹사이트를 위한 Front End Architect로, 최상의 방법을 정의하고, 국제적인 웹개발의 표준과 품질을 만들(Coding)었다.

Yahoo! 이전에 그는 Formula One Management에서 일했다, Purple Interactive와 City University에서 웹 개발에 포함되는 각종 규칙을 만들고, CGI 프로그래밍과 시스템 설계를 했다. 그는 블로그를 운영중이다.

  1.  Internet Engineering Task Force—인터넷에서의 운용성과 표준 제정을 위한 단체
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.