티스토리 뷰
지난번 코드 중 바뀐 것이 있다.
1. div로 테이블 안짜고 table로 짜기
2. modal을 사용해서 팝업처럼 화면 띄우기
아직 DB연동이 안되서(.....기다리고 있습니다 멘토님)
연동 부분 제외하고 틀을 만들고 있다.
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | <!DOCTYPE html> <html> <head> <meta meta name="viewport" charset="utf-8" content="device-width, initial-scale=1"> <!--이건뭐하는건지..?--> <title>Pakker's Web</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> </style> </head> <body> <div class="container"> <br> <h2>Pakker's Web_homeWork1</h2> <br> <table class="table table-hover"> <tr> <th>No</th> <th>제목</th> <th>작성자</th> <th>날짜</th> <th>조회수</th> </tr> <tr> <td>1</td> <td>titletitletitletitletitletitletitle</td> <td>pakker</td> <td>2018.10.23</td> <td>20</td> </tr> <tr> <td>2</td> <td>titletitletitletitletitletitletitle</td> <td>pakker</td> <td>2018.10.23</td> <td>20</td> </tr> </table> <button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#create">Register</button> </div> <!-- Trigger the modal with a button --> <!-- Create --> <div id="create" class="modal fade" role="dialog"> <div class="modal-dialog" style="max-width: 100%; width: auto; display: table;"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">REGISTER BOARD</h4> </div> <div class="modal-body"> <div class="container"> <table class="table" > <tr> <th>Title </th> <td><input class="form-control" type="text" name="title" placeholder="title"></td> </tr> <tr> <th>Content </th> <td><textarea class="form-control" rows="10" cols="30"></textarea></td> </tr> <tr> <th>Writer </th> <td><input class="form-control" type="text" name="writer" placeholder="writer"></td> </tr> </table> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-info" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- submit시 list화면 동기화 --> <!-- Detail --> <div id="detail" class="modal fade" role="dialog"> <div class="modal-dialog" style="max-width: 100%; width: auto; display: table;"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">REGISTER BOARD</h4> </div> <div class="modal-body"> <div class="container"> <table class="table" > <tr> <th>Title </th> <td>(db연결)</td> </tr> <tr> <th>Date </th> <td>(db연결)</td> </tr> <tr> <th>Count </th> <td>(db연결)</td> </tr> <tr> <th>Content </th> <td>(db연결)</td> </tr> <tr> <th>Writer </th> <td>(db연결)</td> </tr> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Modify</button> <!-- Modify로 이동 짜기 --> <button type="button" class="btn btn-info" data-dismiss="modal">Remove</button> <!-- 삭제 제이쿼리 짜기 --> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modify --> <div id="detail" class="modal fade" role="dialog"> <div class="modal-dialog" style="max-width: 100%; width: auto; display: table;"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">REGISTER BOARD</h4> </div> <div class="modal-body"> <div class="container"> <table class="table" > <tr> <th>Title </th> <td><input class="form-control" type="text" name="title">(db연결)</td> </tr> <tr> <th>Content </th> <td><textarea class="form-control" rows="10" cols="30">(db연결)</textarea></td> </tr> <tr> <th>Writer </th> <td><input class="form-control" type="text" name="writer">(db연결)</td> </tr> </table> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-info" data-dismiss="modal">Modify</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- submit시 list화면 동기화 --> </body> </html> | cs |
list인 메인 화면
Register 누를시 나오는 추가화면
DB를 연동해야 list에서 제목을 눌러 detail 페이지를 볼 수 있다...
DB연동, 서버설치 2가지를 해볼 계획이다
'게시판' 카테고리의 다른 글
2018.10.22 (0) | 2018.10.22 |
---|
댓글