본문 바로가기
수업 문제(국비 지원)/JSP

[JSP] 2022.09.26 (글자체 지정하기, select 태그 연습)

by byeolsub 2023. 4. 29.

❓ 글자체 지정하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자체 지정하기</title>
<style type="text/css">
#f1{
	font-family : HY견고딕;
}
.f2{
	font-family : cursive;
}
#f2{
	font-family : fantasy;
}
.f1{
	font-family : monospace;
}
div {
    background-color: #cccccc;
}
#lime {
    background-color: lime;
}
</style>
</head>
<body>
<p id="f1">font-family 스타일을 HY견고딕으로 지정하기</p>
<p class="f2">font-family 스타일을 cursive로 지정하기</p>
<p id="f2">font-family 스타일을 fantasy로 지정하기</p>
<p class="f1">font-family 스타일을 monospace로 지정하기</p>

<div style="background-color: #cccccc;">
    배경색을 #cccccc로 변경하기</div>
<div id="lime" style="background-color: lime;">배경색을 lime로 변경하기</div>
</body>
</html>

❓ select 태그연습

<!DOCTYPE html>
<!-- /WebContent/test2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>select 태그 연습</title>
<script type="text/javascript">
   function nameprint(s) {
//	   let fruit = prompt(s.options[s.selectedIndex].value);
//s.value : select 객체가 선택한 값
	   let fruit = prompt(s.value);
	   if(fruit != null) { //prompt 창에서 확인버튼이 클릭된 경우
		   //fruit : 입력한 값 
		   //s.options : s 객체의 하위 option 객체들
		   //s.selectedIndex : 선택된 값의 인덱스
	      s.options[s.selectedIndex] = new Option(fruit);
	      // 화면에 변경된 값을 출력
		  s.value = fruit; //select 태그의 내용 중 fruit값을 선택
	   }
   }
</script>
</head>
<body>
문제 : 과일을 선택하면, 선택된 과일을 prompt 창으로 출력하고 다른 과일이름을 입력하면 선택된 과일을 입력된 과일이름으로 변경하기 
<form name="f">
   과일: <select name="s" onchange="nameprint(this)">
      <option>사과</option><option>감</option>
      <option>배</option><option>딸기</option>
   </select>
</form>
</body>
</html>

</aside>