Microsoft Word - Web_page 5_20.doc

Size: px

Start display at page:

Download "Microsoft Word - Web_page 5_20.doc"

일민 류(유)
3 years ago
Views:

2 차례 차 례 머리말...3 제 1 장.HTML 언어...4 제 1 절.HTML 의기초... 4 제 2 절.본문형식화... 6 제 3 절.창문분할과표생성...17 제 2 장.STYLESHEET 언어...26 제 1 절.CSS 의기초 제 2 절.서체와배경조정 제 3 절.위치,단락,유표조정...35 제 4 절.범위,경계선조정 제 5 절.려파기 제 3 장.JavaScript 언어...48 제 1 절.JavaScript 의기초 제 2 절.JavaScript 의주요객체 제 3 절.JavaScript 자료형과연산자...76 제 4 절.JavaScript 명령문들 제 5 절.응용실례( 달력만들기 ) 제 4 장.ASP 언어...91 제 1 절.ASP 언어의기초 제 2 절.ASP 언어의문법 제 3 절.ASP 의내장객체들 제 4 절.ASP 의응용 제 5 장.JSP 언어 제 1 절.JSP 언어의기초 제 2 절.JSP 의문법 제 3 절.JSP 의내장객체들 제 4 절.JSP 의응용

3 동적웨브페지작성법 제 6 장.PHP 언어 제 1 절.PHP 언어의기초 제 2 절.변수와상수 제 3 절.표현식과연산자 제 4 절.조종구조 제 5 절.함수와클라스 제 6 절.PHP 의응용 찾아보기

4 머리말 머 리 말 위대한 령도자 김정일동지께서는 다음과 같이 지적하시였다. 정보산업에 대한 인식을 바로 가지고 정보산업시대의 요구에 맞게 일하여야 합니다. ( 김정일선집 제 15 권,195 페지 ) 그 어느때보다도 급속히 발전하고있는 오늘의 과학과 기술은 콤퓨터와 콤퓨터망을 떠나서는 생각할수 없다. 콤퓨터망을 효과적으로 리용하면 과학기술을 발전시켜 정치, 경제, 문화 등 사회생활의 모든 분야에서 제기되는 문제들을 신속히 편리하게 높은 수준에서해결해나갈수있다. 콤퓨터망 사용자들은 HTML언어를 비롯한 각이한 환경들에서 리용할수 있는 동적웨브페지작성언어 등 웨브페지작성에 기초로 되는 지식을 잘 알고있어야 망가입자로서의주동적이며능동적인활동을실리적으로할수있다. 이 책은 웨브페지를 만드는데 필요한 HTML의 꼬리표들에 대하여서와 동적웨브페지작성언어들인 ASP와 JSP, PHP에 대하여 대비적으로 학습할수 있도록 내용을구성하였다. 현 시대의 핵심기초기술의 하나인 정보기술을 급속히 발전시키며 가까운 앞날에 전국적인 광역망을 구축하여 인민경제의 현대화, 정보화를 힘있게 다그치는데 필요한 정보기술전문가들을키우는사업에이책이도움이되리라고본다. 우리는 강성대국건설에서 과학기술을 중시할데 대한 당의 의도에 맞게 나라의 정보기술발전을위하여꾸준히노력하여야할것이다. 3

5 동적웨브페지작성법 제 1 장.HTML 언어 제1절.HTML의기초 HTML 의개념 HTML은HyperTextMarkupLanguage 의략자로서웨브열람기에서실행되는하이퍼본문기능을가진문서를만드는언어이다.여기서하이퍼본문기능이라는것은웨브문서의임의의위치에서해당부분 ( 알려고하는정보혹은내용물,웨브거점주소등) 을선택했을때다른곳 ( 웨브문서,웨브거점) 으로이동할수있도록련결해주는기능을말한다. HTML에서는련결시키려는하이퍼본문이기본구조로된다.HTML문서는파일확장자가*.html또는*.htm이다. 일반문서를작성할때Micrsoftword를사용하듯이HTML을작성할때에도일정한도구들이필요하다.즉HTML을입력하기위한일종의편집기가있어야한다. 아주초보적인편집기는Notepad인데HTML문법을모두알고작성해야한다는어려움이있지만Notepad를학습하는것은기초를튼튼히하고언제어디서나HTML문서를만들수있게한다는점에서아주유리하다.한편HTML문법을모르고도좀더간편하게 HTML을 만들수 있게 하는 Front Page, Hot Dog, Namo web editor, Dreamweaver등많은HTML전용편집기들이있다 꼬리표의개념 꼬리표란 HTML을 작성하기 위한 하나의 재료로서 여러개의 꼬리표가 모여서 하나의완성된HTML을이루게된다. 꼬리표의형식은다음과같다. < 꼬리표이름선택항목 1= 선택항목 1 값 선택항목 2= 선택항목 2 값 > 꼬리표이름 꼬리표의종류는무수히많다.어떤꼬리표는글자를전문적으로담당하고어떤 꼬리표는 그림을 담당하고 어떤 꼬리표는 움직임을 담당하는 등 여러가지 역할을 수행하는 꼬리표들이 많다. 이러한 매 꼬리표들에는 이름이 붙는다. 례를 들어 서체꼬리표를써넣으려고한다면꼬리표이름으로font를써주면된다 선택항목 = 선택항목값 ( 생략가능 ) 4

6 제 1 장. HTML 언어 매개꼬리표에는선택항목이있다.례를들어글자를담당하는서체꼬리표라면 글자를 얼마만큼 크거나 작게 하겠는가, 색갈은 어떤것으로 하겠는가, 서체는 어떤것으로할것인가등의선택항목이있다. 매꼬리표에따르는선택항목들은서로다르다.만일font꼬리표를사용하려고 한다면 font꼬리표에는 color라는 선택항목이 있다. 실례로 color의 값을 red로 주는꼬리표문장형식은<fontcolor=red> 와같다. 꼬리표의완료 무엇을 하든지 끝마무리가 중요한것만큼 모든 꼬리표들은 시작꼬리표와 함께 끝꼬리표를 가지고있다. 끝꼬리표는 시작꼬리표의 이름앞에 사선기호 (/) 를 붙인다. 즉 형식은</ 꼬리표이름 > 이다. 대소문자구별 대소문자는구별하지않아도된다 HTML 의 기본형식 HTML의기본형식은다음과같다. <html> <head> <title> 제목 </title> </head> <body> 내용 </body> </html> 구체적으로설명하면아래와같다. <html>,</html> <html> 은 지금부터 HTML문서를 시작하겠다. 라는 뜻이다. 이것은 가장 기본적인꼬리표이므로문서에제일먼저입력해주어야한다.</html> 은HTML문서의 끝을의미하므로제일마지막에입력해주어야한다. <head>,</head> <head> 는말그대로문서의머리말을입력하는 부분이다.따라서문서의대략적인 특성이나정보를<head> 와</head> 사이에입력한다. <title>,</title> <title> 은 문서의 제목을 표시하는 꼬리표이다. 문서를 요약시킬만한 제목을 넣는 5

7 동적웨브페지작성법 꼬리표이므로 제목꼬리표는 <head> 꼬리표안에 넣는다. 문서의 제목은 <title> 과 </title> 사이에넣어준다. <body>,</body> HTML에서 <body> 는 그 문서의 기본내용이 서술되는 부분이다. 즉 <body> 란 지금부터 본격적인 내용을 시작하겠다. 라는 뜻이다. 그 내용은 <body> 와 </body> 안에입력하면된다. <body> 의 내용을 어떻게 작성하는가에 따라 화면이 달라진다. 따라서 모든 꼬리표들은<body></body> 안에잘조합하여넣어야한다. 제2절.본문형식화 서체꼬리표 (font) 화면에출력하는글자의크기를변화시킬때사용하는꼬리표는<hn> 이다. 형식은다음과같다. <hn>hn의실례입니다 </hn> 실례 : h1의실례입니다 h2의실례입니다 h3의실례입니다 여기서n은1부터6까지인데n값이클수록현시되는글자가작아진다. 다음으로많이쓰이는것이font인데그형식은다음과같다. <fontsize= 글자의크기color= 색값face= 서체이름 > 내용 </font> 마지막에</font> 로완료하지않으면계속그글형식이적용된다. 실례 : <fontsize=7color=redface="wklchongbong"> 내용 </font> 색값은우의실례와같이영문으로써도되고"#ffffff" 와같이써도된다. 또는 여기에 marquee를 섞어 쓰기도 하는데 그렇게 하면 움직이는 효과를 6

8 제 1 장. HTML 언어 나타낸다. 실례 : <marquee><font size=5 color=blue face="wklchongbong"> 내용 </font> </marquee> 본문서식꼬리표 - <p> 형식은다음과같다. <p>내용</p> 본문에서단락을구분할때사용하는꼬리표로서자동적으로행바꾸기를한다음한 행을 비여 놓고 다음 행에서 시작한다. 여기에 align이라는 선택항목을 줄수 있는데 이것은정렬방식을나타낸다. 실례 : <palign="center"> 조선을위하여배우자!</p> 이것을실행하면한행을비우면서본문내용을중심맞추기하여현시한다. align선택항목은<p> 꼬리표만아니라div,marquee,hr,h1,td,image를비롯한 많은꼬리표들에도쓰인다. - <div> 형식은다음과같다. <divalign=" 속성값 "> 내용 </div> 이꼬리표는align속성값에따라문장의표시위치를설정한다. 속성값 에는 left, center, right을 입력할수 있다. 그러면 문장내용이 왼쪽, 중심,오른쪽맞추기된다. - <br> 형식은다음과같다. 내용 <br> 문서에서 줄바꾸기를 진행할 때 사용한다. Enter 건의 역할과 같다고 리해하면 된다. 꼬리표가적용되지않는문서에는br를쓸필요없이Enter 건으로처리해도된다. 7

9 동적웨브페지작성법 - <center> 형식은다음과같다. <center> 내용 </center> 글을문서의중심에배치할때쓰인다.이것은<palign=center> 현시내용 </p> 와 같은효과를낸다. - <hr> 형식은다음과같다. <hr> 이꼬리표는여러가지모양의가로선을그릴때사용한다.<hr> 에는다음과같은 선택항목들이있다. size:가로선의두께를지정 width:가로선의크기를지정 color:색을지정 align:가로선의위치를지정 실례 : <hrcolor=redsize=50> 이렇게주면길이가50인빨간색의가로선이생긴다. - <big> 형식은다음과같다. <big> 현시내용 </big> 서체를기본글형식보다한단계크게나타낼때사용한다. <big> 꼬리표와 반대되는 기능을 수행하는 꼬리표가 있는데 그것이 바로 <small> 꼬리표이다 글자서식꼬리표 - <b> 형식은다음과같다. <b> 현시내용 </b> 글자를진하게표시한다. 8

10 제 1 장. HTML 언어 - <i> 형식은다음과같다. 글자를경사체로만든다. - <u> 형식은다음과같다. 글자에밑줄을그어준다. - <blink> 형식은다음과같다. 글자를깜빡이게한다. <i> 현시내용 </i> <u> 내용 </u> <blink> 내용 </blink> - <strong> 형식은다음과같다. <strong>내용</strong> 글자를진하게표시한다. - <strike> 형식은다음과같다. <strike>내용</strike> 글자중간에줄을긋기한다. - <sub> 형식은다음과같다. <sub>내용</sub> 글을아래첨자로표시하려고할때리용한다. - <sup> 형식은다음과같다. 9

11 동적웨브페지작성법 <sup>내용</sup> 글을웃첨자로보여준다 입력담당꼬리표 (input) 입력꼬리표는단추나본문칸을만드는꼬리표이다. 형식은다음과같다. <inputtype=" 형식 "value=" 현시내용 "> 형식에는submit,button,radio,checkbox,text등이속한다. 실례를들어보면 <inputtype=submitvalue=" 현시내용 "> <inputtype=buttonvalue=" 현시내용 "> button과submit는완전히같지않은데button은단순히모양만을만드는것이고 submit는거기에질문전송의기능을더가지고있다.따라서<form> 꼬리표와함께쓸 때에는submit를쓴다. radio는단일선택단추를만들어주는형식이다. checkbox는다중선택단추를만들어주는형식이다. text는본문칸을만드는형식이다. text형식에는size선택항목을추가할수있다. 실례 : <inputtype=textsize=10value=" 현시내용 ">: maxlength라고 최대입력가능선택항목이 있는데 빈칸에 최대로 입력이 가능한 문자의 개수를 지정한다. 만일 maxlength=4로 하는 경우에 네글자를 초과하면 자료입력이되지않는다. input로 단추나 본문칸을 만들었다고 해도 찰칵하거나 문자를 입력하면 어떤 변화가생기는것은아니다.input는단순히그런모양만만들어주는역할을한다. input와자주리용되는것중의하나가<form> 인데주로CGI나어떤특정한주소로 어떤내용을보내게하는역할을한다 운동담당꼬리표 (marquee) marquee 는글자나여러객체를움직이게하는효과를내는데marquee 를잘리용하면 글자가여러가지형태로움직이도록할수있다. 물론3차원적인운동이나기타복잡한불규칙운동은DHTML언어에대하여알아야 10

12 제 1 장. HTML 언어 실현할수있지만marquee로도어느정도표현은할수있다. 형식은다음과같다. <marquee>현시내용</marquee> </marquee> 는 해당한 꼬리표를 끝내라. 는 뜻이다. 이 끝꼬리표를 리용하면 <marquee> 와</marquee> 사이에있는현시내용만이움직인다. 이 꼬리표의 선택항목들에는 배경색 (bgcolor), 운동방향 (direction), 왕복운동 (behavior), 이동시간 (scrolldelay), 이동량 (scrollamount), 이동너비 (width), 이동높이 (height),반복회수(loop) 들이있다. 실례 : <marquee>현시내용</marquee>// 우측에서좌로이동 <marqueebgcolor=red> 글자입력 </marquee>// 배경색은붉은색 <marquee direction="down"> 글자입력 </marquee>// 운동방향은 아래로 ( 인용부호는 생략할수도 있다.) 만약 up으로 하면 우로 올라가며 right로 하면 좌측에서 우측으로 이동한다. <marqueebehavior=alternate> 현시내용 </marquee>// 왕복운동 <marquee scrolldelay=200> 현시내용 </marquee>// 이동시간이 200인데 수자가 클수록지체시간이길어진다.즉움직이는속도가떠진다. <marquee scrollamount=1> 현시내용 <marquee>// 움직이는 이동량이 1인데 수자가작을수록세밀하게움직인다. <marqueewidth=60> 현시내용 </marquee>// 움직이는너비가60이다. <marquee direction=up height=40> 현시내용 </marquee>// 움직이는 높이가 40이다. <marqueeloop=50> 현시내용 </marquee>// 반복회수가50이다. 띠의속도와글자의속도를다르게하려는경우에는2중marquee 를리용해야한다. 실례 : <marquee><marqueebgcolor=pink> 현시내용 </marquee></marquee> bgcolor는움직이는글자에대한배경색을의미하는데<marquee> 꼬리표를하나만 주었을 때 배경부분은 정지되고 글자만 움직인다. 여기에 <marquee> 를 더 추가하면 bgcolor가적용된배경부분도움직이게되고원래움직이던글자도marquee의효과를 더받아더빨리움직이게된다.물론글자는배경부분안에서움직이고있었으므로그 령역을벗어나지않고그안에서더욱빨리움직이게된다. <marquee> 꼬리표를리용하여글자가깜빡이는효과를줄수있는데그것은좌우공 11

13 동적웨브페지작성법 간을정해주는선택항목인width와이동량을정해주는선택항목인scrollamount를리용하여실현할수있다.주어진공간안에서이동량이다르면표현되는운동도차이가난다.따라서같은scrollamount값을주더라도width가작을수록더욱깜빡거리는효과가난다. 실례 : <marqueewidth=100scrollamount=80> 깜빡깜빡 </marquee> <marqueewidth=350scrollamount=80> 깜빡깜빡 </marquee> 만일width의값은같고scrollamount를다르게준다면 즉 <marqueewidth=350scrollamount=300> 이것은300</marquee> <marqueewidth=350scrollamount=2> 이것은2</marquee> 이라면scrollamount의값에따라그움직임도차이가나게된다.이값을너무크게 주면보이지않으며작게주면깜빡이는게아니라부드럽게움직이게된다. 실례 : <marqueewidth=200scrollamount=70> </marquee> <marqueewidth=150scrollamount=47><font color=hotpink> </font></marquee> <marqueewidth=200scrollamount=48><font color=green> </font></marquee> <br> <marqueewidth=100scrollamount=45><font color=blue> </font></marquee> <marqueewidth=130scrollamount=57><font color=hotblue> </font></marquee> <marqueewidth=180scrollamount=60><font color=red> </font></marquee> <marqueewidth=200scrollamount=68><font color=purple> </font></marquee> <br> <marqueewidth=143scrollamount=47><font color=pink> </font></marquee> <marqueewidth=150scrollamount=52><font color=violet> </font></marquee> <marqueewidth=170scrollamount=58><font 12

14 제 1 장. HTML 언어 color=orange> </font></marquee> <marqueewidth=130scrollamount=57><font color=hotblue> </font></marquee> <marqueewidth=180scrollamount=60><font color=red> </font></marquee> <marqueewidth=200scrollamount=68><font color=purple> </font></marquee> <marqueewidth=200scrollamount=70><fontcolor=blue> </font></marquee> <marqueewidth=150scrollamount=47><font color=hotpink> </font></marquee> <marqueewidth=200scrollamount=48><font color=green> </font></marquee> marquee 는 단지 InternetExplorer 에서만지원되고Netscape 에서는되지않는다 그림담당꼬리표 (img) 이꼬리표는그림을보여주는역할을하는꼬리표로서그림의주소만알고있으면 쉽게실현할수있다. 형식은다음과같다. <imgsrc= 그림주소 > 례를들어그림파일 kitty.gif 의경로가 D:\image\gif 이라면 <imgsrc= D:\image\gif\kitty.gif> 와같은형식으로입력한다. 여기에 marquee라든가 여러 다른 꼬리표를 삽입해서 여러가지 기능을 실현할수 있다. 실례 : <marqueedirection=upscrollamount=3behavior=alternateheight=130> <marqueescrollamount=2direction=right><imgsrc=kitty.gif> </marquee></marquee> 그림의 크기도 조절할수 있는데 그것은 width와 height를 가지고 조절하면 된다. 가로세로의 비률을 같은 비률로 하고 크기만 조절하려면 width를 조절하고 모양자체를 바꾸게하려면두값을다변경해야한다. 실례 : <imgwidth= 20 height= 20 src= D:\image\gif\kitty.gif> 13

15 동적웨브페지작성법 다음으로그림과글자를함께현시할때글자의위치를정하는방법을고찰한다. 이것은Align선택항목을리용하여실현할수있다. 실례 : <imgalign=leftsrc=kitty.gif> 현시내용 우와 같은 코드를 실행하면 그림은 왼쪽, 글자는 오른쪽우로부터 정렬된다. 만일 글자를오른쪽아래로정렬하고싶으면<br> 꼬리표를리용한다. 실례 : <imgalign=leftsrc=kitty.gif><br><br><br><br> 현시내용 <br> 를 추가하는것은 align=middle 을 주는것보다 좀 더 세밀하게 위치를 지정해줄수있다. 마찬가지로 align=right 하면그림은오른쪽,글자는왼쪽에배치된다. 정렬방식에는left,right,top,middle,bottom,baseline,texttop,absmiddle, absbottom등이있다 음악담당꼬리표 (bgsound) 음악연주기능을수행하는꼬리표이다. 형식은다음과같다. <bgsoundsrc=" 음악주소 "> 실례 : <bgsoundsrc= <bgsound> 꼬리표도선택항목을가지고있다. 음악을한번연주하려면loop명령어를다음과같이주면된다. 실례 : <bgsoundsrc= <embed> 를 사용하여 중지시킬수도 있고 autoplay를 리용하여 자동적으로 연주되도록할수도있다.즉 <embed src= 주소 width= 너비수자 height= 높이수자hidden=true/false autoplay=true/falseloop= 반복회수 > 이다 련결꼬리표 어떤 본문이나 그림을 찰칵하면 그에 해당한 다른 자료들을 련달아 찾을수 있게 하는꼬리표이다.이것에는두가지가있다. 하나는<a> 라는꼬리표를리용한방법이고다른하나는<form>+<input> 를리용한 14

16 제 1 장. HTML 언어 방법이다. <a> 꼬리표의기본형식은다음과같다. <ahref=" 이동하려고하는주소 "target=" 프레임이름 "> 현시내용 </a> frame이름 에는목적프레임의이름이나또는"_top","_blank","_self"등을 줄수있다. "_top":해당하는전체화면이나표를100% 크기로보여준다. "_blank":새창을열고련결시켜준다. "_self":해당하는창( 왼쪽에있었다면왼쪽으로,오른쪽에있었다면오른쪽으로, 전체화면이였다면전체화면으로 ) 으로직접련결시켜준다. <a> 꼬리표를 리용하여 음악도 봉사받을수 있다. 음악이 있는 주소를 넣고 찰칵하게 되면음악을듣을수있다. 그다음으로많이쓰이는것이<form>+<input>이다. 형식은다음과같다. <formaction=" 주소 "><inputtype=" 형식 "></form> 선택항목으로서는<a> 와마찬가지로target가있다. 그이외에도method라는전송형선택항목이있다.여기에는post,get등이있다 복합칸꼬리표 (select) <select> 꼬리표는복합칸을만드는꼬리표이다. 기본형식은다음과같다. <select><option> 현시내용 </select> 만약선택하려고하는항목이많으면<option> 을계속추가해주면된다. 즉 <select> <option> 현시내용 <option> 현시내용 <option> 현시내용 </select> <select> 꼬리표에의하여만드는복합칸의너비는한행의글자수에따라자동적으로 달라진다. 반면에 <select> 와 비슷한 기능을 수행하는 <input> 의 text형이나 <textarea><iframe> 등의꼬리표는따로너비를조절하는선택항목이있다. 15

17 동적웨브페지작성법 <select> 꼬리표는 너비를 조절하는 선택항목은 따로 없지만 복합칸의 높이를 조절하는선택항목 (size) 이있으며이외에도name,value,multiple등의선택항목이 있다. name선택항목은 꼬리표의 이름을 나타내는 역할을 한다. multiple선택항목을 주면다중선택이가능하다 textarea textarea는문자그대로본문칸을만드는꼬리표이다. 형식은다음과같다. <textarea> 현시내용 </textarea> textarea와비슷한형식을가지는것이iframe꼬리표이다. textarea는모든꼬리표가무효화되는반면에iframe은창안의꼬리표가적용된다. textarea에서는 너비를 조절하는 선택항목은 width가 아니라 cols이다. 즉 cols=" 수자 " 라고입력하면된다.여기서수자의단위는1byte이다. 실례 : <textareacols="40"> 현시내용 </textarea> 높이를지정하는선택항목은rows이다. 실례 : <textarearows="7"> 현시내용 </textarea> textarea에쓰이는기본선택항목은rows,cols,name들이다 iframe 형식은다음과같다. <iframesrc=" 주소 "></iframe> 이꼬리표는textarea와외관상매우비슷하지만그특성은서로다르다.iframe 은다른창을펼치지않고그창안에 주소 에서지적한파일의내용을현시한다. 크기선택항목이있는데textarea처럼rows,cols가아니라height,width이다.rows,cols가절대단위인반면에width,height는절대크기,상대크기가모두가능하다. 만약width,height선택항목을주지않는다면width=300,height=150이기정값으로지정된다.상대적크기도가능하다. 또한width=50%,height=40% 와같이퍼센트로표현할수도있다. 일반적으로 상대값를 주면 해당하는 전체 화면이나 해당하는 표안에서의 퍼센트를 나타내는것이다. 16

18 제 1 장. HTML 언어 width,height의퍼센트선택항목은iframe뿐만아니라이선택항목이쓰이는대부분의 꼬리표에서 사용가능하다. 즉 <image>, <table>, <tr>, <td>, <style>, <p>, <span>,<div>등에서사용할수있다. 만일현시하려는다른창의크기가iframe보다크면흘림띠가생기게된다.흘림띠의유무도선택항목으로서직접지정해줄수있다.즉 "scrolling=no/yes/auto" 와같은형식으로지정해준다.이선택항목을 주지않는다면기정값인auto로설정된다. iframe에서 경계선이 보이는데 이것은 없앨수도 있다. 그것은 frameborder라는 선택항목을 리용하여 실현하는데 선택항목값은 yes이거나 no이다. 이 선택항목을 생략하면기정값인yes로설정된다. 제3절.창문분할과표생성 창문분할꼬리표 (frame) <frame> 꼬리표는 창문을 나누는 꼬리표이다. 홈페지를 만들 때 한개의 창문에 여러개의 페지를 동시에 표시하려는 경우가 많다. 이것을 해결할 목적에서 나온것이 <frame> 꼬리표이다. 실례 : <html> <head> <title> 창문분할페지 </title> </head> <framesetcols 또는rows=" 수자또는%,수자또는%또는*"> <framesrc=" 첫번째프레임에놓일파일의주소 "> <framesrc=" 두번째프레임에놓일파일의주소 "> </frameset> </html> frameset 가들어간페지는다른페지와달리<body> 꼬리표를생략한다. <frameset> 꼬리표는말그대로프레임의형태를설정해주는역할을하는꼬리표이다. 창문을 세로로 나누려면 cols선택항목을, 가로로 나누려면 rows선택항목을 리용한다.(textarea와선택항목이같다.차이점은frameset의cols,rows단위가px이라는것이다.)그리고 수자,* 의뜻은왼쪽창을주어진수자의크기만큼설정하고나머지는오 17

19 동적웨브페지작성법 른쪽부분으로한다는의미이다. 실례 : <html> <head> <title> 창문분할페지 </title> </head> <framesetrows="120,*"> <framesrc="frame1.html"scrolling=nonoresize> <framesrc="frame2.html"scrolling=autonoresize> </frameset> </html> 프레임의개수는보통2~3개정도로할수있다. 창을하나더만들때에는<frame> 꼬리표를하나더만들어서추가하면된다. 실례 : <html> <head> <title> 창문분할페지 </title> </head> <framesetrows="120,170,*"> <framesrc="frame1.html"scrolling=nonoresize> <framesrc="frame2.html"scrolling=autonoresize> <framesrc="frame3.html"scrolling=autonoresize> </frameset> </html> cols,rows선택항목에 textarea와는 달리 상대적비률값을 줄수 있다. 그러나 <frame> 꼬리표에서상대비률값은잘쓰지않는다.그것은해상도에따라다르게보일수 있기때문이다.그래서대부분경우절대값크기(px) 로준다. 프레임들사이의 경계선의 존재여부를 결정하는 frameborder와 경계선두께를 설정해주는framespacing 선택항목이있다.그러므로경계선을없애려면"frameborder=no", "framespacing=0" 으로해주면된다. 실례 : <html> <head> <title> 창문분할페지 </title> 18

20 제 1 장. HTML 언어 </head> <framesetcols="180,*"frameborder=noframespacing=0> <framesrc="frame1.html"scrolling=nonoresize> <framesrc="frame2.html"scrolling=autonoresize> </frameset> </html> <frame> 에서반드시필요한것은<framesrc= 주소 >부분이다.여기서주요선택항목인name은frame을만들때name을주지않고련결시키면련결시켜주는바로그창에서이동하게된다.( 일반적으로name을생략하면"target=_self" 로인식한다.) target=" 해당하는문서의이름 " 을주면해당되는문서가있었던위치에련결시키는것이다.비록련결시키는문서는왼쪽이지만target을해당하는문서의이름으로취해주면거기로이동한다. 실례 : <html> <head> <title> 프레임을나누는페지 </title> </head> <framesetcols="180,*"> <framename="a"src="frame1.html"scrolling=nonoresize> <framename="b"src="frame2.html"scrolling=autonoresize> </frameset> </html> 이렇게"frame1" 에는"A" 라는이름을주고"frame2" 에는"B" 라는이름을주었다고가정하면련결페지에서는즉"frame1" 페지에서는target을이동시키려고하는문서이름으로주면된다. "frame1" 은왼쪽에있고"frame2" 는오른쪽에있으므로"frame1" 의target설정을 "B" 로하면오른쪽에서이동하게된다. noresize 는frame 의크기조절의유무를지정해주는선택항목이다.이선택항목을지정해주지않으면사용자들이frame 의크기를마음대로바꿀수있다. scrolling선택항목은<iframe> 꼬리표에서도언급했지만흘림띠의유무를지정해주는선택항목이다."scrolling=yes/no/auto" 중에서선택을하면된다.기정값은auto 로되여있다. 여백을주기위해서는"marginwidth= 수자 ","marginheight= 수자 "형식으로지정해주면된다.첫번째형식은가로여백을정하는것이고두번째형식은세로여백을지정하는 19

21 동적웨브페지작성법 것이다. 지정하지 않으면 알아서 적당히 여백을 정해준다. <table> 꼬리표의 cellpadding선택항목과비슷하다. 실례 : <html> <head> <title> 프레임을나누는페지 </title> </head> <framesetcols="180,*"> <framesrc="frame1.html"scrolling=nonoresize> <framesetrows="50%,50%"> <framesrc="frame2.html"> <framesrc="frame3.html"> </frameset> </frameset> </html> 령역꼬리표 (area) 홈페지사용에서보게되면하나의그림에여러개의련결이되여있는것을볼때가 있다. 일반적으로 그림의 련결은 그림의 어느 곳을 찰칵하든 하나의 파일만이 현시되도록 되여있다. 그러나 <area> 꼬리표를 리용하면 그림의 어떤 부분을 찰칵하는가에 따라 서로다른파일이현시되도록할수있다. area련결은두개의꼬리표를써서나타낸다.즉형식은다음과같다. <imagesrc= 그림주소usemap="# 지도의이름 "> <mapname=" 지도의이름 "> 내용 <areashape= 모양값coords= 자리표href= 련결시킬주소 > </map> 그림꼬리표에대해서는우에서취급하였는데그꼬리표에usemap라는선택항목이 추가되여있다. usemap 라는선택항목은area련결을알리는명령으로서 지금부터 이그림을지도 (map) 로삼겠다. 라는뜻이다. <map> 는 그림을 련결령역으로 지정하기 위한 시작꼬리표이다. 이 꼬리표에는 name선택항목이있다.name선택항목값은우의image꼬리표에서지정해주었던이름을 넣어주어야한다. 20

22 제 1 장. HTML 언어 <area> 는그림의어떤위치에련결하겠는가하는area련결과관련한구체적인설정을해주는부분이다.이것은<map> 와</map> 사이에들어간다.이꼬리표의선택항목에는shape와coords외에<a> 꼬리표와똑같은선택항목인href와target이있다. 사용자는 자기가 찾아보려는 부분에서 마우스지시자가 손가락모양으로 변할 때 찰칵하여요구하는자료내용을볼수있다. 실례 : <imagesrc=starcraft.gifusemap="#sample"border=0> <mapname="sample"> <area shape=rect coords="56,83,112,129" href="mis.html" target="_blank"> <area shape=rect coords="17,93,52,126" href="tank.html" target="_blank"> <area shape=rect coords="154,70,184,97" href="scv.html" target="_blank"> </map> 1 shape선택항목 한그림에서련결시켜주려는모양을정해주는선택항목이다.이선택항목에는rect, circle,poly가있다. rect는경계선이직사각형으로나오고circle은원형,poly는사용자가요구하는 임의의다각형으로나온다. 2 coords선택항목 coords선택항목은련결령역을정해주는역할을한다.즉 어디서부터어디까지마우스를찰칵하면어느파일로넘어간다 라는기능을가지는명령이다.그범위는자리표값으로나타내는데단위는px이다. 자리표점의기본형식은(x축값,y축값) 이다.해당그림의왼쪽우의꼭두점이기준점자리표(0,0) 으로설정되여있다. 직사각형일때에는우선련결시킬부분의왼쪽우에꼭두점을적어준다음오른쪽아래의꼭두점을찍어주면된다.만약왼쪽우의자리표가(150,30) 이고오른쪽아래의자리표가(200,50) 이라면cords="150,30,200,50" 으로주면된다. 원형일때에는원의중심자리표를먼저적어주고반경값을넣어주면된다.만약중심점이(100,40) 이고반경이30이면coords="100,40,30" 으로주면된다. 다각형일때에는시계방향으로원하는자리표값을넣어주면 된다.자리표점이5개라면 5각형이 되고 8개라면 8각형이 된다. 만약 시계방향으로 (100,5), (120,10), (130,15),(125,20),(110,10) 를주었다면cords="100,5,120,10,130,15,125,20, 21

23 동적웨브페지작성법 110,10" 으로주면된다 검색기능꼬리표 (meta) 사용자가 입력한 검색어를 검색엔진이 찾을 때 제일 먼저 참고하는것이 바로 이 부분이다.즉검색어를제공하는기능을가지는꼬리표이다. 기본형식은다음과같다. <metaname= 이름값content= 내용 > <meta> 꼬리표는<head> 와</head> 사이에들어가며열람기에표현되지는않는다. 실례 : <html> <head> <title>html홈페지 </title> <metaname="subject"content="tag&java"> <meta name="description" content="html의 모든것, HTML의 집대성!"> <metaname="keywords"content="html강의,html강좌, 강좌,강의, 홈페지만들기,HTML,JavaScript,CSS,JAVAApplet,DHTML"> </head> <body> </body> </html> <metaname="subject"content="tag&java"> 해당하는페지에관한제목을설정하는부분인데어떠한주제를다루는가를입력해놓은부분이다.검색로보트로찾기가훨씬쉽다.여기서는tag&java라고넣었다. name의속성에는keywords,subject,description등이있다.그외에도title, author,date등이더있지만우에있는것들만알아도충분하다. 우에name값은subject이므로content에는거기에맞는내용을써줘야한다. <metaname="description"content="html의모든것,html의집대성!"> 이것은검색엔진이해당하는페지를찾은다음간단한요약을표시해줄때나타나는내용이다.따라서자신의홈페지에대해가장알맞고효과적인설명을간명하게만들어주어야한다. <metaname="keywords"content="html강의,html강좌,강좌,강의, 홈페지만들기,HTML,JavaScript,CSS,JAVA애플레트,DHTML"> 22

24 제 1 장. HTML 언어 이것은자신의홈페지를찾을때해당하는검색어를지정해주는내용이다.name의 keyword선택항목이바로그러한검색어를지정해주는기능을한다.content란에는해당하는검색어를넣어야한다. <metahttp-equiv= 값content= 내용 > http-equiv 선택항목의값에는주로'Content-Type' 과'Refresh' 가쓰인다. http-equiv="content-type" 이라는값을넣으면이것은서체수정기능을수행한다. 실 례 : <meta http-equive="content-type" content="text/html;charset=big5"> 페지에이러한명령을넣으면본문서체를자동적으로big5라는서체로수정해주는 기능을한다. refresh란말그대로새롭게하는기능을하는것이다 그렇다면 http-equiv="refresh" 라고 넣었을 때에는 구체적인 내용을 content란에 써주어야한다. 실례 : <metahttp-equive="refresh"content=" 수자 ;url= 새로운 주소 "> content의수자는새로운페지를적재할때걸리는시간으로서sec( 초 ) 단위를 가진다.그리고url은새로이동하게될주소를넣는곳이다. meta의refresh값은javascript의settimeout() 함수와동일한기능을가진다. refresh값을페지마다주면자동현시기능을가지게된다.즉일정한시간이지나면 자동적으로계속다른주소의페지를보여준다 표생성꼬리표 (table) 이꼬리표는여러개의행과렬로된표를작성한다. 형식은다음과같다. <tableborder=2></table> <table> 이란말그대로표의시작을알리는꼬리표이다.따라서표가끝나는위치에서반드시</table> 을해주어야한다. 이꼬리표에는다음과같은선택항목들이있다. border 표경계선의굵기를지정한다. width 23

25 동적웨브페지작성법 너비를지정한다.절대크기,상대크기를다나타낼수있다. height 높이를지정한다.절대크기,상대크기를다나타낼수있다. cellspace 세포의테두리와본문사이의간격을지정한다. cellpadding 세포들사이의간격을지정한다. bgcolor 세포의배경색을지정한다. background 표의배경그림의위치를지정한다. bordercolor 표의경계선의색을지정한다. <tr> 꼬리표는TableRow의줄임말로서말그대로표의한행을정의하는꼬리표이다.그러므로2개행으로된표를작성하자면<tr> 꼬리표를두개사용해야한다. <td> 꼬리표는TableDetail의줄임말로써하나의세포를만드는꼬리표이다. 한행에3개의칸이있는표이라면<tr> 를한번쓰고<td> 는3번쓴다. <table> 과<tr>,<td> 의배치순서를보자. 우선 표를 먼저 만들어야 하므로 <table> 를 쓰고 그다음 한개의 행을 만들어야 하므로<tr> 를입력한다음마지막으로그행에다가한개이상의칸을만들어야하므로 <td> 를 입력한다. 따라서 실행순서는 <table> -> <tr> -> <td> 이다. <td> 는 <tr> 의 령역에포함되여있다.그리고<tr> 은<table> 의령역에또포함된다. 따라서형식은다음과같다. <table><tr><td> 내용 </td></tr></table> 세포에관한꼬리표들의선택항목에는다음과같은것이있다. align align선택항목은세포안의본문을왼쪽,오른쪽,중심에배치한다. align=left는왼쪽에,center는중심에,right는오른쪽에놓이게한다. valign valign선택항목은세포안의본문을웃단,중심,아래단에배치한다. valign=top는웃단에,middle은중간에,bottom은아래단에놓이게한다. bgcolor 세포안의배경색을지정한다. 24

26 제 1 장. HTML 언어 rowspan 렬수를지정한다. colspan 행수를지정한다. nowrap 세포안에서자동적인행바꾸기를금지한다. 그리고<td> 안의내용에는글자뿐아니라다른꼬리표를넣어서여러가지기능을수행할수있다. 25

27 동적웨브페지작성법 제 2 장.STYLESHEET 언어 제 1 절.CSS 의 기초 개념 CSS란CascadingStyleSheet의줄임말로서웨브페지를만들때꼬리표만으로는 자신이표현하려고하는것을나타내기어려운경우가있을때그것을실제로가능하게 해주는언어이다. CSS의우점을보자 1문서의통일성 례를 들어 표에 들어가는 서체를 모두 크기는 2, 색갈은 푸른색, 서체종류는 청봉체 로 만들려고 한다. 그렇다면 표의 매 칸마다 <font size=2 color=blue face= 청봉 > 라고써줘야한다.표가한두개라면모르겠지만실제로웨브페지를설계할 때많은표를작성해야하므로이서체꼬리표들을일일히넣어주는데걸리는시간랑비, 로력랑비가많아진다.그렇다면모든표에들어가는서체를 한번의명령 으로될수록 통일시켜주어야할필요성이제기된다.이것은CSS를통해실현할수있다. 실례 : -꼬리표만리용한경우 <html> <head> <title> 꼬리표사용 </title> </head> <body> <tableborder=1><tr><td> <fontcolor=bluesize=2face= 청봉 > 세포1-1</font> </td> <td> <fontcolor=bluesize=2face= 청봉 > 세포1-2</font> </td></tr> <tr><td> <fontcolor=bluesize=2face= 청봉 > 세포2-1</font> </td> <td> 26

28 제 2 장. STYLE SHEET 언어 <fontcolor=bluesize=2face= 청봉 > 세포2-2</font> </td></tr></table> </body> </html> -CSS를리용한경우 <html> <head> <title>css사용 </title> <styletype="text/css"> td{font-size:12px;font-family: 청봉 ;color:blue} </style> </head> <body> <tableborder=1><tr> <td> 세포1-1</td><td> 세포1-2</td> </tr> <tr> <td> 세포2-1</td><td> 세포2-2</td> </tr></table> </body> </html> 실행화면은 똑 같은데 서체에 관한 설정에서 일반꼬리표로 4번 표시하였으나 CSS는단한번의명령으로같은효과를내게한다. 2문서의다양성 이전의HTML에서불가능한여러가지표현을가능하게해준다.다시말하여그림을원본보다희미하게해준다든가,글자에그림자를생기게한다든가,한행간격의사이를조절할수있는다양한표현이가능하다. 3적재시간단축 입력되는문자가HTML보다적으므로그만큼적재시간도빨라진다. 꼬리표에대해서만알고있으면CSS를습득하는것은어렵지않다.그것은CSS는 꼬리표에부가적인속성을더해주는것뿐이기때문이다.따라서문법자체를따로공부해야하는JAVA스크립트보다는훨씬배우기쉽다.이러한우월성을가지고있는CSS는 현재CSS2까지나왔다. 27

29 동적웨브페지작성법 STYLESHEET 의 표기방식 CSS 에 대하여 실례를 들어 설명해보자. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> </style> </head> <body> <font> 나는할수있다.</font> </body> </html> 1CSS의기본형식 CSS 의 기본형식은 다음과 같다. 선택항목1: 선택항목1의값 ;선택항목2: 선택항목2의값... CSS는 하나의선택항목안에 또다른선택항목값을넣을수도있다. 실례 : color:blue;height:10;filter:shadow(color:red) 선택항목에또다른선택항목을넣을 때에는괄호() 를 써서표시해준다.물론아무 선택항목이나괄호를치는것이아니다.그러한속성을지원하는선택항목에만한다. 2CSS의표현방식 크게 2가지 방법이 있다. 하나는 매몰 (embedded) 방식이고 다른 하나는 꼬리표안에종속되여서쓰이는직접 (inline) 방식이다. 매몰방식은우의례제와같이CSS부분을따로지정해주는것이다. 형식은다음과같다. <styletype="text/css"> <! 선택항목1: 선택항목1값 ; 선택항목2: 선택항목2값...} --> </style> 28

30 제 2 장. STYLE SHEET 언어 이 방식은 대체로 CSS부분이 <head> 와 </head> 사이에 놓이며 문서전체에 영향을미친다.한번만설정해주면문서가끝날때까지효력을낸다.CSS의우점에서 설명한바와같이이방식은문서의통일성을실현한다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css">  </style> </head> <body> <font> 나는할수있다 </font><br> <font> 나를믿는다 </font> </body> </html> 웃줄의 나는 할수 있다 와 아래줄의 나를 믿는다 는 각각 <font> 꼬리표로 씌여졌지만모두같은서체격식이적용된다.그것은CSS에서모든서체에대한조정을 하고있기때문이다 직접방식은CSS부분을 특정꼬리표안에넣고리용하는방식이다. 형식은다음과같다. < 적용될꼬리표style=" 선택항목1: 선택항목1값 ; 선택항목2: 선택항목 2값..."> 이 방식은 한 꼬리표에 종속되므로 해당 꼬리표의 령역안에서만 CSS부분이 적용된다. 실례 : <html> <head> <title>css례제 </title> </head> <body> 29

31 동적웨브페지작성법 <fontstyle="color:red;font-size:20px;background:yellow"> 나는 할수있다 </font><br> <font> 나를믿는다 </font> </body> </html> 나는할수있다 에만서체격식이적용되고아래의행에는아무런변화도없다. 실례를통하여알수있듯이매몰방식과달리해당꼬리표에만적용된다. 제2절.서체와배경조정 서체조정 CSS의 서체관련선택항목에는 font-size, font-family, color, font-weight, font-style,text-transform,text-decoration등이 있다. <styletype='text/css'> 적용될꼬리표 {font-size: 값 ;font-family: 값 ;font-weight: 값 ;font-style: 값 ;text-transform: 값 ;text-decoration: 값 } </style> 서체크기 (font-size) 기본단위값은px이다.<font> 꼬리표보다훨씬더세밀하게크기를조정할수있다. <font> 는 size=1~7까지 밖에 조절할수 없지만 CSS의 font-size선택항목값은 무한대이다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{font-size:30} </style> </head> <body> <font> 나는할수있다 </font> 30

32 제 2 장. STYLE SHEET 언어 </body> </html> 수자만써주면단위는px로인식한다.px외에도pt라는단위가있는데이단위를 쓸때에는뒤에단위를붙여주어야한다.실례로 font-size:20pt 로하면된다.pt는 px보다큰단위이다. 서체종류 (font-family) 서체종류를선택하는선택항목이다. 그형식은다음과같다. font-family:서체이름 CSS의font-family선택항목이<font> 의face와다른점은코드에여러개의서체를 써줄수있다는점이다. 어떤 서체를 써줄 때 그 서체가 해당 사용자의 콤퓨터에 없으면 콤퓨터는 무조건 고직체로 처리한다. 하지만 font-family값을 줄 때 어떤 서체가 콤퓨터에 없을 경우 대신 다른 서체를 예비로 지정해줄수 있다. 실례로 font-family:comic Sans Ms,Arial 로 준다면기본서체가 Comic Sans Ms이지만 없을 경우에는 Arial서체가 적용되게된다는것이다. 서체의굵기 (font-weight) <b> 꼬리표의역할과같다. font-weight선택항목은bold와thin의선택항목값을가진다. 서체의형식 (font-style) 서체의형식을지정해줄수있는데그값은normal과italic이다. normal은 보통서체를 나타내고 italic은 경사체를 나타내는것으로서 <i> 꼬리표와 류사하다.그러므로font-style:normal또는font-style:italic으로써준다. 대소문자변환 (text-transform) 대소문자변환선택항목이므로영문에만적용된다.그 값에는 아래와같은값들이있다. uppercase:모두대문자로변환 lowercase:모두소문자로변환 capitalize:띄여쓰기할때첫글자를대문자로변환 줄긋기 (text-decoration) 본문에줄을긋는기능이다.선택항목값에는다음과같은것들이있다. underline: 문자에밑줄긋기 overline: 웃줄긋기 line-through: 가운데줄긋기 31

33 동적웨브페지작성법 색조절 (color) 이것은 적용될 꼬리표의 글자색을 조절하는 선택항목이다. 그 값은 blue, red, black같은영문이름도될수있고0000ff,ff0000,000000과같이표기할수도있다.즉 color: 색갈이름 과같은형식이다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{color:red} </style> </head> <body> <font> 나는할수있다 </font> </body> </html> HTML에서는 단추의 글자색갈, textarea의 글자, select꼬리표의 글자를 바꿀수 없지만여기서는이모든것이가능하다 배경조정 CSS에서배경에관한선택항목은background-color,background-image,bac kground-repeat그리고background-attachment등이있다.그중background-col or는다른선택항목들과같이쓸수없다는것을고려하면그형식은다음과같다. <styletype='text/css'> 적용될꼬리표{backgound-color: 값 ( 또는backgound-image: 값 ;backgound-repeat: 값 ;background-attachment: 값 )} </style> < 적용될꼬리표 > 역시서체조정과마찬가지로선택항목전부를쓸필요없이원하는선택항목만써주면 된다. 단색배경 (background-color) 단색배경을줄때쓰이는선택항목이다.그형식은 background-color: 색갈 이다. 실례 : <html> 32

34 제 2 장. STYLE SHEET 언어 <head> <title>css례제 </title> <styletype="text/css"> font{background-color:yellow} </style> </head> <body> <font> 나는할수있다 </font> </body> </html> background-color 선택항목을<body> 꼬리표에주면 화면전체에색갈이적용된다. 그림배경 그림배경에 쓰이는 선택항목들은 많다. 그중에서 가장 기본적인것은 background-image이다. 형식은다음과같다. background-image:url( 그림주소 ) 또는 background:url( 그림주소 ) 이선택항목은<body> 꼬리표에도적용할수있다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> body{background-image:url(back.gif)} </style> </head> <body> 나는할수있다 </body> </html> 그림이 배경범위보다 크기가 작은 경우 반복되여 나오는데 그것을 조절할수 있는 선택항목이 background-repeat이다. 이 선택항목은 background-image선택항목과 33

35 동적웨브페지작성법 함께쓰인다. 이것의선택항목값에는다음과같은것들이있다. repeat-x:x축으로반복이된다. repeat-y:y축으로반복이된다. norepeat: 배경그림이반복되지않는다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> body {background-image:url(back.gif);background-repeat:repeatx} </style> </head> <body> 나는할수있다 </body> </html> background-attachment선택항목도 그림배경에 관한 선택항목이다. 문자그대로 배경을 붙이는 역할을 하는데 화면이 커서 흘리게 하여 열람하는 경우 배경은 따라 움직이지않고고정시킨다.선택항목값은fixed이다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> body{background-image:url(back.gif);background- attachment:fixed} </style> </head> <body> 내나라제일로좋아 </body> </html> 34

36 제 2 장. STYLE SHEET 언어 제 3 절. 위치, 단락, 유표 조정 위치조정 위치조정이란어떤내용을자신이원하는곳에다가마음대로놓을수있는것을말한다. CSS의위치에관한선택항목에는positon,z-index,left그리고top등이있다. 그형식은다음과같다. <styletype='text/css'> 적용될꼬리표{position: 값 ;z-index: 값 ;top: 값 ;left: 값 } </style> 위치지정선택항목 (positon) 이것은 위치를 지정하는 선택항목이다. 선택항목값에는 absolute와 relative가 있다. 그러므로 position:absolute 로 하면 위치를 절대적으로 지정하는것이고 position:relative 는상대적으로위치를지정해주는것이다. 절대적인 위치지정을 한 경우 정확한 위치설정은 top과 left선택항목에서 한다. 그러므로 position선택항목은 top과 left선택항목이 항상 같이 쓰인다. 즉 opsition;absolute;top: 값 ;left: 값 으로된다.위치단위는px이다. 절대위치의 자리표는 화면전체에 해당한다. 여기서는 화면의 왼쪽웃구석이 기준점으로된다. 례를 들어 아래로 10px만큼만 내리고싶다면 top:10으로 주면 된다. 또 거기에다 왼쪽으로부터 오른쪽으로 30px만큼만 이동하고싶으면 left:30으로 주면 된다. 즉 position:absolue;top10;left:30 와같이하면된다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> image{position:absolute;top:150;left:100} </style> </head> <body> <imagesrc=kitty.gif> </body> 35

37 동적웨브페지작성법 </html> 상대적인 위치지정은 화면전체가 아니라 어떤 특정한 다른것을 기준점으로 삼아서 거기에 상대적으로 위치를 지정하는 값이다. 형식은 position:relative 와 같다. 물론상대적인위치지정도top와left선택항목이같이쓰인다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{position:relative;top:10;left:15} </style> </head> <body> HTML작성 <font> 나는할수있다 </font> </body> </html> HTML작성 이라는본문을기준으로아래로10px,오른쪽으로15px만큼되는 위치에 나는할수있다 라는본문이나타난다. 절대위치지정에서는 화면의 왼쪽웃구석이 기준점으로 되므로 더이상 우로, 왼쪽으로 갈수 없지만 상대위치는 기준점이 임의의 위치에 있으므로 기준점보다 웃쪽으로 또는 왼쪽으로갈수있다.이때에는top와left 값을부의부호 (-) 로준다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{position:relative;top:-10;left:-15} </style> </head> <body> HTML작성 <font> 나는할수있다 </font> </body> 36

38 제 2 장. STYLE SHEET 언어 </html> 순서결정 (z-index) 상대위치나절대위치로지정하게되면내용끼리겹쳐지게되는경우가있다.즉그림과글자가겹쳐지던가아니면표와그림이겹쳐질수있다.이러한경우z-index선택항목을리용하여그층의순서를결정할수있다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> a{position:absolute;top:15;left:15;z-index:2} font{position:absolute;top:15;left:15;z-index:1} </style> </head> <body> <ahref= 내나라 '</a> <font> 나는할수있다 </font> </body> </html> 우의 례제는 <a> 꼬리표와 <font> 꼬리표를 겹쳐 놓았을 때 <a> 꼬리표와 <font> 꼬리표의우선권을결정하는례제이다.<a> 꼬리표는z-index가2이고<font> 는 z-index가 1이므로 <font> 꼬리표가 적용된것이 먼저 놓이고 <a> 꼬리표가 적용된것이 우에놓이게된다.그러므로글자( 내나라 ) 우로마우스를가져갔을때찰칵이가능하다. 실례 : 우의실례에서순서를바꿔보자. <html> <head> <title>css례제 </title> <styletype="text/css"> a{position:absolute;top:15;left:15;z-index:1} font{position:absolute;top:15;left:15;z-index:2} </style> </head> <body> 37

39 동적웨브페지작성법 <ahref= 대학 </a> <font> 나는할수있다 </font> </body> </html> 이번에는 <a> 가 먼저 놓이고 <font> 가 마지막에 놓였으므로 <font> 의 기능이 우선권을가지고<a> 는밑에배치된다.따라서마우스를가져가도찰칵이안된다 단락조정 단락의 구체적인 속성을 조절해주는 기능이다. word로 문서를 작성할 때 글자사이의간격을조절,행간격의조절,배치를오른쪽으로또는중심으로할것인가를 하는것을선택하는데CSS를리용할수있다. 행간격조절 (line-height) line-height는웃줄의글자와아래줄의글자사이의간격을값으로조절하는것이다. 값은수값으로도나타낼수있고퍼센트로나타낼수있으며px등의단위로도나타낼수 있다.즉line-height: 수자,line-height: 수자 %,line-height:수자px의세가지방법이있다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{line-height:3} </style> </head> <body> <font> 내나라제일로좋아 </font> </body> </html> 우의실례에서'line-height:3' 은글자크기의3배만큼띄우라는의미이다.그러나 웃줄의글자웃부분에서시작해서3배이다. 보다싶이 첫줄의 글자웃부분부터 해당글자의 배수를 재서 나타내게 된다. 이것은 HTML의<p> 나<br> 보다도훨씬구체적으로조정할수있다는것을알수있다.여기서 수자는자연수뿐아니라소수도가능하다. 글자간격조절 (letter-spacing) 글자와글자사이의간격을조절할수있는선택항목이다.이값은우의line-height 38

40 제 2 장. STYLE SHEET 언어 와는달리단위적표현만이가능하다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{letter-spacing:5px} </style> </head> <body> <font>내나라제일로좋아</font> </body> </html> 여기서0px로준다면글자사이의간격은없어지게된다. 본문배치 (text-align) HTML에서 align에 해당하는 선택항목으로서 어떤 내용을 어느 방향으로 배치시킬것인가를 정하는것이다. 선택항목값에는 left, center, right가 있다. 그런데 이 선택항목은 <font> 꼬리표에는 적용되지 않는다. 정렬시키는 선택항목이므로 <p> 나 <div> 같은것에적용된다. 문서의첫글자들여쓰기조절 (text-indent) 문서를 작성할 때 단락의 첫글자는 약간 들여쓰는데 얼마만큼 들여쓰겠는가를 설정하는선택항목이다.이것도역시<font> 에서는쓰이지않다. Px 등의 단위로 나타내는 방법과 퍼센트로 나타내는 방법이 있다. text-indent:10px 라면 10px만큼 들여쓰는것이고 text-indent:10% 라면 전체화면의 10% 만큼들여쓰는것이다. 문서의여백조절 (margin-left,margin-right,margin-top,argin-bottom) 공간을얼마만큼남길것인가를정해주는선택항목이다. margin의 종류는다음과같다. margin-left: 값// 왼쪽의여백을조절한다 margin-right: 값// 오른쪽의여백을조절한다 margin-top: 값// 웃쪽의여백을조절한다 margin-bottom: 값// 아래쪽의여백을조절한다. 값에는 px 또는 퍼센트를 단위로 줄수 있다. 따라서 10px라면 10px만큼 여백을 준다는것이고10% 라면화면크기의10% 만큼여백을준다는것이다.따라서퍼센트로주면 39

41 동적웨브페지작성법 같은값이라도화면의크기에따라여백이달라질수있다 유표조정 마우스를특정한내용우에올려다놓았을때의마우스유표모양을임의로지정해줄수있는선택항목이다.마우스를글자우에놓았을때의마우스모양은 I 의형태로되고하이퍼련결우에서는손가락모양으로된다.그외의령역에서는화살표모양으로된다. 유표를조절하는선택항목은cursor이다. -우-왼쪽화살표(nw-resize) 마우스유표를우-왼쪽으로향하는화살표로지정한다. -우-오른쪽화살표(ne-resize) 마우스유표를우-오른쪽으로향하는화살표로지정한다. -아래-왼쪽화살표(sw-resize) 마우스유표를아래-왼쪽으로향하는화살표로지정한다. -아래-오른쪽화살표(se-resize) 마우스유표를아래-오른쪽으로향하는화살표로지정한다. -물음표(help) 마우스유표를물음표로지정한다. -이동표(move) 마우스유표를이동하는표시모양으로지정한다. -오른쪽화살표(e-resize) 마우스유표를오른쪽으로향하는화살표로지정한다. -웃쪽화살표(n-resize) 마우스유표를웃쪽으로향하는화살표로지정한다. -아래쪽화살표(s-resize) 마우스유표를아래쪽으로향하는화살표로지정한다. -왼쪽화살표(w-resize) 마우스유표를왼쪽으로향하는화살표로지정한다. -본문입력상태(text) 마우스유표를 I 모양으로지정한다. -십자(crosshair) 마우스유표를십자가형태로지정한다. -모래시계(wait) 마우스유표를대기형태의모래시계로지정한다. -손모양(hand) 마우스유표를손모양으로지정한다. 40

42 제 2 장. STYLE SHEET 언어 제 4 절. 범위, 경계선 조정 범위조정 범위조정은특정꼬리표의영향을받는시각적인범위를조정하는선택항목기능이다. 여기서말하는범위조정이라는표현은크기조정과의미가다르다. 실례로<input> 로단추를만들었는데범위조정을리용해서단추를크게만들었다고 하자.이경우는단추가커졌으므로범위와크기의의미는같지만<font> 꼬리표의글자를범위조정으로확장하면글자가커지는게아니라그주변범위가확장된다.범위조정은 바로이런개념이다.만약글자의범위를조정한다면글자의크기는그대로있고원래 글자가 차지하고있던 공간이 커진다는 뜻이다. 그리고 단추나 본문구역 (textarea) 같은것은차지하고있던공간자체가원래그꼬리표의범위이므로범위의값을크게주면크기또한커진다. 범위를조정하는선택항목에는width와height가있다. 범위조정의기본형식은다음과같다. width: 값 ;height: 값 물론 width나 height중 하나만 써도 된다. 값의 단위는 기본적으로 px이고 상대크기를표현하는퍼센트 (%) 를단위로할수도있다. 실례1: <html> <head> <title>css례제 </title> <styletype="text/css"> font{width:150} </style> </head> <body> <font> 나는할수있다 </font> 나를믿는다 </body> </html> 실례2: <html> 41

43 동적웨브페지작성법 <head> <title>css례제 </title> <styletype="text/css"> font{width:150;height:100} </style> </head> <body> <font> 나는할수있다 </font> 나를믿는다 </body> </html> 실례3: <html> <head> <title>css례제 </title> <styletype="text/css"> font{width:70%;height=50%} </style> </head> <body> <font> 나는할수있다 </font> 나를믿는다 </body> </html> width,height 선택항목을리용하는모든꼬리표 (<table>,<tr>,<td>,<iframe> 등 )들은값을퍼센트로주면상대범위이므로화면의크기에따라시각적으로차이난다. 물론해상도에따라서도차이가난다.그것은800*600 해상도일때50% 로주면크기는 400px이지만1024*768 일때는512px가되기때문이다. 따라서 홈페지를 만들 때 여러 해상도를 고려해서 적당한 상대비률을 지정해 주는것도중요한문제이다.물론상대비률을무시하고px등의절대비률로만리용해서 만든 홈페지도 있다. 해상도가 어떻든 화면크기가 어떻든 항상 똑같은 범위로 해주는것도 좋지만 해상도가 높은 화면에서 보는 경우 화면이 좀 작아보이는 단점이 있다. 반면에 100% 로 상대크기를 지정해주면 해상도가 어떻든 전체화면을 보여줄수 있다. 다만 전체 화면이 현시되였지만 해상도에 따라 범위가 달라지므로 어떤 해상도에서는화면이이상하게현시될수있다는것이다.따라서모든해상도를고려해서 42

44 제 2 장. STYLE SHEET 언어 상대비률를적절히주도록해야한다. 범위조정의선택항목은단독으로보다는다른선택항목과함께쓰이는경우가많다. 실례 : <fontstyle="width:150;height:50; background-color:orange"> 나는할수있다 </font> <fontstyle="width:150;height:50; background-color:orange;text-align:center"> 나는할수있다 </font> <fontstyle="width:150;height:50; font-size:15;filter:shadow(color:red)"> 나는할수있다 </font> 실제로CSS는<font> 꼬리표보다는<select> 나<input>,<a>,<textarea>등에 더많이쓰인다. 테두리선 실례 : <inputstyle="width:100;height:40;background- color:white;text-align:left"type=buttonvalue=" 멋있다 "> 우의 실례와 같이 <input> 꼬리표를 비롯한 다른 꼬리표들은 서체와는 달리 범위자체가그꼬리표의령역이므로범위를크게해주면크기가커지게된다 경계선조정 이것은경계선을임의의형태로만들수있는기능이다. <table> 꼬리표에서는경계선의속성을조절하는선택항목이따로있었지만기타꼬리표에는그런선택항목이없었다.바로이것을CSS가가능하게해준다.<table> 의경계선은물론<input>,<font>,<iframe>,<textarea>등모든꼬리표에대한경계선을 CSS선택항목으로조절할수있다 경계선의모양지정(border-style) 경계선의모양을어떻게지정할것인가를정하는선택항목이다. inset:경계선의안쪽부분이안으로움푹들어간것처럼만들어주는선택항목이다. outset:경계선의안쪽부분이밖으로나온것처럼만들어주는선택항목이다. double:경계선을2중으로만들어주는선택항목이다. solid:직선으로된경계선을만들어주는선택항목이다. dotted:점선으로된경계선을만들어주는선택항목이다.(internetexplorer5.5 이상에서실행 ) dashed:풀이표형식으로된경계선을만들어주는선택항목이다.(explorer5.5이상에서실행 ) ridge:경계선을액자형식으로만들어주는선택항목이다. 실례 : 43

45 동적웨브페지작성법 <html> <head> <title>css례제 </title> <styletype="text/css"> font{border-style:solid} </style> </head> <body> <font> 나는할수있다 </font> </body> </html> dotted, dashed는 Explorer 5.5이상에서만 제대로 실행된다. 5.5이하에서는 dotted나dashed를solid형으로인식한다. 경계선두께조절 (border-width) 이선택항목을주지않으면기정값인 border-width:4 로인식한다. inset나outset로설정된경계선은두께를얇게주면들어가거나나온다는느낌을 거의주지못하기때문에경계선두께를굵게하는것이좋다.double도마찬가지로너무 얇게주면경계선이2개로보이지않는다. 경계선색갈조절 (border-color) 경계선의색갈도조절할수있다. 기본형식은 border-color: 색갈명 이다. 색갈명은"red"등의영문으로입력해도되고"ff0000" 같이써도된다. 실례 : <html> <head> <title>css례제 </title> <styletype="text/css"> font{border-color:orange;border-width:2;border- style:solid} </style> </head> <body> <font> 나는할수있다 </font> </body> 44

46 제 2 장. STYLE SHEET 언어 </html> 기타선택항목 경계선두께와관련된선택항목에는 border-방향-width: 값 형식으로된선택항목도있다.실례로아래경계선을10px로 하고싶으면 border-bottom-width:10 으로하면된다. 경계선모양과관계된선택항목에는 border-방향-style: 값 형식으로된선택항목도있다.실례로오른쪽경계선만점선으로하고싶으면 border-right-style:dashed 로하면된다. 경계선색갈과관계된선택항목에는 border-방향-color: 값 이있다.실례로우에 있는경계선만검은색으로하고싶다면 border-top-color:black 로하면된다. 제5절.려파기 PhotoShop에는 여러가지 효과를 줄수 있는 기능이 많다. CSS는 PhotoShop을 쓰지 않고도 그러한 효과를 가능하게 해준다. 물론 PhotoShop만큼 다양하고 세밀한 조정은불가능하지만CSS만으로도일정한정도의효과는실현할수있다. 형식은다음과같다. filter:filter 값 ( 부분선택항목 : 값 ) 려파기조정은filter외에더다른선택항목은없고단지filter선택항목에여러개의 부분선택항목이 있다. 표기방식에서 본것처럼 부분선택항목은 선택항목뒤에 괄호를 넣어서써주면된다. 실례 : <html> <head> <title>css례제 </title> <styletype='text/css'> image{filter:alpha(opacity:100,style:2,finishopacity:3)} </style> </head> <body> <imagesrc=suhyun.gif> </body> </html> 45

47 동적웨브페지작성법 alpha라는 려파값을 쓰고 Opacity라는 부분선택항목 (filter의 속성이라고도 한다.) 을10으로주려면 filter:alpha(opacity:10) 으로쓰면된다. 부분선택항목을여러개써줄때는구분기호로반점 (,) 을리용한다. 려파기조정은려파기의특성상매몰방식을쓰는경우가별로없으므로직접방식으로 표기한다. alpha효과 alpha효과는어떤객체의투명도를조절하는기능을수행한다. 실례 : <fontstyle="height:5;filter:alpha (Opacity:10,style:1,finishOpacity:100)">alpha효과 </font> 실례 : <imagesrc=kinoko.jpgstyle="filter:alpha (Opacity:10,style:1,finishOpacity:100)"> 그림에 려파효과를 줄 때에는 그림자체에 따로 width나 height선택항목을 주지 않아도filter효과가나타나지만글자는반드시범위를잡아주어야한다. 투명도조절 (Opacity,FinishOpacity) Opacity는 alpha려파의 속성값으로 쓰인다. Opacity는 적용대상의 시작위치의 투명도값이고 Finish Opacity는 마지막위치에서의 투명도값이다. 그 값은 각각 0~100까지가 있다. 0을 준다면 가장 투명하게 되는것이고 100을 준다면 가장 불투명하게된다. 실례 : <font style="height:5;filter:alpha(opacity:10,finishopacity:100,style:1)"> 내용 </font> 이것은시작되는지점의불투명도는10으로비교적투명하게나오고끝나는지점의 불투명도는100으로완전불투명이된다. 투명한모양을조절하는style속성값 style속성은투명도변화를줄수있는모양을지정해주는기능을수행한다. style값은0~3까지줄수있다.0은처음의opacity값을끝까지유지하는값이다.1 을주면왼쪽에서부터오른쪽으로가면서opacity값에서finishopacity값으로투명도변화를준다.2는중심의opacity값에서원형으로바깥쪽으로는finishopacity값으로변화를준다.3은x자대각선의opacity값에서끝부분변의finishopacity값으로변화를 준다. 46

48 제 2 장. STYLE SHEET 언어 실례 : <imagesrc=kinoko.jpg style="filter:alpha(opacity:5,style:0,finishopacity:100)"> <imagesrc=kinoko.jpg style="filter:alpha(opacity:5,style:1,finishopacity:100)"> <imagesrc=kinoko.jpg style="filter:alpha(opacity:5,style:2,finishopacity:100)"> <imagesrc=kinoko.jpg style="filter:alpha(opacity:5,style:3,finishopacity:100)"> 그림가장자리를 뽀얗게 하려면 style값을 2로 주고 Opacity값은 크게, finish Opacity값은작게주면된다. 실례 : <imagesrc=kinoko.jpg style="filter:alpha (Opacity:100,style:2,finishOpacity:3)">alpha효과 </font> 47

49 동적웨브페지작성법 제 3 장.JavaScript 언어 제1절.JavaScript의기초 JavaScript는 Netscape회사와 Sun Microsoft system회사가 공동으로 개발한 스크립트언어이다. JavaScript가열람기에적재되기시작한것은Netscape2.0부터이다. JavaScript는다음과같은특징을가지고있다. 스크립트언어이기때문에콤파일할필요가없다. HTML문서안에직접JavaScript의원천코드를서술할수있다. JavaScript대응의열람기로부터파일을읽어넣으면스크립트를실행할수있다. 즉JavaScript는HTML과같이특별한개발환경이필요없으며word를비롯한문서편집기에서도쉽게프로그람을작성할수있다.그리고JavaScript로작성한프로그람은 대응한열람기이라면응용프로그람이나조작체계가달라도꼭같이동작시킬수있다. JavaScript는여러가지조작체계의열람기에서실행할수있다. HTML로는실현하기힘든동적인효과도나타낼수있다. JavaScript를 사용하면 지금까지 CGI로서 진행하고있었던 처리의 일부나 CGI로써는 할수 없었던 처리를 웨브페지상에서 진행할수 있다. 례를 들면 상품의 주문이나 등록정보를 받아들이는 웨브페지에서는 우선 사용자가 요구하는 제품명이나 수량 등의 정보를 홈페지에 입력하거나 선택한 다음 그것들의 정보를 기초로 자료를 묶고계산을진행하며금액의총합등의결과정보를페지에현시한다. 이러한 일련의 처리를 JavaScript를 사용하지 않고 진행하는 경우에는 일반 사용자로부터망을통하여CGI가자료를받아계산한결과를다시봉사기로부터망을 통하여사용자에게보내는절차가필요하다. 그렇게되면망의상태나봉사기와의대화상태에따라서CGI로부터의응답이잘되지 않을수있는등처리시간이길어지는문제가발생함으로효률적이라고말할수없다. 그러나JavaScript를사용하면이문제는해결된다. JavaScript는홈페지의자료를보내기전에홈페지의입력항목의검사를진행하거나자료를CGI에보내지않고열람기상에서계산을진행할수있다.결국망에서의통신시간을줄일수있고순간에사용자에게회답을되돌려줄수있다. JavaScript는 HTML로서 표현할수 없는 세밀하고 움직임을 주는 효과도 웨브페지상에서 실현할수 있다. 례를 들어 HTML에서는 창문을 열고 싶을 때에 open객체를사용한다.그러나open객체에서열기창문을페지작성자가조정할수없다. JavaScript를사용하면창문을여는것만이아니라높이나너비,안내띠나도구띠의 48

50 제 3 장. JavaScript 언어 유무,그리고화면상에서표시위치등을구체적으로조정할수있다.또한HTML에서는 여러개의프레임을한번밖에변경할수없지만JavaScript를사용하면가능하다. 이와 같이 JavaScript로는 HTML만으로서는 실현할수 없는것도 웨브페지상에서 실현할수있다 JavaScript 의서술방식 JavaScript 를서술하는방법에는 2가지가있다. HTML파일안에 서술하는 방법과 스크립트만으로 서술한 파일을 HTML파일이 호출하는방법이있다. JavaScript는HTML파일안에서술하는언어이므로꼬리표를리용한다. 이절에서는스크립트를작성할때반드시필요한꼬리표에대하여해설한다. HTML파일에서술하는방법 HTML파일에 JavaScript를 서술할 때에는 <script>~</script> 꼬리표를 사용한다.그리고<script> 꼬리표의language 객체에JavaScript 라고지정한다. 실례 : <scriptlanguage="javascript">  </script> JavaScript는 대부분 <head> 와 </head> 사이에 삽입한다. 여기서 language="javascript" 부분은생략해도된다. 열람기는자기가지원하지않는꼬리표를무시한다. 따라서자기가지원하지않는 원천코드내용이그대로공개된다.이것을방지하기위해해설문을넣는다. JavaScript 도꼬리표와마찬가지로문서의우측부터차례대로처리된다. 따라서 어디에 JavaScript원천을 넣는가에 따라 JavaScript가 언제 실행되는가가 결정된다. JavaScript를외부문서에서호출하는방법 많은 문서를 만들 때 공통되는 JavaScript원천이 있다면 그것을 일일히 문서마다 서술하자면 상당한 시간과 노력이 필요된다. 이것은 JavaScript원천을 파일로 따로 만들어문서를작성할때간단하게련결시키는방법으로실현할수있다. 형식은다음과같다. <scriptsrc= 스크립트파일의url ></script> 스크립트파일에는JavaScript의원천코드만을서술한다. 그리고 이 스크립트파일의 확장자는 js로 한다. 례를 들면 JavaScript 의 원천코드를 49

51 동적웨브페지작성법 Script.js 라는파일에서술하고HTML파일과같은등록부에보존하였다고하자.이경우 HTML파일에서는다음과같이서술한다. <scriptsrc= Script.js ></script> 우와 같은 형식으로 준다면 수십개의 문서에다가 간단한 명령 하나만으로 똑같은 JavaScript원천을 한번에 줄수 있다는 우점이 있다. 다만 다른 파일에 적재하므로 문서자체를적재하는시간은약간길어질수있다 JavaScript 의구조 1)객체 JavaScript의객체란JavaScrip실행을위한목적,적용대상을말한다. JavaScript객체는크게내장객체와조립객체로나눈다. 객체들의중요한특징은다음과같다. -내장객체 내장객체는 열람기자체가 가지고있는 정보나 열람기의 매개 부분품을 표시하는 객체이다. 내장객체에는차림표띠등의 부분품,대화칸(form),그림외에HTML로서표시되는부분,사용자정보등을표시하는여러가지종류의객체가있다.내장객체사이에는계층관계가존재한다. 서술할때에는계층관계를정확하게지정해야한다.례를들면image객체를사용할 때에는window.document.image라고계층관계에따라서서술하여야한다.이경우의 서술방법은객체와객체의사이를. 으로구별하여차례로window.document이라고련결한다. image객체인 경우 document객체로부터 하나 아래계층의 객체이므로 window. document.image라고서술한다. 최상위객체는창문자체를표현하는window이고그아래에document나location 등의 하위객체들이 있다. 례를 들어 window.document.write() 라고 하면 window ->document의순서로세부적인객체에접근하는것이다.그러나window객체는대부분의경우생략한다. 객체의계층관계는다음과같다. 표 3-1. 객체의 계층관계 상위 하위 window document location frame image form applet text hidden reset 50

52 제 3 장. JavaScript 언어 history link area layer radio href select fileupload password textarea submit button -조립객체 조립객체는 JavaScript에 있는 날자를 취급하거나 원주률이나 시누스값 등을 계산하기위한객체를말한다. date객체 date객체는날자나 시간을 얻거나 설정을 진행하는 객체이다.date객체는호출사용자가 사용하고있는콤퓨터의국부시간정보를사용하므로CGI에서는힘들었다.이것을리용하여세계각지의국부시간에맞추는처리를진행할수있다.date객체는new연산자를사용하여객체를작성하고그객체에대하여처리를진행한다. math객체 math객체는수학연산을할수있는객체이다.math객체는math의뒤에속성이나 메쏘드를 서술하여 사용한다. 이 객체를 리용함으로써 봉사기에 자료를 보내지 않고 사용자의열람기만으로서여러가지계산을진행할수있다. string객체 string객체는 문자렬에 대하여 수정이나 검색 등의 조작을 진행하는 객체이다. JavaScript1.1 부터new연산자를 사용하여객체를작성할수 있게되였다. array객체 array객체는배렬의작성이나조작을진행하는객체이다. 2)속성 JavaScript에서 속성이란 특정한 실체가 가지는 특징을 말한다. 그러므로 객체와 함께쓰인다.속성에는읽기전용인것과변경가능한것이있다. -읽기전용속성 읽기전용속성에는 내장객체의 appcodename속성과 appname속성이 있다. 또한 screen객체의width속성,height속성등도사용자가변경할수없는읽기전용속성이다. 이 속성들은 다 사용자가 열람기환경에 맞는 값을 준다. 이 값을 스크립트에서 잘 리용하면호출사용자의매환경에서최적상태의웨브페지를표시할수있다. 51

53 동적웨브페지작성법 -변경가능한속성 변경가능한 속성에는 location 객체의 href속성이나 image객체의 src속성들이 있다. 또한홈안의값을표시하는text객체의value 속성들이있다. 이변경가능한속성값들은우에서서술하는사건처리에의하여동적으로변경된다. 3)메쏘드 메쏘드 (Method) 란 객체의 동작을 나타내는 속성이다. 대표적인 메쏘드로는 write() 가 있는데 이것은 내용을 출력할 때 리용하는 메쏘드이다. 여기서 괄호안에는 메쏘드의구체적인선택항목이나내용을입력한다. JavaScript에는많은메쏘드가있다. 실례 : <html> <head> <title>javascript례제페지 </title> <scriptlanguage="javascript"> document.write(' 나는할수있다 ') </script> </head> <body> </body> </html> 4)함수 함수란 어떤 특정한 처리를 묶어놓은것으로서 메쏘드와 비슷하지만 객체와 붙여서 쓰지않는다는점에서차이가있다. document.write() 처럼 메쏘드는 객체와 함께 쓰이지만 함수는 좀 다르다. 또한함수도 객체와 마찬가지로 사용자자신이 직접 정의하는 함수가 있고 원래부터 있던내장함수가있다. 함수는 메쏘드와 마찬가지로 괄호 () 를 사용하며 이 속에 문자렬이나 변수를 넣을수 있다. 함수이름은일정한조건을붙인것과사용자측에서임의로정의할수있다. 어떤조건에대하여진행하고싶은처리나자주반복되는처리는함수로정의한다. 함수를선언하는방식은다음과같다. function함수이름 ( 인수, 인수, ){ 처리내용 } 52

54 제 3 장. JavaScript 언어 함수의 정의는 <head> ~</head> 안에서 진행하며 함수의 호출은 <body>~ <body> 안에서진행한다. 실례 : <html> <head> <title>javascript례제페지 </title> <scriptlanguage="javascript"> functionabcd(){document.write(' 훌륭하다.~^^')} </script> </head> <body> <ahref="javascript:abcd()"> 찰칵!!</a> </body> </html> 5)사건처리 JavaScript에서는 마우스가 눌리웠거나 특정한 동작이나 상태가 발생하였을 때를 사건이발생하였다고말한다. 어떤 사건이 발생하였을 때 그 사건을 얻거나 특정한 스크립트를 호출하는것이 사건처리이다. 사건처리를 사용하면 여러가지 동작에 따라 다른 동작을 지정할수 있으므로 HTML만으로는표현할수없었던보다동적인효과를실현할수있다. 사건처리에서는설정할수있는객체가정해져있다. -onclick onclick는 객체를 눌렀을 때의 사건처리를 얻는다. 례를 들면 button객체에 onclick를 설정하였다고 하면 홈의 단추를 눌렀을 때에 새로운 창문을 열거나 다른 페지를표시하는기능을실현할수있다. onclick는 button객체, checkbox객체, link객체, radio객체, reset객체, submit객체에설정할수있다. -onload onload는 페지나 그림이 읽어질 때의 사건처리를 얻는다. 페지를 읽을 때에 상태행이나 홈페지의 문자를 움직이거나 그림을 움직이는 등 페지가 읽어지면 동시에 처리를진행하도록하는경우에리용한다. onload는javascript1.0에서는window객체,javascript1.1에서는image객체에 설정할수있다. 53

55 동적웨브페지작성법 페지를읽으려는사건을취급할때에는<body> 안에onLoad 를설정한다. -onsubmit onsubmit는 홈의 onsubmit단추를 눌렀을 때의 사건을 취급한다. 대화칸의 자료가보내지기전에사건을취급하므로처리가끝날때까지자료는전송되지않는다. 스크립트실행시에 자료를 보내는 처리를 중지할수 있으므로 대화칸의 내용을 검사하고 문제가 있는 경우 사용자에게 경고하여 송신처리를 중지할수 있다. onsubmit는 form객체에설정할수있다. -onchange onchange는 현재의 자료가 이전 자료와 바뀌여 졌을 때 발생하는 사건을 처리한다. onchange를 select객체에 설정하면 대화칸의 선택항목이 변경되였을 때에 처리를얻어대화칸안의값을계산할수있다.또한변경하고싶지않은대화칸의내용이 변경되였을때에사용자에게경고하는것과같은처리를진행할수있다.onChange는 JavaScript1.0에서는 select객체, text객체, textarea객체, JavaScript 1.1에서는 fileupload객체에설정할수있다. -onmouseover onmouseover는 객체우에 마우스유표를 놓았을 때의 처리를 취급한다. onmouseover를 link객체에 설정하면 마우스유표가 련결상에 놓일 때에 상태행에 련결에 관한 설명을 표시하거나 그림을 바꾸거나 하는 처리를 진행할수 있다. onmouseover는area객체,link객체에설정할수있다. -onmouseout onmouseout 는마우스유표가객체에서떨어졌을때의처리를취급한다.link객체에 설정하면 마우스유표가 련결상에서 떨어졌을 때에 onmouseover를 사용하여 바뀐 그림을원래대로보내는처리를진행할수있다.JavaScript1.1에추가된사건처리이며 area객체,link객체에설정할수있다. 54

56 제 3 장. JavaScript 언어 제 2 절.JavaScript 의 주요객체 JavaScriptdocument 객체 -document객체의속성 document객체의 속성 (document. 속성 ) 을 리용하여 문서와 관련된 여러가지 본문이나배경,그림을조정할수있다. 일반형식은다음과같다. 객체. 속성이름 =" 값 " 1배경속성bgColor 문서 (document) 의배경을지정하는속성이다. 인용부호를쓰는가,안쓰는가에따라의미가달라진다. 실례 : document.bgcolor="red"(document.bgcolor속성값을red로한다는뜻) document.bgcolor=red(document.bgcolor를red라는변수로 정의한다는 뜻 ) 값에는영문이름도되고코드이름도가능하다. 실례 : <scriptlanguage="javascript"> document.bgcolor="#ff0000" </script> 2서체색갈fgColor 서체색갈과관련된속성이다. 실례 : <scriptlanguage="javascript"> document.fgcolor="blue" </script> 3련결색갈linkColor,alinkColor,vlinkColor 련결할때서체색갈을조절할수있는속성이다.linkColor는방문전의련결색갈이고alinkColor는마우스를찰칵했을때의련결색갈,vlinkColor는방문후의련결색갈이다. 실례 : <scriptlanguage="javascript"> document.linkcolor="green" 55

57 동적웨브페지작성법 document.alinkcolor="red" document.vlinkcolor="violet" </script> <ahref= 찰칵 </a> 4페지이름title 페지의이름과관련된속성이다.열람기의우측푸른색부분에있는제목을말한다. 실례 : <scriptlanguage="javascript"> document.title=" 살기좋은내나라 " </script> 5문서의주소관련속성url 문서의주소와관련된속성이다.물론다른속성처럼 document.url=" 주소이름 " 을 써서값을지정해줄수있지만이미주소가있는문서의주소를다시그렇게직접써줄필요가 없다.그러므로속성자체의정의보다는write() 메쏘드를써서해당문서의주소를알아보도록 하는데많이사용하고있다. 실례 : <scriptlanguage="javascript"> document.write(document.url) </script> 6마지막수정날자lastModified 마지막수정날자와관련된속성이다.이것또한사용자자신이직접마지막수정날자를정의해줄필요가없으므로확인의용도로만쓰이고있다.즉마지막수정날자를알려고할때리용한다. 실례 : <scriptlanguage="javascript"> document.write(document.lastmodified) </script> 7쿠키관련cookie 쿠키와관련된속성이다. 실례 : <scriptlanguage="javascript"> document.write(document.cookie) </script> 8그밖의속성들 56

58 제 3 장. JavaScript 언어 문서의form전송과관련된forms속성,문서의그림과관련된images속성,련결과 관련된anchors,삽입과관련된embeds,령역과관련된domain,java애플레트와관련된applets속성등이있다. 실례 : <html> <head> <title> 실례 </title> <scriptlanguage="javascript"> document.bgcolor="yellow" document.fgcolor="blue" document.linkcolor="green" document.alinkcolor="red" document.vlinkcolor="violet" document.title=" 살기좋은내나라 " document.write(document.url) document.write(document.lastmodified) </script> </head> <body> <ahref= </body> </html> -document객체의메쏘드 1write메쏘드 문서출력과관계되는메쏘드인데작성한문서를직접적으로보여준다. 형식은다음과같다. document.write(" 내용 ") 실례 : <scriptlanguage="javascript">  57

59 동적웨브페지작성법 </script> 여기서 열람기는 될수록이면 완성된 형태의 HTML문서를 요구하기때문에 JavaScript원천만넣기보다도아래와같이HTML문서형식안에JavaScript원천을넣어 사용하여야한다.물론JavaScript원천만넣어도열람기는최대한실행시키지만복잡한 코드나<body> 의onload를원하는것들은HTML문법을지켜야제대로출력이되므로 될수록HTML문서형식을모두쓰는습관을가져야한다. 실례 : <html> <head> <title> 제목 </title> </head> <body> 본문내용 </body> </html> 2꼬리표도사용가능 document.write("") 의인용부호사이에는꼬리표를넣어도된다.즉하나의작은HTML문서를삽입하는것으로된다.또한HTML문서에쓸수있는모든꼬리표뿐만아니라CSS를인용부호사이에넣어도된다.그러나JavaScript구문을넣을때는인용부호를넣지말아야한다. <scriptlanguage="javascript">  </script> JavaScript괄호안의 (" 내용 ") 과 ( 내용 ) 에는차이가있다.첫번째는인용부호안에있는문자를출력하라는뜻이고두번째는내용이라는글자자체를변수로취급하라는뜻이다.두번째경우는 내용 이라는변수를정의하는다른구문을필요로한다. 변수를정의하는것을선언이라고한다.선언에는객체의선언,메쏘드의선언등이있다.따라서앞의례제와같이단순한출력만을할때에는인용부호를넣어주는것이옳은 표현이다.( 작은인용부호도가능 ) 괄호안에JavaScript구문을넣고거기에인용부호를넣어주면그것자체를그냥출력한다. 58

60 제 3 장. JavaScript 언어 실례 : (" 안녕하십니까?")( ) (' 안녕하십니까?')( ) 작은인용부호도허용됨 (document.write()) 이것은 document.write() 를처리하라는것을의미한다. ("document.write()") 이것은 document.write() 라는글자를출력하라는것을의미한다. 두개이상의구문을처리할때구문마다줄바꾸기를하거나한줄로처리할때구문의 끝에반두점 (;) 을붙인다. 실례 : document.write(" 안녕하십니까?");document.write(" 반갑습니다 ~~!") // 반두점을붙임 document.write(" 안녕하십니까?") document.write(" 반갑습니다 ~~!")// 한줄을띄움 3속성이나변수등의값을표시 다른구문에서정의해준여러객체나함수,메쏘드들의값도알기쉽게표시해준다. 이때인용부호는생략한다. 아래의 례제는 먼저 배경속성을 red로 설정해주고 다음 줄에서 write메쏘드를 사용하여배경색을표시해주는간단한례제이다. 실례 : <scriptlanguage="javascript">  </script> bgcolor 의속성값을JavaScript 의document.write 로확인하는례제이다.괄호안의 내용에 여러가지 기능을 동시에 입력하려는 경우에는 + 연산자를사용한다. 례를 들어 우의례제에서현시내용과속성을동시에현시하려면 <scriptlanguage="javascript">  59

61 동적웨브페지작성법 </script> 속성을정의할때에는인용부호를쓴다. 실례 : document.bgcolor="red"//문서의배경색은red이다. 인용부호를쓰지않으면속성자체를하나의변수로간주한다. 실례 : document.bgcolor=red//document.bgcolor자체를red라는 변수로간주한다. 괄호안에 인용부호를 쓰지 않는 경우는 JavaScript구문을 쓰거나 속성을 쓸 때, 함수의값을정의할때등이다. 실례 : document.write(document.bgcolor) // document.bgcolor자체를 출력하는것이아니라document.bgColor속성값을출력한다. 실례 : history.back(1)//back의값을1로한다. 실례 : functionabcd(ok)//abcd라는함수가있는데괄호안의값을ok라는변수로 지정한다 JavaScripthistory 객체 History라는것은력사라는말이나지나간사실을말한다.웨브페지를열람할때에도지나간사실들이있다.바로앞페지에서왔다던가다른데서련결되여왔을때그페지들은전부다지나간사실이라고할수있다.history객체는바로이런페지들로되돌아가거나앞으로갈때리용하는명령이다.간단하게말해서웨브열람기의 뒤로, 앞으로 기능과같다. history에는 3가지의 메쏘드, 즉 이전 페지로 돌아가는 back() 메쏘드, 이전 페지에서 다시 앞으로 돌아올 때 쓰는 forward() 메쏘드, 우의 두 메쏘드의 개념을 통합한go() 메쏘드들이있다 -back() 메쏘드 실례 : <scriptlanguage="javascript">  </script> 60

62 제 3 장. JavaScript 언어 해당페지를열면무조건이전페지로돌아간다.괄호안에수자를넣으면수자만큼 이전페지로간다.3을주면3번째전페지로간다. -forward() 메쏘드 실례 : <scriptlanguage="javascript">  </script> 이전페지로갔을때앞의페지로다시돌아가는역할을한다.따라서뒤로가기를 하지 않은 경우라면 아무런 변화도 일어나지 않는다. 물론 여기서도 괄호안에 수자를 넣으면수자만큼앞으로간다. -go() 메쏘드 실례 : <scriptlanguage="javascript">  </script> go() 메쏘드는괄호안에수자를반드시넣어주어야한다.괄호안에넣는수자로서는 옹근수를넣으면된다.만일-1을넣으면1만큼과거로돌아가고1이라고하면1만큼 앞으로나간다.즉부의옹근수를넣으면back() 와같은개념이되고자연수를넣으면 forward() 와같은개념이된다. -함수와조합 사실 history객체의 back(), forward(), go() 메쏘드만 가지고 코드를 작성하지 않는다.이메쏘드만을리용한다면페지를열기가바쁘게전페지로돌아가거나앞페지로 이동하기때문에 페지를 열람할수 없기때문이다. 그래서 단추를 만들어서 그것을 찰칵하면 뒤로가기를 한다든가 하는 상태를 만들기 위하여 이 메쏘드들과 함수들을 조합하여리용하고있다.이메쏘드를함수속에포함시키면함수가대응되였을때실행이 된다. 형식은다음과같다. function함수이름 (){JavaScript구문} 함수이름을 abcd라고 정한다면 abcd() 가 실행되였을 때 중괄호 ({}) 안의 구문이 61

63 동적웨브페지작성법 실행되므로 이 메쏘드를 쓰는것이 편리하다. back() 메쏘드를 abcd() 라는 함수안에 넣으면 functionabcd(){history.back()} 와같이된다. 함수를 호출하는 방법은 여러가지가 있으나 우와 같은 경우에는 단추를 눌러서 호출하는방법으로하는것이좋다. <a> 꼬리표를리용하는경우 실례 : <scriptlanguage="javascript">  </script> <ahref="javascript:abcd()"> 뒤로가기 </a> <form>와<input> 를조합하는경우 실례 : <scriptlanguage="javascript">  </script> <formaction="javascript:abcd()"> <inputtype=submitvalue=" 찰칵 "> </form> <a> 꼬리표의href와 <form> 꼬리표의action에 javascript:abcd() 를 넣음으로써찰칵하면abcd라는함수를실행하게만들었다.JavaScript에는<a> 나<form> 꼬리표가아니라도마우스찰칵을대신할수있는것이있다.바로onclick라는사건호출기이다. 실례 : <scriptlanguage="javascript">  </script> <textarea rows=4 cols=30 onclick="abcd()"> 본문공간이 다.</textarea> 62

64 제 3 장. JavaScript 언어 <textarea> 꼬리표는 본문칸을 만든다. 그러나 실례에서는 여기에 onclick를 사용함으로써본문을입력할수있게하는것이아니라이것자체를단추화하였다.따라서 그공간을찰칵하면abcd() 라는함수가호출된다 JavaScriptwindow 객체 window객체라는것은하나의 페지자체에 대응하는 객체로 생각하면된다. 앞에서 언급한것처럼이객체는모든객체의최상위객체로된다.그하위객체는특정한령역( 문서라든가,지나간사실,련결등) 을전문으로담당하는반면에window객체는그것들을다포함하는하나의완결된페지를목표로한다.따라서모든하위객체는원칙적으로 window객체를써준다음에자신의객체를써주어야한다. 실례로 document객체의 경우에 원래는 window.document이고 history객체도 원칙적으로는window.history이다.하지만JavaScript는페지를목표로하는언어이므로window라는객체를생략해도된다. window도다른객체와마찬가지로많은속성과메쏘드가있다.례를들어창문을 강제로여는open() 메쏘드는window객체의메쏘드이므로window.open() 이지만 앞서말한바와같이window는생략해도되므로open() 자체만써도된다는것이다. 만일window객체를생략해버리면JavaScript 를배우려는경우어떤것에는객체가있고어떤것에는없으므로메쏘드또는속성이라든가하는개념을가지는것이힘들게된다. 객체가씌여져있지않은것은최상위객체인window를생략한경우이거나아니면 함수이다. -JavaScriptwindow객체의속성 속성은 속성이름 =" 정의값 " 의형식으로정의해준다.인용부호를넣지않으면정의값자체를변수로취급하므로정의값을따로정의해주어야한다. window객체의속성은창문전체에관련된여러가지 상태띠나창문의이름값등에대한 설정을한다.말그대로페지자체의속성을정해주는역할을한다.물론window객체는생략할수도있다. 1상태띠기정통보문defaultStatus 상태띠는 창문하단의 작은 본문창을 말한다. 이것은 HTML꼬리표로는 표현할수 없다. window객체의 defaultstatus속성을 리용하면 상태띠에 원하는 문자를 넣을수 있다. 실례 : <scriptlanguage="javascript"> window.defaultstatus=" 나는할수있다 " </script> 63

65 동적웨브페지작성법 우의코드를실행한다음상태띠를보면 나는할수있다 의문자가출력된것을 알수있다. defaultstatus속성으로설정한본문은상태띠의기정통보문으로되므로하이퍼련결에마우스를올려놓으면url이표시되였다가도마우스를떼면다시설정된본문이나타나게된다. 2상태띠통보문status 상태띠의 통보문을 줄수 있는 속성이다. 주로 사건조종과 같이 쓰이는데 간단한 실례를보기로하자. 실례 : <scriptlanguage="javascript"> functionabcd(){window.status=" 내나라제일로좋아!"} </script> <a href= onmouseover="abcd();return true"> 내나라!</a> 함수를실행하는방법은다음과같다. function함수이름 (){JavaScript구문} 함수이름을 abcd라고 하면 abcd() 가 실행되였을 때 중괄호 {} 안의 구문이 실행된다.중괄호안의 내용은 또 다른 작은 HTML문서라고 생각하면 된다. 거기에는 꼬리표,CSS,JavaScript의구문이들어갈수있다. 3기타속성들 windows: 현재활성화되여있는창문을말한다.창문이름을지정할수도있다. name: 창문이름을지정한다.windows와같다. self: 현재사용중인객체를지정한다. opener: open() 메쏘드로 열린 창문의 이름을 지정한다. 이름을 지정하는 리유는마지막에목표지정을편리하게하기위해서이다. frames:window객체가가진프레임에대한정보를나타낸다. length: 프레임을분할하였을때의프레임의개수를나타낸다. -JavaScriptwindow객체의메쏘드 1open() 메쏘드 새로운창문을여는메쏘드이다. 형식은다음과같다. window.open(" 새로열게될주소 ", " 열게될문서의이름 "," 기타선택항목 ") 64

66 제 3 장. JavaScript 언어 window객체의메쏘드이므로window.open()또는open() 으로써준다. 괄호안에 아무 내용을 넣지 않으면 단순한 빈창문을 열게 되고 URL을 넣으면 해당 주소로이동하게된다.이때인용부호를반드시써주어야한다. 실례 : <scriptlanguage="javascript">  </script> 실례 : <scriptlanguage="javascript">  </script> 두번째인용부호의"univ" 에서 univ라는이름을가진창이이미있을경우에는거기에서 내나라 홈페지로 이동한다. univ라는창이없을경우에는새창을열고 내나라 홈페지를현시한다. 련결을할때target="small" 로하면그창에서련결이된다는뜻이다. 세번째인용부호의" 기타선택항목 " 에는다음과같은것이있다. Menubar(yes/no)-안내띠의현시유무를설정한다. Toolbar(yes/no)-도구띠의현시유무를설정한다. Location(yes/no)-주소표시칸의현시유무를설정한다. Status(yes/no)-상태표시줄의현시유무를설정한다. Scrollbar(yes/no/auto)-흘림띠의현시유무를설정한다. Resizable(yes/no)-크기를조정할수있는가를설정한다. Width( 수자,단위는px)-너비 Height( 수자,단위는px)-높이 실례 : window.open(" crollbars=yes") 라고 한다면 라는 주소를 가진곳을 가로 150px와 세로 150px, 흘림띠는 주고 univ의 이름으로 띄우라는 명령이다. 65

67 동적웨브페지작성법 width=150,height=150 처럼매선택항목들사이에는반점 (,) 을넣는다. 강제로띄우지않고무엇인가를찰칵하여띄우게할수있다.이것을실현하자면open() 메쏘드를함수속에포함시키면된다.그리고함수가호출될때에만open() 메쏘드가실행되도록하면된다.물론함수도강제로호출이되는경우가아니라찰칵을한다든지기타다른메쏘드로호출되도록해야한다.이렇게하는것을사건조종이라고한다. 실례 : <scriptlanguage="javascript">  </script> <ahref="javascript:abcd()"> 내나라 </a> 2close() 메쏘드 open() 과는 반대로 창문을 닫는 역할을 하는 메쏘드이다. 괄호안에는 내용을 넣어줄필요가없다. 실례 : <scriptlanguage="javascript">  </script> 강제로닫지않고무엇인가를찰칵하는방법으로닫게할수도있다.그것은우에서 보여준것과같은사건조종원리를리용하면된다. 실례 : <scriptlanguage="javascript">  </script> <ahref="javascript:abcd()"> 창닫기 </a> 3alert() 메쏘드 window객체의alert메쏘드는경고창이나타나게하는역할을한다. 66

제 3 장. JavaScript 언어 그림 3-1.alert() 메쏘드 alert메쏘드는 우의 그림과 같이 경고창이 나타나게 함으로써 작성자의 의견을 전달한다. 쌍방의 의견이 오가는 comfirm메쏘드나 prompt메쏘드와는 조금 다르다. 그러므로alert() 의괄호안에는현시내용만을입력하면된다.

68 제 3 장. JavaScript 언어 그림 3-1.alert() 메쏘드 alert메쏘드는 우의 그림과 같이 경고창이 나타나게 함으로써 작성자의 의견을 전달한다. 쌍방의 의견이 오가는 comfirm메쏘드나 prompt메쏘드와는 조금 다르다. 그러므로alert() 의괄호안에는현시내용만을입력하면된다. 실례 : <scriptlanguage="javascript">  </script> 실행화면을열자마자경고창이나타나는데이렇게alert() 는첫화면부터무조건적인실행을하기때문에공개내용이나주의사항을나타낼때자주리용된다. 경고창이무턱대고나타나지않도록하려면사건조종을리용하여야한다.즉단추를 누르거나마우스로지적하여야경고창이나타나도록하게하는것이다. 실례 : <scriptlanguage="javascript">  </script> <ahref="javascript:abcd()"> 찰칵 </a> 우의실례를실행시키고찰칵하면경고창이뜬다. 실례 : <scriptlanguage="javascript">  </script> 67

69 동적웨브페지작성법 <ahref="javascript://"onmouseover=abcd()> 마우스를여기에 </a> 실례는 마우스를 가져가기만 하면 경고창이 나타나도록 하는 사건조종을 리용하여 실현한것이다. 마우스를 가져가면 그림이 변하는것은 바로 이러한 원리를 리용한것들이다. 4confirm() 메쏘드 confirm메쏘드는 상대방의 의견을 물어보는 기능을 수행한다. alert메쏘드가 내용만을전달한다면confirm메쏘드는선택의가능성을주는메쏘드이다. 그림 3-2.confirm() 메쏘드 confirm() 의괄호안에현시내용을넣는다. 실례 : <scriptlanguage="javascript">  </script> confirm자체만으로는 확인 단추를 찰칵해도 취소 단추를 찰칵해도 아무 반응이없다.그러므로confirm은특성상if-else명령문과같이쓰이는경우가많다. if(){}else{} 명령문은 만일if괄호안의값이라면그다음에있는중괄호({}) 안의 내용을수행하고아니면else의중괄호 ({}) 안의내용을수행하라 는것이다.{} 안에는요구하는 구문을 넣으면 된다. 실례를 들어 if(a==1){document.write(" 좋다 ")}else {document.write(" 싫다 ")} 명령문은a의값이1이면 좋다 라는글자를출력하고1 이아니라면 싫다 라는글자를출력하도록한다. 실례 : <scriptlanguage="javascript"> <!-- a=1 if(a==1){document.write(" 좋다 ")}else{document.write(" 싫다 ")} 68

70 제 3 장. JavaScript 언어 --> </script> a=1이라고미리정해주므로if문의내용이실행된다. a=1은vara=1이라고써주어도된다.이것을 선언 이라고한다. 다음a의값을선택에따라다르게설정해보자. 실례 : <scriptlanguage="javascript">  </script> 바로 이런 경우에 confirm() 메쏘드를 쓰는것이 편리하다. confirm() 은 확인을 누르면 true로, 취소를 누르면 false로 인식한다. 이것을 a라는 변수로 확정하고 if-else구문을 리용하여 a가 true라면 즉 확인 단추를 찰칵하면 좋다 를 출력하고그렇지않으면 싫다 를출력한다. 실례 : 실례 : <scriptlanguage="javascript">  </script> <scriptlanguage="javascript">  69

71 동적웨브페지작성법 </script> 5prompt() 메쏘드 prompt메쏘드란 띠를 나타나게 하여 그 내용을 즉시 처리하려고할 때 쓰는 메쏘드이다.confirm메쏘드가 확인, 취소 의객관형식이였다면prompt메쏘드는 임의의문자를넣을수있는주관형식이다. 그러므로 prompt메쏘드로는 입력부분에 문자를 미리 입력해놓을수 있다. 그것은 prompt(" 현시내용 "," 입력창에현시내용 ") 과같이입력하면된다. 실례 : <scriptlanguage="javascript">  </script> prompt() 의 기능은 단순히 입력창을 만들어주는것에 불과하다. write() 메쏘드 괄호안에그것을넣으면된다. () 괄호안에는CSS,JavaScript구문도넣을수있다. 실례 : <scriptlanguage="javascript">  </script> 괄호 () 안에 JavaScript구문을 넣을 때에는 인용부호를 넣지 않아도 되지만 꼬리표나일반적인본문을넣을때에는인용부호를넣어야한다. 이번에는alert() 에넣어보자. 실례 : <scriptlanguage="javascript">  </script> 입력한내용이alert의경고창에나오게된다. 70

72 제 3 장. JavaScript 언어 실례 : <scriptlanguage="javascript">  </script> 6setTimeout() 메쏘드 settimeout() 메쏘드는window객체의메쏘드로서일정한시간이지나면자동적으로 다시적재해주는기능을수행한다.문서자체를다시적재할수도있으며자그마한그림만다시적재할수도있다.물론그메쏘드는함수나기타JavaScript 구문으로조종한다. 형식은다음과같다. settimeout("javascript구문 ", 시간 ) JavaScript구문에는다시적재할목표를넣으면된다.그리고그뒤의시간은다시 적재를하는시간인데그단위는1/1000s로정해져있다.따라서300으로주면0.3s에 한번씩다시적재한다. 실례 : <scriptlanguage="javascript">  </script> 1s가지나면 안녕하십니까 가출력되도록한구문이다. settimeout() 의 인용부호와 write() 의 인용부호를 한 구문에 같이 쓰므로 구별해주어야한다. 실례 : <scriptlanguage="javascript"> 71

73 동적웨브페지작성법  </script> 이것을실행하면2s후에자동으로닫긴다. 실례 : <scriptlanguage="javascript"> functionabcd(){ today=newdate() document.title = " 지금 시각 " + today.gethours() + " 시 "+ today.getminutes()+" 분 "+today.getseconds()+" 초이다." settimeout("abcd()",1000) } </script> <bodyonload="abcd()"> 이실례를실행하면창문제목띠에현재시간이나온다. 이코드의내용을구체적으로보기로하자. 우선 <body> 꼬리표에서 강제로 abcd() 라는 함수를 호출하면 호출된 함수는 document.title에 의해 제목띠에 문자를 표시한다. 여기서 date객체에 의한 gethours(), getminutes(), today.getseconds() 의 값을 얻어서 창문의 제목띠에 현재시각을 나타내도록 하고있다. 또한 settimeout("abcd()", 1000) 에 의해서 1s에 한번씩 abcd() 함수를 계속 다시 적재하게 함으로써 현재시각이 1s에 한번씩 새로 표시된다.따라서결과적으로제목띠가시계처럼계속변하게되는것이다. document.title이 아니라 window.status로 한다면 상태띠에 현재 시간이 나타난다. 실례 : <scriptlanguage="javascript"> <!-- varpos=0 vara=0 varmessage=newarray() message[0]="htmltutor에온것을환영합니다." message[1]="javascript가어렵습니까?" functionabcd() 72

74 제 3 장. JavaScript 언어 { a=a+1 document.title=message[pos].substring(0,a) if(a==message[pos].length+5) { pos=pos+1 a=0 } if(pos>1) { pos=0 } settimeout("abcd()",200) } --> </script> <bodyonload="abcd()"> date 객체 date() 객체는 문자그대로 날자와 시간에 관한 정보를 포함하는 객체이다. date객체는콤퓨터에이미내장되여있는시간정보를알아내는데자주사용된다. 여기서 중요한것은 여러가지 객체는 document.write() 나 window.open() 와 같은 형식으로 객체의 바로 뒤에 메쏘드나 속성이 붙었지만 date객체는 date.gethours() 형식으로 뒤에 메쏘드나 속성이 붙지 않는다는것이다. 따라서 date객체를대신할변수가필요하게되는데우의실례에서본today변수가바로그러한 변수이다.이것을객체의선언이라고한다. 이렇게 하여 today라는 변수가 앞으로는 date객체의 역할을 대신하게 된다. 여기서는 메쏘드를 붙일수 있다. 즉 today.gethours() 라고 써주면 된다. 물론 메쏘드의선언도할수있다. var hour = today.gethours() 은 hour라는 변수가 gethour() 메쏘드를 대신한다는뜻이다.물론new연산자는제외한다. 현재년도를 알아내는 getyear() 메쏘드도 있다. 날자와 관련된 정보는 열람기에 표시해서 알아내는 용도로 많이 쓰이게 된다. 따라서 문서의 표현과 관련된 document.write() 와함께사용된다. 73

75 동적웨브페지작성법 실례 : <scriptlanguage="javascript">  </script> 이 실례에서는 date객체에 직접 메쏘드를 붙일수 없으므로 today라는 변수로 대신하고 여기에 getyear() 메쏘드를 붙여 today.getyear(), 즉 현재년도를 나타내고있다. 그러면 메쏘드들에 대하여 보기로 하자. 메쏘드들에서는 대소문자를 구별하여야 한다. 1getYear():현재년도를얻기 2getMonth():현재달을얻기 ( 값이0이면1월,1은2월,...11은12월) 3getDate():현재날자를얻기 4getDay():현재요일를얻기 ( 값이0이면일요일,1은월요일,...6은토요일) 5getHours():현재시간의시만을얻기 6getMinutes():현재시간의분만을얻기 7getSeconds():현재시간의초만을얻기 실례 : <scriptlanguage="javascript">  </script> 차례대로 년, 월, 일, 요일, 시, 분, 초를 얻는다. getmonth() 뒤에 하나를 더한것은0의값이1월이고1의값이2월이므로메쏘드값과달을맞춰주기위해서이다. 74

76 제 3 장. JavaScript 언어 이번에는우의메쏘드들을모두변수로바꾸어보자 실례 : <scriptlanguage="javascript">  </script> 선언의 개념을 알고 이와 같이 메쏘드나 객체를 변수로 지정해주면 긴 구문을 작성할때편리하다. 실례 : <scriptlanguage="javascript"> <!-- vartoday=newdate() vara=today.getday() if(a==0){varb=" 일요일 "} if(a==1){varb=" 월요일 "} if(a==2){varb=" 화요일 "} if(a==3){varb=" 수요일 "} if(a==4){varb=" 목요일 "} if(a==5){varb=" 금요일 "} 75

77 동적웨브페지작성법 if(a==6){varb=" 토요일 "} document.write(" 오늘은 "+b) --> </script> 이렇게 많은 객체와 메쏘드, 선언, 함수 등을 섞어서 어려운 효과도 낼수 있게 하는것이바로JavaScript이다. 제3절.JavaScript자료형과연산자 자료형 JavaScript뿐만아니라 많은 프로그람언어는 문자렬이나 수값 등의 값을 다른 형식으로표시할수있다. -문자렬형 JavaScript에서는 두점인용부호 ( ) 혹은 인용부호 ( ) 안에 있는 값을 문자렬로 취한다. 실례 : 123 konnichiha 문자렬 -수값형 수값에는정수형과류동소수점형이있다. 정수형 정수로는8진수,10진수,16진수를사용할수있다. 실례 : 0514,156,0x11 류동소수점형 류동소수점은소수점을점 (.) 으로서표시한10진수,또는 지수를말한다. -론리값형 론리값이란설정한값이나식이참인가거짓인가에따라표시되는값이다. 참은 값이나 조건식이 옳거나 혹은 조건에 맞을 때를 의미하며 거짓은 식이나 조건식이 옳지 않거나 혹은 조건에 맞지 않을 때를 말한다. 참은 true, 거짓은 false라는값으로서표시된다. 론리값을 리용하여 어떤 식이 true일 때에는 처리 A를 진행하고 false일 때에는 처리B를진행한다. -null값형 76

78 제 3 장. JavaScript 언어 null값은값이아무것도설정되여있지않을때나미정일때를표시한다. 실례 : Window객체의onError사건에null값을설정하자. 이스크립트를HTML문서의제일처음에서술하면스크립트에문제가있어오유가 생겼다고해도열람기에는오유창문이표시되지않게된다. 즉 <scriptlanguage= JavaScript1.2 >  </script> 연산자 프로그람작성에서는 여러가지 값을 더하거나 덜거나 일정한 조건에서 계산하는 처리를진행할수있다.또한비교나선택과같은처리도진행한다.이와같은식표현에 리용하기위한기호를연산자라고말한다. JavaScript에서쓰이고있는연산자들은다음과같다. -산수연산자 표 3-2. 산수연산자 기호 = + - * / % 역할 변수에값을대입 더하기 덜기혹은부의값을표시 곱하기 나누기 나누기에서나머지가나왔을때에는 소수점아래를자르고값을현시 값을하나증가한다. 값을하나감소한다. 실례 : <scriptlanguage= JavaScript > <!-- 77

79 동적웨브페지작성법 a=1+2; document.write(a); //--> </script> -비교연산자 량쪽의값을비교하기위한연산자를비교연산자라고한다. 량쪽의값을비교하고참인경우true,거짓인경우false의값이얻어진다. 표 3-3. 비교연산자 문법 연산결과가true인경우의의미 x==y x는y와같다. x!=y x는y와같지않다. x<y x는y보다작다. x<=y x는y보다작거나같다. x>y x는y보다크다. x>=y x는y보다크거나같다. -론리연산자 량쪽의값을론리적으로비교하기위한연산자를론리연산자라고한다.례를들면 x&&y라는 식은 x와 y의 값이 참일 때에만 true로 되고 그 외에는 거짓 (false) 으로 된다. 식을 x y라고 쓴 경우는 x와 y값이 둘다 참인 경우 또는 하나가 참인 경우 true로된다. 식x!y라고씌여진식은x와y값이거짓 (false) 일때에true이다. 표 3-4. 론리연산자 문법 의미 x&&y x그리고y(and) x y x혹은y(or) x!y x는y가아니다.(not) -문자렬연산자 + 기호를 문자렬과 문자렬사이에 사용하면 그 문자렬은 하나로 련결된다. 문자렬을련결하는이연산자를문자렬연산자라고한다. 78

80 제 3 장. JavaScript 언어 표 3-5. 문자렬연산자 문 법 의 미 문자렬 A + 문자렬 B 문자렬 A 와 문자렬 B 를 련결하다. a+= 문자렬 B a 의 뒤에 문자렬 B 를 추가하다. -비트연산자 콤퓨터안에서는모두0과1의비트단위로처리되고있다. 비트연산자는비트단위로처리를진행하기위한연산자이다. 표 3-6. 비트연산자 기호 역할 ~ 비트의반전 & 비트의론리적 (AND) 비트의론리합 (OR) ^ 비트의배타적합 (XOR) << 비트의왼쪽밀기 >> 비트의오른쪽밀기 >>> 비트의론리오른쪽밀기 <<= 비트의왼쪽밀기의대입 >>= 비트의오른쪽밀기의대입 >>>= 론리오른쪽밀기의대입 -typeof() 연산자 typeof() 연산자는수값,문자렬,변수,오브젝트등의형을얻어내는연산자이다. JavaScript1.1에서부터추가되였다. 실례 : <scriptlanguage= JavaScript > <!-- varsuuzi=123 varmozi= 오늘은 varkye=null vartoday=newdate() 79

81 동적웨브페지작성법 varkan=blur document.write(typeof(suuzi)+ <br> ) document.write(typeof(mozi)+ <br> ) document.write(typeof(kye)+ <br> ) document.write(typeof(today)+ <br> ) document.write(typeof(kan)+ <br> ) document.write(typeof(muimi)) //--> </script> -void() 연산자 void() 연산자는 되돌림값이 없는 식이나 함수를 처리하는 연산자이다. JavaScript1.1에추가되였다. 실례 : <a href= javascript:void(kansuu()) > 이 문자를 누르면 kansuu() 가 발생한다.</A> 연산자의우선순위는다음과같다.여기서행에놓이는연산자들은같은우선순위를 가진다. (),[]!,~,++,--,typeof,void *,/,% +,- <<,>>,>>> <<=,>>= ==,!= & ^ &&?: =,+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,^=, = 80

82 제 3 장. JavaScript 언어 조건분기명령문 제 4 절.JavaScript 명령문들 if문은어떤조건에관한처리를진행할때사용한다. 기본형식은다음과같다. if( 조건식 ){ 처리1} else{ 처리2} if문은조건식이참 (true) 일때에 처리1 을진행하고그외에는 처리2 를 진행한다. 조건이 여러개인 경우에는 if( 조건식 ){ 처리1} 를 여러개 결합하여 처리한다. 그리고괄호{} 은생략할수도있다. 만일 조건식에 맞지 않을 때 아무런 처리도 하지 않도록 하자면 else의 처리를 생략하면된다. 실례 : <scriptlanguage= JavaScript >  </script> if문은다음과같이여러개동시에쓸수있다. if( 조건식 A){if( 조건식 B){ 처리 1}} else{ 처리 2} 선택명령문 어떤 조건이 있고 그것이 참 (true) 일 때와 거짓 (false) 일 때에 서로 다른 처리를 진행하도록할수있다. 그형식은다음과같다. 조건식?x:y 81

83 동적웨브페지작성법 실례 : <scriptlanguage= JavaScript >  </script> -switch문 switch문은 처리에 표식 을 설정하고 값 과 매 표식 을 비교하여 참 (true) 으로되면그 표식 의처리를실행한다.만약참(true) 으로되는 표식 이 없는경우는 default: 의처리를실행한다. 형식은다음과같다. switch( 값 ){ case표식a: 처리 ; break; case표식b: 처리 ; break;... default: 처리 ; } 순환명령문 -for명령문 이 명령문은 증감식을 설정하고 그것에 따라서 어떤 조건을 만족할 때까지 같은 처리를반복진행하도록하는경우에사용한다. 형식은다음과같다. for( 초기값 ;조건식;증감식){ 처리 } 82

84 제 3 장. JavaScript 언어 for문은 증감식에 따라서 값이 변경되며 조건식이 참 (true) 일동안 처리를 반복진행한다. for문이나 while문, do while문 등은 일정한 조건이 만족될 때까지 반복처리를 진행하도록하는명령문이므로증감식과조건식의정합성에주의를돌려야한다. 례를 들어 for(i=1; i<=10; i--) 라고 하면 조건식은 참으로 될수 없고 반복조작처리를끝낼수없으며그결과체계가파괴되는현상이나타날수있다. -while명령문 이명령문은어떤조건식을만족할때까지같은처리를반복하는경우에사용한다. 형식은다음과같다. While( 조건식 ){ 처리 } 이경우조건식이참 (true) 인동안처리를반복진행한다. 실례 : <scriptlanguage= JavaScript >  </script> -dowhile명령문 이 명령문은 while명령문과 거의 류사하며 다른점은 while명령문처럼 조건식의 값을 먼저 판단하는것이 아니라 무조건 먼저 처리부분을 집행한 다음 조건식의 값을 판단한다.즉처리부분이적어도한번은집행된다. 형식은다음과같다. do처리 while( 조건식 ); 실례 : <scriptlanguage= JavaScript1.2 > <!-- vari=1; do{ 83

85 동적웨브페지작성법 document.write( 이문장을10번씁니다.: +i+ 번째 <br> ); i++; }while(i<=10); //--> </script> -break명령문 이명령문은for문이나while문에서사용한다.break명령문을반복조작( 순환 ) 처리를진행하는부분에넣고어떤조건이참 (true) 으로되면순환에서탈퇴하는처리를진행할수있다. 실례 : <scriptlanguage= JavaScript >  </script> -continue명령문 이명령문은for문이나while문등에서반복조작 ( 순환 ) 처리를진행하는도중에설정한조건이참 (true) 으로되였을때에만continue아래의처리를뛰여넘어서진행한다.continue는처리를중단시키지는못하므로련속하여반복조작처리가계속된다. 실례 : <scriptlanguage= JavaScript > <!-- for(i=1;i<=10;i++){ if(i==5) continue; document.write( 이문장을10번씁니다 : +i+ 번째에서도 <br> ); } document.write( <br>continue가있으므로5번째가없습니다.<br> ); 84

86 제 3 장. JavaScript 언어 //--> </script> -표식을붙여순환고리나조건분기명령문에서탈퇴하기 먼저표식명을입력하고break나continue명령문에의해if문이나순환문으로부터 빠져나올때지적한표식명을지정하여명시적으로탈퇴하는장소를지정할수있다. 형식은다음과같다. 표식명 : 식 break표식명 ; 표식명 : 식 continue표식명 ; -return명령문 이명령문은명령문안에서값을돌려줄때에사용한다. 형식은다음과같다. return값 실례 : <ahref=../../home.html onmouseover= window.status= 상태행에 통보가나오다. ;returntrue > 이문장우에마우스를가져가면 </a> 마우스를 해당 위치에 가져다 놓을 때 onmouseover에 따라서 사건이 취급되며 상태띠에 문자를 표시하는 처리에 대하여 참 (true) 의 값을 주므로써 창문의 상태띠에 문자를표시한다 객체의 생략문 (with) 과 참조문 (this) -생략문with with문은객체를생략할때에사용한다. 형식은다음과같다. with( 객체 ){ 처리 } 실례 : <scriptlanguage= JavaScript > <!-- 85

87 동적웨브페지작성법 with(document){ write( 이문장은document를<br> ); write( 생략하고있다.<br> ); } //--> </script> 원래 document.write() 라고 서술하여야 하겠는데 실례에서는 with를 사용함으로써 document. 부분을생략하고있다. -참조문(this) this는현재객체에대한인용을말한다.이것을통해객체에접근할수있다. 실례 : <html> <head> <title></title> <scriptlanguage= JavaScript >  </script> </head> <body> 이름을입력하십시오.<br> <formname= name > <inputtype= text name= Namae onblur= Namae(this.value) value= > </form> </body> </html> 86

88 제 3 장. JavaScript 언어 제5절.응용실례( 달력만들기 ) <html> <head> <scriptlanguage= JavaScript > <!-- // 시간을오전 / 오후로열람기에보여줄수있게해준다. functionget_time() { varnow=newdate() varhour=now.gethours() varminute=now.getminute() varampm now=null if(hour>=12){ hour-=12 ampm= 오후 }else ampm= 오전 hour=(hour==0)?12:hour if(minute<10) minute= 0 +minute returnampm+hour+ : +minute } //년과달을받아서마지막날자를알아낸다. functionget_day(year,month) { varlast_mon=newarray(31,29,31,30,31,30,31,31,30,31,30,31) varmon2 if(year%4==0) Mon2=true else Mon2=false Last_Mon[1]=(Mon2)?29:28 87

89 동적웨브페지작성법 returnlast_mon[month] } //<table> 을리용하여달력을만들어준다. FunctiondrawCal(firstDay,lastDate,date,year,monthName) { vartext= text+= <center> text+= <table> text+= <thcolspan=7bfcolor=#f0f0f0> text+= <fontcolor=midnightbluesize=+3> //년과월을출력합니다. text+=year+ 년 +(monthname+1)+ 월 text+= </font> text+= </th> varopencol= <tdbgfcolor=#ffefffwidth=45height=40> opencol+= <fontcolor=darkblue> varclosecol= </font></td> text+= <tralign=centervalign=center> varweekday=newarray ( 일, 월, 화, 수, 목, 금, 토 ) //달력의일,월,화,수,목,금,토요일을출력한다. for(vardaynum=0;daynum<=6;daynum++) text+=opencol+weekday[daynum]+closecol text+= </tr> vardigit=1 varcurcell=1 // 달력표를만들어줍니다. for(varrow=1;row<= Math.ceil((lastDate+firstDay 1)/7);++row) { text+= <tralign=rightvalign=topbgcolor=#ffefee> for(varcol=1;col<=7;col++) if(digit>lastdate)break if(curcell<firstday) 88

90 제 3 장. JavaScript 언어 { text+= <td> </td> curcell++ } else { if(digit==date) { text+= <tdheight=40> text+= <fontcolor=red> text+=digit text+= </font><br> text+= <fontcolor=purplesize=2> text+= <center> +get_time()+ </center> text+= </font> text+= </td> } else text+= <tdheight=40> +digit+ </td> text+= <tdheight=40> +digit+ </td> digit++ } } text+= </tr> } text+= </table> text+= </center> returntext } //--> </script> </head> <body> <scriptlanguage= javascript >> 89

91 동적웨브페지작성법  </script> </body> </html> 90

92 제 4 장. ASP 언어 제 4 장.ASP 언어 제 1 절.ASP 언어의 기초 ASP 에 대한 일반개념 ASP(Active Server Page) 란 VBScript 를 기반으로 하는 봉사기측스크립트를 실현하고이ServerScript 로자료기지나다른외부부분품들을불러들여강력한홈페지를 구축하는웨브봉사기기술의한가지로서동적인웨브페지를작성할수있다. 이전의 스크립트들은 모두 의뢰기에서 실행되였다. 즉 봉사기는 단순히 의뢰기에 스크립트원천프로그람을 전송해주며 이것을 전송받은 의뢰기는 열람기에 스크립트를 분석하여처리하여주었다.그런데열람기들은모든스크립트들을다리해하지는못한다. 다시 말하여 열람기마다 리해할수 있는 스크립트가 다르다. 실례로 Java Script는 Netscape나 Internet Explorer가 다 처리할수 있지만 VBScript는 Internet Explorer만이처리할수있다. 또한의뢰기측스크립트파일들은모두공개되여있다. 지정된 주소에 있는 일반 HTML문서들은 단순히 봉사기에 의해 의뢰기측에 전송되여현시된다.( 그림4-1) 일반웨브 의뢰기봉사기 HTML 문서 웨브열람기 URL을보내면URL에해당하는 HTML파일을바로전송 HTML 파일 그림 4-1. 일반 HTML 문서봉사형식 91

동적웨브페지작성법 ASP는 Microsoft회사에서 나온 웨브봉사기인 IIS(Internet Information Server: 인터네트정보봉사기 ) 에 확장모듈로 내장되여있다. 요청이 들어오면 이 봉사기에서처리하여그결과를HTML문서로변환하여열람기에전송한다. 그과정을그림4-2에보여주었다. http://www.kimyong.pe.

93 동적웨브페지작성법 ASP는 Microsoft회사에서 나온 웨브봉사기인 IIS(Internet Information Server: 인터네트정보봉사기 ) 에 확장모듈로 내장되여있다. 요청이 들어오면 이 봉사기에서처리하여그결과를HTML문서로변환하여열람기에전송한다. 그과정을그림4-2에보여주었다. 의뢰기 인터네트 정보봉사기 HTML 문서 ASP 웨브열람기 URL에해당하는ASP파일을처리한다음 HTML형태로바꾸어그결과를전송 ASP 파일 자료기지 그림 4-2.ASP 문서봉사형식 ASP 의특징 첫째로, ASP는 Microsoft회사에서 만든 스크립트엔진으로서 항상 같은 내용만을 보여주는 일반 HTML문서와는 달리 사용자의 요구에 따라 봉사해줄수 있는 동적인 웨브페지를구축할수있다. 둘째로, ASP는 NT에 설치되는 웨브봉사기인 IIS(Internet Information Server) 에서동작한다.만일NT가설치되지않은콤퓨터인경우에는PWS(Personal WebServer) 를더설치하여야한다. 셋째로,VBScript를기본으로만들어진강력한봉사기측스크립트로서사용자에게는 일반 HTML코드내용만이 보여지고 봉사기측스크립트부분은 볼수 없게 되여 보안측면에서아주유리하다. 넷째로, 기본적으로 제공되는 ADO부분품을 리용하여 단순히 메쏘드를 호출하는 방식으로자료기지에접근하므로자료기지를사용하기쉽다. 92

94 제 4 장. ASP 언어 제 2 절.ASP 언어의 문법 변수와상수,배렬,함수 변수는 어떤 값을 담아두는 그릇처럼 자주 변하는 프로그람정보를 저장할수 있는것을말한다. VBScript에서는 기본적으로 Variant형변수를 사용한다. 이 Variant형변수는 사용방법에 따라 여러가지 자료형의 정보를 저장할수 있다. 즉 Variant 형변수는 수값을 저장하면수값형변수로되고문자렬자료를저장하면문자렬형변수로된다. 여러가지류형의변수가있다.( 표4-2) 표 4-1. 변수종류 종 류 의 미 integer ~32768사이의옹근수 double 배정확도실수형 single 단정확도실수형 byte 0~255사이의정수 currency 화페형 long ~ 사이의 옹근수형 string 문자렬형 boolen true나false만을가지는론리형 datetime 날자시간형 empty 변수값이주어지지않은형 null 자료값이주어지지않은형 변수선언은 Dim을 리용하는 방법과 암시적으로 선언을 하지 않고 직접 변수를 리용할수도있으며OptionExplicite 명령을리용할수도있다. Dim으로변수선언을 진행하면프로그람의유지및 보수,오유도쉽게 찾을수있다. 실례 : DimTeamType TeamType= Nolja OptionExplicite명령을리용하여변수선언을하는경우ASP스크립트의첫문장에 표기하여야하며 철저히 변수를사용하기전에는 Dim으로 변수선언을 하여야 한다. 이 93

95 동적웨브페지작성법 방법을리용하면코드실행속도를저하시키는요소를추적하기쉽다. 실례 : <%OptionExplicit DimintA,intB,intT,intC inta=20 intb=30 intc=30 intt=inta+intb-intc Response.WriteintT %> 배렬을 리용하면 한개의 변수에 여러개의 관련자료들을 저장할수 있으며 매개 값들은 첨수번호에 의해 구분된다. 배렬 역시 Dim으로 선언하며 항목개수를 먼저 지정했으나 이 값들을 바꿀 필요가 있을 때 ReDim을 리용하여 재선언한다. 자료를 보존하고 있는채로 배렬의 크기를 변화시키려면 ReDim과 함께 Preserve를 함께 사용하면 된다. 배렬은 다차원배렬도 지원하는데 현실적으로 2차원, 3차원배렬이 가능하다. 실례 : <html> <head> <title> 배렬실례 </title> </head> <body> <P> 여기우리형제들의이름이있습니다.</p> <% DimstrBrother() RedimstrBrother(4) strbrother(0)=" 영철 " strbrother(1)=" 영남 " strbrother(2)=" 영호 " strbrother(3)=" 영식 " Response.Write"<p><b>" ForintNum=0to3 Response.WritestrBrother(intNum)&"..." Next 94

96 제 4 장. ASP 언어 Response.Write"</b></p>" Response.Write"<p> 막내이름이빠졌군!</p>" RedimPreservestrBrother(5) strbrother(4)=" 영선 " Response.Write"<p><b>" ForintNum=0to4 Response.WritestrBrother(intNum)&"..." Next %> </b></p> </body> </html> 상수는 프로그람에서 값을 할당받으면 변하지 않는 수로서 const를 사용하여 상수를정의하며이름은대체로대문자로쓴다. 실례 : ConstCOUNTNUM=37 문자렬을 처리하는 함수들은 Lcase() 와 Ucase() 들이며 문자렬길이를 얻는 함수 Len(), 문자렬의몇개문자추출함수인Left(string, 문자개수 ) 와Right(string, 문자개수 ),문자렬의중간부분추출함수인Mid(string, 문자위치,추출문자개수),특수한단어찾기함수인InStr(string, 찾을단어 ),InStraRev(string, 찾을본문 )등문자렬관련함수들이여러가지가있다. 함수의표시형식은다음과같다. Function함수명( 인수값 ) 명령문 함수명 = 일정한식 EndFunction 인수값이없으면빈괄호,인수값이여러개이면반점으로구분한다. 함수이름다음의괄호안에귀환값을입력함으로써함수호출변수에함수의귀환값을 지정할수도있다. 95

97 동적웨브페지작성법 실례 : <html> <head> <title> 함수 </title> </head> <body> <% FunctionUsedDate(varCKout) UsedDate=varCKout+15 endfunction %> <h2> 보름후의날자를알려준다.</h2> <% CKout=date() varusing=useddate(ckout) Response.Write" 오늘은"&CKout Response.Write" 이고 " Response.Write"<br>보름후의날자는"&varUsing Response.Write"이다." %> </body> </html> 연산자 대입연산자는 변수를 선언할 때 변수에 값을 할당하는 연산자이다. 대입연산자는 = 이다. 형식은다음과같다. 변수이름=변수값 실례 : <%DimNum1,strNum1,strNum2 Num1=2 strnum1=num1 Response.WritestrNum1&"<br>" Num1=Num1+1 strnum2=num1 96

98 제 4 장. ASP 언어 Response.WritestrNum2 %> 비교연산자는 비교연산을 진행하는 연산자로서 비교연산결과는 량변의 비교식의 결과에따라true이거나false이며또는null일수도있다. null값은비교식중하나가null인경우이다. 표 4-2. 비교연산자 실례 : 연산자 의미 = 같다. <> 같지않다. < 보다작다. <= 보다작거나같다. > 보다크다. >= 보다크거나같다. <% DimNum1,Num2,Num3,Num4,strNum Num1=1 Num2=2 Num3=3 Num4=4 IfNum1<>Num2then Response.WriteNum1&" 과 "&Num2&" 는다름 <br>" endif IfNum3<=Num4then Response.WriteNum3&" 은 "&Num4&" 보다작거나같음 <br>" endif strnum=num3+1 IfstrNum=Num4then Response.WritestrNum&" 과 "&Num4&" 는같음 <br>" endif %> 97

99 동적웨브페지작성법 수식연산자에는다음과같은것들이있다.( 표4-3) 표 4-3. 수식연산자 연산자 의미 + 더하기 - 덜기 * 곱하기 / 나누기 ^ 제곱 - 부수 \ 정수나누기 MOD 나머지연산 실례 : <% DimNum1,Num2,Num3,Num4,NumT Num1=1 Num2=2 Num3=3 Num4=4 NumT=Num1+Num2 Response.WriteNum1&"+"&Num2&"="&NumT&"<br>" NumT=Num3-Num1 Response.WriteNum3&"-"&Num1&"="&NumT&"<br>" NumT=Num2*Num4 Response.WriteNum2&"x"&Num4&"="&NumT&"<br>" NumT=Num4/Num2 Response.WriteNum4&"/"&Num2&"="&NumT&"<br>" %> 론리연산자는한개또는그이상의수식에서값의참과거짓을판별하는연산자로서 여기에는AND,OR,NOT,EQV,IMP,XOR가있다.문자렬들을련결하는연산은 & 를리용하여한다. 98

100 제 4 장. ASP 언어 조종문 -If문 형식은다음과같다. 1If조건식then명령문 Endif 2 If조건식then 명령문1 명령문2 Endif 3 If조건식then 명령문1 명령문2 Else 명령문3 명령문4 Endif 4If조건식then 명령문1 명령문2 Elseif 명령문3 명령문4 Elseif 명령문5 명령문6 Endif 여기서 주의해야 할것은 End if 를 Endif 와 같이 붙여쓰면 오유가 발생한다는것이다. -선택문 SelectCase문은여러가지종류중에서선택을할필요가있을때사용한다.End Select로이문을끝낸다. CaseElse로특별한조건을작성할수도있다. 99

101 동적웨브페지작성법 실례 : <% SelectCasedropdown Case 1 Response.Write Desk Case 2 Response.Write Chair Case 3 Response.Write Book EndSelect %> 순환명령문으로서DoWhile Loop문,Do Until,For Next,ForEach Next 등이있다.여기서ForEach Next는배렬이나묶음안의각항목들에대해서순환할 필요가있을때사용한다. 100

제 4 장. ASP 언어 제3절.ASP의내장객체들 4.3.1.Request 객체 Request객체는 의뢰기가 페지를 요청하거나 홈을 보낼 때 묶음들에 의뢰기가 제공하는모든정보를저장하는객체이다. Request객체가가지고있는기능들은표4-4와같다. 표 4-4.

102 제 4 장. ASP 언어 제3절.ASP의내장객체들 Request 객체 Request객체는 의뢰기가 페지를 요청하거나 홈을 보낼 때 묶음들에 의뢰기가 제공하는모든정보를저장하는객체이다. Request객체가가지고있는기능들은표4-4와같다. 표 4-4. Request 의 기능 종 류 설 명 HTTP요청으로봉사기에전달된의뢰기인증서에 ClientCertificate 저장된값들의모임 Cookie HTTP머리부와함께전송된쿠키값 묶음 Form Post방법으로전송되여온HTTP요청의요소값 QueryString Get방법으로전송되여온값과URL의 HTTP요청문자렬의변수값 ServerVariables 봉사기에서참조되는HTTP머리부들및환경변수값 속성 TotalBytes 의뢰기가보내는HTTP요청의총바이트수 메쏘드 BinaryRead 홈에서Post방식으로봉사기에보내는자료를 불러들이는데사용 Request객체에서묶음의원소들을찾는순서는그림4-4와같다. 그림 4-4.Request 에서 묶음원소를 찾는 순서 101

모두 보기

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width