html 파ì�¼ ¶
<html> <head> <title>ì—ì „ìž¬íŒ�</title> <link rel='stylesheet' type='text/css' href='style.css' media='all'> </head> <body> <div id='basewindow'> <div id='chugoong'>ì¶”ê¶�하장</div> <div id='jesi'>ì œì‹œí•˜ìž¥</div> <div id='item_box'><span class='keyword'><br><br><br><br><br>hello</span></div> <div id='item_pic'></div> <div id='item_text'></div> <!--<div id='human'></div>--> <div id='name'> ì�´ë¦„ìž„ </div> <div id='text'> 글ìž�ê°€ 나오는 화면임. 혼잣ë§�ì�€ <span class='think'>(span ì�„ 사용했ì�Œ)</span><br> 키워드는 <span class='keyword'>키워드!!</span>ìš”ë ‡ê²Œ ã…Žã…Ž </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> ì—�ë®¬ë ˆì�´í„° 화면í�¬ê¸°ì�˜ x2 ìž„. </body> </html>
css 파ì�¼ ¶
#basewindow { /*기본 화면*/
width : 480px;
height : 320px;
background-color : black;
color : white;
position : absolute;
top : 0px;
left : 0px;
}
#text { /*대화창*/
width : 460px;
height : 75px;
background-color : royalblue;
padding : 10px;
position : absolute;
top : 225px;
left : 0px;
}
#human { /*사람 그림� 나올 화면*/
width : 256px;
height : 285px;
background-color : olive;
position : absolute;
top : 35px;
left : 116px;
}
#name { /*사람�름(�스트 위�)*/
width : 90px;
height : 25px;
background-color : gray;
position : absolute;
top : 200px;
left : 0px;
}
#chugoong { /*좌�단� 추�하기*/
width : 128px;
height : 32px;
background-color : gray;
position : absolute;
top : 0px;
left : 0px;
}
#jesi{ /*ìš°ìƒ�단ì�˜ ì œì‹œí•˜ê¸°*/
width : 128px;
height : 32px;
background-color : gray;
position : absolute;
top : 0px;
left : 352px;
}
#item_box { /*ì œì‹œí•˜ê¸°ë¥¼ ëˆŒë €ì�„때 나오는 ì•„ì�´í…œ 목ë¡�*/
width : 480px;
height : 150px;
background-color : green;
position : absolute;
top : 35px;
}
#item_pic { /*아�템 목� 안� 아�템 그림*/
width : 130px;
height : 130px;
background-color : transparent;
position : absolute;
top : 45px;
left : 10px;
}
#item_text { /*아�템 설명*/
width : 280px;
height : 130px;
background-color : skyblue;
position : absolute;
top : 45px;
left : 170px;
}
span.text { /*대화창ì�˜ 글ìž� ì†�성ì�„ ì§€ì •*/
color : white;
}
span.think { /*대화 중 주ì�¸ê³µì�´ 혼ìž� ë§�í• ë•Œì�˜ ì†�성ì�„ ì§€ì •*/
color : #FB84E9;
}
span.keyword { /*키워드ì�˜ ì†�성ì�„ ì§€ì •*/
color : red;
}
span.date { /*ë‚ ì§œì™€ 장소 ì¶œë ¥í• ë•Œì�˜ ì†�성*/
color : yellow;
}
대사 파ì�¼ì�„ 첨부한 HTML ¶
위� HTML파��다가 JavaScript를 �한것.
<html>
<head>
<title>ì—ì „ìž¬íŒ�</title>
<link rel='stylesheet' type='text/css' href='style.css' media='all'>
<!--여기서 부터 첨가한 부분.-->
<SCRIPT Language="JavaScript">
<!--
contents=new Array(); //대사 내용� 들어있는 javascript파� 안� 있는 배열� �름.
i=0;
function changetext(){ // 글�가 나오는 text부분� 내용� 바꾸는 함수.
document.getElementById('text').innerHTML = contents[i]
i++
}
--></Script>
<script language="javascript" SRC="./contents.js"></script> //대사 내용� 넣� javascript파�('contents.js')� 첨부.
<!--여기까지-->
</head>
<body>
<div id='basewindow'>
그냥 배경화면임
<div id='chugoong'>추�하장</div>
<div id='jesi'>ì œì‹œí•˜ìž¥</div>
<div id='item_box'></div>
<div id='item_pic'></div>
<div id='item_text'></div>
<div id='name'>
�름임
</div>
<div id='text' Onclick="changetext()">
글�가 나오는 화면임. 혼잣��
<span class='think'>(span � 사용했�)</span><br>
키워드는 <span class='keyword'>키워드!!</span>ìš”ë ‡ê²Œ ã…Žã…Ž
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
ì—�ë®¬ë ˆì�´í„° 화면í�¬ê¸°ì�˜ x2 ìž„.
</body>
</html>
= 대사파� (contents.js)=contents[0] = "내용1" contents[1] = "내용2" contents[2] = "내용3" contents[3] = "내용4" contents[4] = "내용5" contents[5] = "내용6" contents[6] = "내용7" contents[7] = "내용8" contents[8] = "내용9" contents[9] = "내용10" contents[10] = "내용11" contents[11] = "내용12" contents[12] = "내용13" contents[13] = "내용14" contents[14] = "내용15" contents[15] = "내용16" contents[16] = "내용17" contents[17] = "내용18" contents[18] = "내용19" contents[19] = "내용20" contents[20] = "내용21" . . .










