More actions
imported>rlaace423 No edit summary |
imported>xf23t No edit summary |
||
| Line 7: | Line 7: | ||
<body> | <body> | ||
<div id='basewindow'> | <div id='basewindow'> | ||
<div id='chugoong'>추궁하장</div> | <div id='chugoong'>추궁하장</div> | ||
<div id='jesi'>제시하장</div> | <div id='jesi'>제시하장</div> | ||
<div id='item_box'></div> | <div id='item_box'><span class='keyword'><br><br><br><br><br>hello</span></div> | ||
<div id='item_pic'></div> | <div id='item_pic'></div> | ||
<div id='item_text'></div> | <div id='item_text'></div> | ||
<!--<div id='human'></div>--> | |||
| Line 42: | Line 43: | ||
width : 460px; | width : 460px; | ||
height : 75px; | height : 75px; | ||
background-color : | background-color : royalblue; | ||
padding : 10px; | padding : 10px; | ||
position : absolute; | position : absolute; | ||
top : 225px; | top : 225px; | ||
left : 0px; | left : 0px; | ||
} | } | ||
#human { /*사람 그림이 나올 화면*/ | #human { /*사람 그림이 나올 화면*/ | ||
width : 256px; | |||
height : 285px; | |||
background-color : olive; | |||
position : absolute; | |||
top : 35px; | |||
left : 116px; | |||
} | } | ||
#name { /*사람이름(텍스트 위에)*/ | #name { /*사람이름(텍스트 위에)*/ | ||
| Line 84: | Line 93: | ||
width : 130px; | width : 130px; | ||
height : 130px; | height : 130px; | ||
background-color : | background-color : transparent; | ||
position : absolute; | position : absolute; | ||
top : 45px; | top : 45px; | ||
| Line 92: | Line 101: | ||
width : 280px; | width : 280px; | ||
height : 130px; | height : 130px; | ||
background-color : | background-color : skyblue; | ||
position : absolute; | position : absolute; | ||
top : 45px; | top : 45px; | ||
| Line 107: | Line 116: | ||
} | } | ||
span.date { /*날짜와 장소 출력할 때의 속성*/ | span.date { /*날짜와 장소 출력할 때의 속성*/ | ||
color : yellow; | |||
} | } | ||
Revision as of 07:55, 19 August 2010
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;
}