U E D R , A S I H C RSS

2010 Java Script/역전재판

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"
.
.
.

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:22:11
Processing time 0.0234 sec