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 자세히 보기