4주중 2주는 중프 2주는 게시판만들기, 게시판만드려면 목록화면 필요.. 목록화면에서 눌렀을때 상세화면으로
상세화면에서 보고 수정할수있는 화면으로,, 수정화면에서 저장후 다시 상세로가야함. 상세에서 다시 목록으로도 갈수있어야함
신규등록하는화면은 신규등록 후 (내용이 간단하다면) 그냥 목록드로 돌아가야하지만 회원정보같은거는 상세로 확인시켜준 후 목록으로 가도됨
사용자가 가능한 실수를하지않게. 편리하게 프로세스를 생각해야함
총 4개화면인데
디자인은 1. 부트스트랩에서 탬플릿가져다가 화면만들고, 2.ajax이용 서버연동해서 서블릿..기능별만들거임]
상세가 가장쉽,, 신규도 쉽,, 목록부터 시작하는게 맞다
퍼블리셔의 예시
처음시작할때
폰트패밀리랑 컬러뭘로할건지 잡아주고
거의 모든요소를 display block, margin padding 0으로 다 잡아놓음.. 자동으로 잡혀있는 마진패딩을 다 0으로 하는것
고객정보로 들어갈만한것들
관심분야로는 자바, js, html, db 등을 넣어준다.
id
이름
패스워드
주번대신 생년월일 (개인정보보호법) (생일메일보내는용이라든가)
남/여 구분(주번첫자리)
이메일 (기존회원인지아닌지확인)
핸드폰번호(기존회원인지아닌지확인)
주소
직업
목록먼저만들거니까,
목록에서 검색조건으로 검색을 할수잇어야함 (검색조건: ID, 이름, 이메일)
목록화면은 어떻게 나와야할까
id
이름
이메일
[검색조건초기화버튼] [ 조회 버튼 ]
밑으로 검색결과 목록화면 쭉쭊쭊쭊
선을 기준으로 크게 나누고, 인풋이랑 버튼도 나누고, 또 id, 이름은 같은 row 이메일은 한 row에., 이런식으로 row로도 나누고 버튼도 top low 위치 결정.. 버튼의 위치도 사용자의 시선이나 오른손잡이 이런거 생각해서 놓는다.
검색조건중 필수요건은 상단 좌측에 위치시킨다.
검색조건으로 넣은 항목은 목록에 나와야함
인풋시작하는것도 row가 달라도 시작부분은 같아야함
그래서 라벨부분이랑 인풋부분도 div로 나눈다.
라벨들의 너비를 동일하게하려면 div클래스를 inputlabel이라고 하고 css에서 width를 동일하게주기
근데 퍼블리셔한테 맡기면 div안쓰고 list를 쓴다.
<dl>
<dt>라벨이들어감</dt>
<dd>인풋이들어감</dd>
<dt></dt>
<dd></dd>
</dl>
<dl>
.....
dt는 라벨로보고 dd는 인풋영역라고보고 스타일따고줄거고 .. 이런식으로
회원등록하는 화면 만드는게 최종과제임 (정보도 많고 컨트롤할게많아서)
프로젝트 새로만들자
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="../../js/jquery-3.5.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<!-- <body class="bg-info"> -->
<body>
<div class="container">
<p class="text-primary h3">검색조건</p>
<div class="panel panel-primary">
<div class="panel-body">
<div class="searchCond ">
<span class="col-sm-1">ID</span> <input type="text" class="col-sm-4 ">
<span class="col-sm-1">이름</span> <input type="text" class="col-sm-4 ">
</div>
<div class="searchBtn ">
<button type="button" class="btn btn-primary col-sm-1"><span class="glyphicon glyphicon-search"></span>검색</button>
<button type="button" class="btn btn-dark col-sm-1"><span class="glyphicon glyphicon-envelope"></span>초기화</button>
</div>
</div>
</div>
<div class="row">
<h3 class="text-primary "> 회원목록
<div class="pull-right">
<button type="button" class="text-primary"><span class="glyphicon glyphicon-search">엑셀다운로드</span></button>
<button type="button" class="text-primary"><span class="glyphicon glyphicon-search">엑셀(상세)다운로드</span></button>
<button type="button" class="text-primary"><span class="glyphicon glyphicon-search">SMS보내기</span></button>
</div></h3>
</div>
<table class="table table-bordered">
<tr class="info">
<th>번호</th>
<th>ID</th>
<th>이름</th>
<th>비밀번호</th>
<th>생년월일</th>
<th>전화번호</th>
<th>메일</th>
<th>직업</th>
</tr >
<tr class="default">
<td colspan="8" class="text-center">검색버튼을 클릭하세요</td>
</tr>
</table>
<div class="row pull-right">
<button type="button" class="">신규등록</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootsdlap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="../../js/jquery-3.5.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body,dl,dt,dd{padding:0; margin:0;}
dl {
width:100%;
/* display: table; */
/* border-bottom: 0.5px solid #E0ECF8; */
}
dt {
float:left;
width:25%;
background-color:#E0ECF8;
/* display: table-cell; */
height: 2em;
}
dd {
float:left;
width:25%;
height: 2em;
}
</style>
<body>
<div class="container">
<div id="header">
<h3 class="text-primary">회원정보</h3>
<dl>
<dt>회원ID</dt>
<dd>dotmf123</dd>
<dt>회원명</dt>
<dd>강감찬</dd>
</dl>
<dl>
<dt>비밀번호</dt>
<dd>234234</dd>
<dt>생년월일</dt>
<dd>1992-12-02</dd>
</dl>
<dl>
<dt>집전화번호</dt>
<dd>02-153-4567</dd>
<dt>핸드폰번호</dt>
<dd>010-1234-5678</dd>
</dl>
<dl>
<dt >회사전화번호</dt>
<dd>031-152-4567</dd>
<dt >이메일</dt>
<dd>apple@gmail.com</dd>
</dl>
<dl>
<dt >주소</dt>
<dd style="width: 75%;"><span class="label label-default">15904</span>대전광역시 중구 대흥동 영민빌딩 406호 </dd>
</dl>
<dl>
<dt >직업</dt>
<dd>세무사</dd>
<dt >기념일</dt>
<dd>1994-12-05</dd>
</dl>
<dl>
<dt >취미</dt>
<dd>양궁</dd>
<dt >마일리지</dt>
<dd>5000</dd>
</dl>
<dl class="h300">
<dt>첨부파일</dt>
<dd ></dd>
</dl>
<dl>
<dt >내용</dt>
<dd ></dd>
</dl>
<br>
</div>
<div id="footer">
<button type="button" class="btn btn-default">목록</button>
<button type="button" class="btn btn-default">이전화면</button>
<button type="button" class="btn btn-primary">수정</button>
</div>
</div>
</body>
</html>