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

댓글

댓글 본문
  1. thomaslist
    https://www.donedhardy.us.com USA Ed Hardy Real
    https://www.poloralphoutlet.us.com New York Men's Ralph Lauren Polos
    https://www.atlantichogan.com Sale Cheap Hogan Interactive Shoes
    https://www.nike-factory.us.com Nike Air Max US Top For Women
    https://www.katespadesale.us.com Kate Spade USA Outlet
    https://www.edhardy.org.uk Ed Hardy Short T Shirts UK Outlet
    https://www.coachhandbagsoutlets.us.com New Arrival Coach
    https://www.air-max2018.us.com Nike Air Max White Black
    https://www.usapandorauk.com Home Pandora Jewelry Outlet
    https://www.off-whiteitaly.com Off White USA Outlet
    https://www.airjordan4.us.com Nike Air Jordan High For Sale
    https://www.katespadeoutlet-store.us.com Kate Spade New York Store
    https://www.adidas.in.net Special Adidas NMD Boost Offers
    https://www.coach-bags.org Coach outlet florida
    https://www.lovekillsslowly.us Womens Ed Hardy Hoodies Sale
    https://www.adidasmix.com New York Adidas Boost Sale
    https://www.edhardysurprise.com Wholesale ED Hardy T-Shirts
    https://www.coachsurprise.us.com Hot Sale Coach Satchels New York
    https://www.katespadenew.com Kate Spade Handbags
    https://www.ggdbitaly.com GGDB Francy Fast Worldwide Delivery
    https://www.salomonfrance.com Salomon Speedcross 3 Shoes new york on sale
    https://www.edhardysoriginals.com ED Hardy Discount
    https://www.ralphlaurenworldwide.com Ralph Lauren Shirts Discount Online
    https://www.polooutlet.uk Ralph Lauren Outlet Factory Online Store
    https://www.atlanticpolo.co.uk Ralph Lauren Polo Exclusive Deals
    https://www.airjordanmid.com US UK Nike Air Jordan Mid
    https://www.atlanticairmax.com New York Nike Air Max Black
    https://www.prloutletclothing.com Online Outlet Ralph Lauren Shorts
    https://www.poloralphlaurenpolo.uk.com Ralph Lauren Fast Delivery
    https://www.prloutlet.co.uk Polo Ralph Lauren Save up to
    https://www.atlanticpandora.com Pandora Charms Superior Quality
    https://www.edhardyoriginals.top Ed Hardy Hoodies
    https://www.palace.us.com Palace Skateboard Sweatshirts Cheap
    https://www.newcoachoutlet.com Official Coach
    https://www.atlanticairjordan.com Air Jordan 3 USA Discount
    https://www.poloralphlaurenbusiness.com Polo Ralph Lauren Black Sale
    https://www.coachcolorful.us.com Coach Combination Meals Outlet USA
    https://www.ralphlaurencolorfuls.com Ralph Lauren Sale Retailer
    https://www.authenticadidas.com Store Adidas Yeezy Boost 350
    https://www.championoutlet.us.com Champion Hoodies USA Store
    https://www.coachfactory-outlet.com wholesale price coach
    https://www.adidasrealboost.com Outlet Adidas Yeezy Boost Online
    https://www.edhardys.us Ed Hardy USA
    https://www.ralphlaurenpopular.com Ralph Lauren Down Jackets Outlet Online
    https://www.coachfactory.uk Coach Crossbody UK Online Sale
    https://www.ed-hardy.uk.com where can i buy Ed Hardy
    https://www.polooutletsfactorystore.us.com Polo Ralph Lauren USA Factory Outlet
    https://www.poloralphlauren-sale.us.com Cheapest Ralph Lauren Dresses
    https://www.superstaradidas.us.com Outlet Factory Adidas NMD Boost Online
    https://www.nikeoutletsfactory.us.com Nike M2K Tekno No Sale Tax
    https://www.adidasyeezyboost-350.us.com Slim Fit Adidas Shoes
    https://www.jordanshoesforsale.us.com Sale Nike Kyrie Worldwide
    https://www.ralphlaurenponyoutlet.com Polo Ralph Lauren USA Online
    https://www.katespadestyle.com Kate Spade Handbags
    https://www.deepedhardy.com ED Hardy London And New York
    https://www.airmax-97.us.com Nike Air Max Shoes Big Size
    https://www.airjordanshoes.in.net Home Nike Air Jordan Low UK
    https://www.pacificsneakers.com Air Jordan 1 Red With Bule
    https://www.atlanticralphlauren.com Ralph Lauren Discount
    https://www.polooutletstore.us.org Polo Ralph Lauren Authorized Site
    https://www.katespadeoriginals.com Where To Buy Kate Spade Handbags
    https://www.coach-factoryoutletstore.com coach new york
    https://www.kate-spadeoutletstore.us.com Us Kate Spade For Women
    https://www.edhardy.us.org Ed Hardy Discount Sale
    https://www.poloralphlaurensport.com Polo Ralph Lauren Newest Collection
    https://www.polooutletoutlet.us.com UK Polo Ralph Lauren
    https://www.pandorahearts.us.com Best Good Pandora Bracelets
    https://www.katespademore.com Kate Spade Handbags
    https://www.authentic-boost.com Adidas Prophere Discount
    https://www.champions.us.com USA Discount Online Sale Champion Hoodies
    https://www.katespadeoutletnewyork.us.com Kate Spade factory outlet
    https://www.specialairshoes.com Nike x Off White Online
    https://www.cheap-jordansshoes.us.com Air Jordan 1 High New Style
    https://www.laurenralphlauren.us Ralph Lauren USA Online
    https://www.poloralphlaurenbrand.com Shop Polo Ralph Lauren Best Sellers
    https://www.atlanticcoach.co.uk Coach Shoulder For Women
    https://www.airmaxsurprise.com Nike Air Max Best Selling
    https://www.offwhitetshirt.us.com OFF White T Shirt Cheap Prices
    https://www.polooutlet.us.com Polo Ralph Lauren Send Fast
    https://www.scarpehogans.it Italy Hogan Vast Selection
    https://www.multigroundboots.com Online Nike Multi Ground Boots Style
    https://www.coachoutlet-handbags.com Coach bags internship
    https://www.pandoraholiday.com USA Pandora Best Sellers UK
    https://www.adidasoriginals.in.net Adidas USA New York
    https://www.polorlpony.com Buy Cheap Polo Ralph Lauren Hoodies Online
    https://www.jordanshoes.in.net Nike Air Max Shop
    https://www.authenticgoldengoose.com Golden Goose Starter Most Fashionable Outlet
    https://www.coachoutlet.org.uk Coach Outlet Hobo UK
    https://www.salomonshoes.in.net Salomon Speedcross Save Up To
    https://www.justinairmax.com Nike Air Force 1 Gift
    https://www.coachus.us.com Wholesale online Coach Hobo
    https://www.supremeny.us.com Supreme T Shirts USA Factory Outlet
    https://www.ralphlaurenclassic.org.uk Buy Polo Ralph Lauren
    https://www.nikeshoesoutlet.us.org Nike Kyrie Shoes US Save Off
    https://www.supremeclothingonline.us.com Supreme Home Outlet
    https://www.adidas-nmds.us.com Adidas Shoes Green Blue
graphittie 자세히 보기