JavaScript 튜토리얼

HTML 시작 예제: Hello, HTML!

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에 작성한다.

댓글

댓글 본문
작성자
비밀번호
graphittie 자세히 보기