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