화면구현

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

기록해! 정리해!

화면구현 본문

NCS 모듈교재

화면구현

zsuling 2022. 7. 11. 16:37

LM2001020225_화면구현.pdf

11.83MB

실기

Q1.

다음화면을 만드시오

아이디/ 암호

1-1)화면 만들기

<body>
<form name=f1 onSubmit="return ch1()">
<table border=1>
<tr><td>아이디:</td><td><input type=text name=id></td></tr>
<tr><td>암호 : </td><td><input type=text name=pwd></td></tr>
<tr><td colspan=2 align=center><input type=submit value="로그인"></td></tr>
</table>
</form>
</body>

1-2) 자바스크립트로 내용안넣을 경우 경고창이 뜨게 구현

<script>
function ch1(){
	if(f1.id.value==""){
	alert("아이디를 입력해주세요.");
	return false;
	}else if(f1.pwd.value==""){
	alert("암호를 입력해주세요.");
	return false;
	}
}
</script>
</head>

Q2.

아래의 테이블을 만드시오

rowspan 까먹지말기...

<table border=1 width=300 height=300>
<div>
<tr><td colspan=3 ><a href="https://www.naver.com/"><h2>A</h2></a></td></tr>
<tr><td width=100 height=100>B</td><td width=100 height=100>C</td><td rowspan=2><img src=./img/30102.jpg width=95 height=95></td></tr>
<tr><td width=100 height=100>E</td><td width=100 height=100>F</td></tr>
</div>
</table>

Q3.

쇼핑몰 회원 조회 만들기

콤보박스

<select name=tel1>
<option value=""></option>
<option value="010">010</option>
<option value="02">서울</option> --서울을 디폴트로 잡고싶으면 <option value="02" selected >서울</option>
</select>

라디오박스

체크박스

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
header{
    background-color:blue;
    height:65px;
    line-height: 65px; 
    color: #ffffff;
    font-size:28px;
    text-align:center;
}
nav{
    background-color:#00aaff;
    height:30px;
    line-height:30px; 
    color: #ffffff;
    font-size:14px;
}
section{
    background-color:#cccccc;
    min-height:500px;
}
footer{
    background-color:blue;
    height:35px;
    line-height:35px; 
    color: #ffffff;
    font-size:14px;
    text-align:center;
}
#body{
    width:90%;
    margin:auto;
}

</style>
</head>
<body>
<div id=body>
<header>쇼핑몰 회원 관리 ver 1.0</header> 
<nav>하나도 &emsp; 안보여&emsp; 젠장&emsp; 홈으로&emsp;</nav>

<section>
<div>
<br>
<form>
<table border=1 align=center width=500px>
<div align=center> <font size=5> 쇼핑몰 회원 등록 </font></div>
<br>
<tr><td align=center>회원번호(자동발생)</td><td><input type=text name=idx value="900011"></td></tr>
<tr><td align=center>회원성명</td><td><input type=text name=sname></td></tr>
<tr><td align=center>비밀번호</td><td><input type=password name=pwd></td></tr>
<tr><td align=center>회원전화</td><td>
<select name=tel1>
<option value=""></option>
<option value="010">010</option>
<option value="02" selected >서울</option>
</select>
<input type=text name=tel></td></tr>
<tr><td align=center>회원주소</td><td><input type=text name=addr size=45></td></tr>
<tr><td align=center>가입일자</td><td><input type=text name=date value=2022-07-11></td></tr>
<tr><td align=center>고객등급[A:VIP, B:일반, <br> C:직원]</td>
    <td><input type=radio name=r1 value=A>VIP
        <input type=radio name=r1 value=B checked>일반
        <input type=radio name=r1 value=C>직원</td></tr>
<tr><td align=center>사용가능 컴퓨터언어</td>
<td><input type=checkbox name=c1 value="자바">자바
    <input type=checkbox name=c1 value="파이썬">파이썬
    <input type=checkbox name=c1 value="씨언어">씨언어
    <input type=checkbox name=c1 value="Spring" checked>스프링</td></tr>        
<tr><td align=center>도시코드</td><td><input type=text name=city></td></tr>
<tr><td align=center>특이사항</td>
<td><textarea cols=30 rows=3 name=etc></textarea></td></tr>
<tr><td align=center>파일저장</td>
<td><input type=file name=file1></td></tr>
<tr><td colspan=2 align=center>
<input type=submit value="저장하기">
<input type=reset value="다시작성"></tr>
</table>
</form>
</div>
<br>
</section>
<footer>...</footer>
</div>
</body>
</html>

Q4. 요구사항을 만들어보렴

Q5. 체크리스트를 만들어 보렴

화면구현 선생님코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
header{
 background-color:blue;
 height:50px;
 line-height:50px;
 text-align:center;
 vertical-align:middle;
}
nav{
 background-color:#6699ff;
 height:40px;
 line-height:45px;
 vertical-align:middle;
}
section{
 background-color:#CCCCCC;
 min-height:500px;

}
footer{
 background-color:#0077FF;
 height:35px;
 line-height:35px;
 text-align:center;
 vertical-align:middle;
}

#body{
  width:80%;
  margin:auto;
}
</style>
</head>
<body>
<div id=body>
<header>
<h2> 쇼핑몰 회원관리 ver 1.0 </h2>
</header>
<nav>
&nbsp;&nbsp;&nbsp;<a href=form.jsp>회원등록</a>
&nbsp;&nbsp;&nbsp;<a href=member_list.jsp>회원목록조회/수정</a>
&nbsp;&nbsp;&nbsp;<a href=money_list.jsp>회원매출</a>
&nbsp;&nbsp;&nbsp;<a href=index.jsp>홈으로 </a>
</nav>

<script>
function  ch1(){
  if (f1.custname.value==""){ 
  alert("이름을 입력해 주세요"); 
  f1.custname.focus();
  return  false; 
  }
}  

function Search() {
   alert("Search");
   location.href='member_list.jsp' ;
  }
</script>

<section>
<br>
<div align="center">
 <font size=5> 쇼핑몰 회원 등록</font> <br><br>
<form name="f1" action=form_ok.jsp
      onSubmit="return  ch1()" >
<table  width=600  border=1 height=400>
<tr><td width=200 align="center">회원번호(자동발생)</td>
    <td width=400><input type=text  name=custno value="90001">  </td></tr>
<tr><td align="center">회원성명</td>
    <td ><input type=text  name=custname>  </td></tr>
<tr><td align="center">패스워드</td>
    <td ><input type=password  name=pwd>  </td></tr>

<tr><td align="center">회원전화</td>
    <td>
    <select  name=phone1 >
      <option value=""> </option>
      <option value="010"> 010 </option>
      <option value="02" selected> 서 울 </option>
    </select>
    <input type=text  name=phone2 size=30>  </td></tr>
<tr><td align="center">회원주소</td>
    <td><input type=text  name=address size=60>  </td></tr>
<tr><td align="center">가입일자</td>
    <td><input type=text  name=joindate value="2022-07-11">  </td></tr>
<tr><td align="center">고객등급[A:VIP, B:일반, C:직원]</td>
    <td>
    <input type=radio  name=grade value=A>VIP
    <input type=radio  name=grade value=B checked>일반
    <input type=radio  name=grade value=C>직원  
    </td></tr>
<tr><td align="center">사용가능 컴퓨터언어 </td>
    <td><input type=checkbox  name=check  value="자바">자바  
    <input type=checkbox  name=check  value="파이썬">파이썬 
    <input type=checkbox  name=check  value="C언어">C언어 
    <input type=checkbox  name=check  value="Spring">스프링 
    </td></tr>
    
<tr><td align="center">도시코드</td>
    <td><input type=text  name=city>  </td></tr>
<tr><td align="center">특이사항</td>
    <td><textarea cols=40 rows=4  name=etc></textarea>  </td></tr>
<tr><td align="center">파일저장</td>
    <td><input  type=file  name=file1 />  </td></tr>
    
<tr>
    <td colspan=2 align="center">
    <input type=submit  value="저장하기">
    <input type=reset value="다시작성"> 
    </td></tr>
</table>
</form>
</div>
<br>
</section>
<footer>
 HRDKOREA  Copyright 2018 ALL Rights resources Development  Service  of  Korea 
</footer>
</div>
</body>
</html>