2.3) HTML 시작 예제: Hello, HTML!
우리가 언어를 배울 때 문법을 먼저 공부하지 않았듯, 앞으로의 설명은 언제나 실례를 먼저 보인 다음 문법을 설명하는 식으로 진행할 것이다. 그것이 이해도 빠르고 설명할 내용도 줄어든다. 다음은 가장 단순한 형태의 HTML 문서이다.
|
HelloHTML.htm |
|
<html> <body>Hello, world!</body> </html> |
|
실행 결과 |
|
|
HTML 코드에서 부등호로 둘러싸인 단어와 부등호를 포함한 문자열을 태그(tag)라고 한다. 이 예제에서 <body>라는 문자열을 보자. <body>와 </body>가 있고 그 사이에 실제 문서의 본문인 “Hello, world!"가 들어가 있는 것을 볼 수 있다. 이때 <body>를 시작 태그(start tag), </body>을 종료 태그(end tag)라고 하며, 시작 태그와 종료 태그 안의 내용을 컨텐츠(contents)라고 한다. 시작 태그, 컨텐츠, 종료 태그를 하나로 묶어 요소(element)라고 한다. 즉 다음과 같다.
요소(element): 시작_태그(<body>) 컨텐츠(Hello, world!) 종료_태그(</body>)
HTML 문서는 요소들로 이루어진 문서다. 일단 우리는 JavaScript를 이용한 프로그래밍에 관심이 있으므로, JavaScript라는 것을 먼저 배우자. 다음은 "Hello, world!"를 경고 창으로 출력하는 코드다.
|
HelloJS.htm |
|
<html> <body> <script> alert("Hello, world!"); </script> </body> </html> |
|
실행 결과 |
|
|
방금까지는 웹브라우저에 문자열이 떴는데, 이제는 경고 창에만 뜬다. 그리고 <body> 요소 내부에 웬 <script>라는 녀석이 들어갔는데, 이 요소의 컨텐츠를 보니 우리가 자주 쓰던 프로그래밍 언어의 그것과 많이 닮아있다!
이로써 여러분은 JavaScript를 이용한 프로그래밍 세계에 첫 발을 내딛었다. C언어 책을 펴보면 나오는 수준의"Hello, world!" 예제이므로, 잘 모르지만 alert가 경고 메시지를 출력하는 함수라는 사실은 알 것이다. 지금은 그것만 알면 된다. 이 문서에서는 jscc를 개발하기 위한 JavaScript를 가르칠 것이다.
그리고 이 문서를 보면 <html> 태그가 <body> 태그를 감싸고 있음을 알 수 있다. 이와 같은 관계를 부모-자식 관계로 본다면, <html> 태그는 <body> 태그의 부모 태그가 되고, <body> 태그는 <html> 태그의 자식 태그가 된다. <body> 태그와 <script> 태그 사이에도 같은 관계가 성립한다. <html> 태그와 <script> 태그의 경우는 물론<html>을 부모 태그, <script>를 자식 태그라고 볼 수 있지만 이 경우는 서로 조상-후손의 관계로 본다. 즉 다음처럼 생각한다.
- 요소를 감싸는 요소에 대해 두 요소의 관계를 조상-후손 관계로 본다. 이때 요소를 직접 감싸는 요소가 있다면,두 요소는 부모-자식 관계로 본다. 이때 자식 태그를 직계 자손이라고 한다.
참고로 body 이외에 head라는 요소도 존재한다. 이를 이용하면 HTML 문서의 제목(파일 이름 말고)을 설정할 수 있게 된다. 다음은 HTML 문서의 제목을 "Title is here"로 정하는 예제다.
|
HelloTitle.htm |
|
<html> <head> <title>Title is here</title> </head> </html> |
|
실행 결과 |
|
|
<body> 태그가 사라지고 <head> 태그가 들어왔고, 또한 <head> 태그의 안에 <title>이라는 태그도 들어왔다.그리고 실행 결과 화면을 통해 HTML 문서의 제목이 “Title is here"로 바뀌었음을 알 수 있다. 정리하면, HTML 문서의 제목을 설정할 때는 <title> 태그를 이용한다.
그리고 여기서 규칙을 정하겠다. 앞으로 굳이 설명할 필요가 없는 요소는 미리 정의되어있는 것으로 간주한다. 예를 들어 다음의 HTML 문서가 있다고 하자.
|
main.htm |
|
<html> <head> <title>Title is here</title> </head> <body> <script> alert("Hello, world!"); </script> </body> </html> |
이 경우 <html> 태그 내에 존재하는 요소에 대해 <html> 태그를 생략하고 다음과 같이 쓴다.
|
main.htm <html> |
|
<head> <title>Title is here</title> </head> <body> <script> alert("Hello, world!"); </script> </body> |
그리고 <html>의 직계 자손인 head와 body에 대해 다음과 같이 쓴다.
|
main.htm <html.head> |
|
<title>Title is here</title> |
|
main.htm <html.body> |
|
<script> alert("Hello, world!"); </script> |
이 방법에 따라 <title> 태그와 <script> 태그에 대해서도 동일하게 표현한다.
|
main.htm <html.head.title> |
|
Title is here |
|
main.htm <html.head.script> |
|
alert("Hello, world!"); |
그리고 의미상 어떤 요소에 대해 작성된 코드인지가 명백한 경우 소속을 생략할 수 있다.
|
alert("Hello, world!"); |
끝으로, 이 문서에서 JavaScript를 이용하여 출력한 결과는 모두 텍스트이므로 다음과 같이 표현한다.
|
실행 결과 |
|
Hello, world! |
그럼 이제 본격적으로 JavaScript를 배워보자. 당분간은 모든 코드를 html.body.style에 작성한다.
