main
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" rel="stylesheet" href="mid.css"> <style> #top { background-color: rgb(24, 23, 23); width: 1800px; height: 1100px; margin: 100px 0px 0px 400px; border-radius: 200px 200px 200px 200px; } #fo{ font-size: 20px; text-align: right; color: #ffffff; /*border :2px solid red;*/ width: 1600px; } #tq{ border: 2px; background-color: aqua; } #top1{ font-size: 53px; color: #ffffff; margin: -470px 0px 0px 150px; /*border :2px solid red;*/ width: 500px; } #top1-2{ font-size: 53px; color: #ffffff; margin: 10px 0px 0px 380px; width: 330px; /*border :2px solid red;*/ } #top1-3{ font-size: 75px; color: #ffffff; margin: 10px 0px 0px 620px; width: 300px; /*border :2px solid rgb(255, 255, 255);*/ } #top2{ font-size: 25px; color: #ffffff; margin: 100px 0px 0px 700px; } #imgset{ position: absolute; background-image: url("../images/set.jpg"); } a { color: rgb(255, 255, 255); text-decoration : none; } a:hover { color:rgb(255, 255, 255); text-decoration: underline; } </style> </head> <body id="imgset"> <table id="top"> <td> <div id="top1" >술을 사랑하는</div> <div id="fo"><a href="log2.html">로그인</a> / <a href="join.html" >회원가입</a></div> <div id="top1-2"> 당신을 위한</div> <div id="top1-3"> 술랑당★</div> <div id="imgset"></div> <div id="top2"></div> <div id="img1" ><a href="wis.html" >양주</a></div> <div id="img2"><a href="wan.html">와인</a></div> <div id="img3"><a href="wjsxhd.html">전통주</a></div> </td> </table> </body> </html> | cs |
mid
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 | #img1, #img2, #img3 { position: absolute; width:500px; height: 50px; background-color: rgb(182, 88, 104); text-align: center; font-size: 30px; border-radius: 10px 20px 30px 40px; } #img1:hover{ top: 550px; width: 500px; height: 600px; } #img2:hover { top: 550px; width: 500px; height: 600px; } #img3:hover { top: 550px; width: 500px; height: 600px; } #img1 {left:500px; top: 550px;} #img2 {left:1050px; top:550px;} #img3 {left:1600px; top:550px;} #img1:hover { left:500px; background-image: url("../images/wise.jpg"); } #img2:hover { left:1050px; background-image: url("../images/win.jpg"); } #img3:hover { right: 0px; background-image: url("../images/wjsxhd.jpg"); } | cs |
log
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab{ width: 900px; height: 900px; } #q12{ background-image: url("../images/set.jpg"); } </style> </head> <body > <table id="q12"> <tr> <td class="tab"> </td> <td class="tab"> <table> <tr> <div><b>아이디</b></div> <input type="text" name="mid" id="mid" maxlength="20" required autofocus placeholder="아이디를 입력해주세요" style="width:400px;height:40px;"></input><br/> <label for="pwd"><b>비밀번호 </b></label><br/> <input type="password" name="pwd" id="pwd" maxlength="20" required autofocus placeholder="비밀번호를 입력해주세요" style="width:400px;height:40px;"></input> <br/> <label for="pwd1"><label><b>비밀번호 재확인</b></label> <div><input type="password" id="pwd1" maxlength="20" required autofocus placeholder="비밀번호 재확인" style="width:400px;height:40px;"></input></div> <div><label for="이름"><b>이름</b></label></div> <div><input type="text" name="name" id="name" maxlength="15" style="width:400px;height:40px;"></input></div> <div><label for="생일"><b>생년월일</b></label></div> <input type="text" name="year" id="year" maxlength="4" placeholder="년(4자)" style="width:130px;height:40px;"></input> <select name="month" style="width:125px;height:45px;"> <option>1월</option> <option>2월</option> <option>3월</option> <option>4월</option> <option>5월</option> <option>6월</option> <option>7월</option> <option>8월</option> <option>9월</option> <option>10월</option> <option>11월</option> <option>12월</option> </select> <input type="text" name="day" id="day" maxlength="2" style="width:130px;height:40px;"> <div><label for="gender"><b>성별</b><label></div> <div> <select name="gender1" style="width:410px;height:50px;"> <option>남자</option> <option>여자</option> <option>선택 안함</option> </select> </div> <div> <label for="tel"><b>휴대전화</b></label> </div> <div> <select name="c" style="width:410px;height:50px;"> <option value="82" selected > 대한민국 +82 </option> <option value="45" > 덴마크 +45 </option> <option value="299" > 덴마크령그린란드 +299 </option> <option value="298" > 덴마크령페로제도 +298 </option> <option value="1809" > 도미니카공화국 +1 809 </option> <option value="49" > 독일 +49 </option> </select> </div> <input type="text" name="phone" id="phonee" maxlength="15" required autofocus placeholder="전화번호 입력" style="width:297px;height:40px;"></input> <input type="submit" value="인증번호 받기" style=height:40px;></label></input> <div ><input type="telac" placeholder="인증번호를 입력하세요" style="width:400px;height:40px;"></input></div> <div><input type="submit" value="가입하기" style="width:405px;height:40px;"></div> </tr> </tr> </table> </body> </html> | cs |
첫댓글 View를 작업하다보니 소스코드들이 어마무시하지요?..ㅎ...
그래도 열심히 하는 보람에 결과물들이 하나둘 생성되고 있습니다.
앞으로도 좋으모습 쭉~ 기대합니다. 수고하셨어요