오늘 DGBook을 하드코딩하기가 시험이었다! 이때까지 하던 것보다 많이 어려워서 머리를 빙글빙글 돌렸는데
머리를 굴려보니 다 했던 거라 내가 생각했던 만큼 완료했다! 그래서 DGBook 결과화면을 공유하도록 하겠다!
↓index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>index Page</title>
</head>
<body>
<header>
<hr>
<h1><a href="index.html">DGBook</a></h1>
<ul>
<li><a href="./src/main.html">메인으로 이동하기 ></a></li>
<li><a href="./src/sign-up.html">회원가입 하러 가기 ></a></li>
</ul>
<hr>
</header>
<section>
<form action="./src/main.html">
<fieldset>
<legend>로그인 정보</legend>
<p>
<label for="member-id">아이디:</label>
<input type="text" name="member-id" id="member-id" required> @
<select name="member-id-adress" id="member-id-adress" required>
<option value="">선택</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="kakao.com">kakao.com</option>
</select>
</p>
<p>
<label for="member-pw">비밀번호:</label>
<input type="password" name="member-pw" id="member-pw" required>
</p>
<input type="submit" value="로그인 하기">
</fieldset>
</form>
</section>
<footer>
<hr>
<address>
Address: <strong>그린 컴퓨터</strong>
<br>
Tel: <a href="tel:010-1234-1234">010-1234-1234</a>
<br>
E-mail: <a href="mailto:hans.park.dev@gmail.com">hans.park.dev@gmail.com</a>
<br>
©copy all reserve.
</address>
</footer>
</body>
</html>
↓index.html 완성본
- "로그인 하기" 버튼을 눌렀을때, form action에 적용 시킨 링크로 넘어가야하는데 안넘어가서 뭐지뭐지했는데 내가 submit으로 한게 아니라 button으로 해서 안되는 거 였다.. ㅎㅎ 똑같은 버튼이라서 착각했던 거 같다,,
↓terms-agreement.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>terms-agreement Page</title>
</head>
<body>
<header>
<hr>
<h1><a href="../index.html">DGBook</a></h1>
<ul>
<li><a href="./main.html">메인으로 이동하기 ></a></li>
<li><a href="./sign-up.html">회원가입 하러 가기 ></a></li>
</ul>
<hr>
</header>
<section>
<form action="./sign-up.html">
<fieldset>
<legend>
이용약관 동의
</legend>
<p>
<input type="checkbox" name="terms-conditions" id="terms-conditions" required> <label for="terms-conditions"> * 이용약관, 개인정보 수집 및 이용 정보 수신에 동의합니다(필수)</label>
</p>
<p>
<textarea name="agreement-content" id="agreement-content" cols="50" rows="10" disabled>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda perferendis aut, numquam quis voluptas doloribus cum non atque tempora, praesentium, quos nesciunt quam mollitia porro explicabo sed in! Blanditiis, eveniet!
Delectus possimus ipsam sint voluptates asperiores. Qui, deleniti deserunt, accusantium eum saepe vitae sint culpa exercitationem autem quo ex nihil consectetur labore animi recusandae voluptas sit quam voluptatum totam veritatis.
Temporibus laborum tempore in aspernatur at quisquam totam, odio dolor doloremque dolores, harum animi dolore mollitia tempora facere pariatur dolorem repellat! Numquam cum et deleniti officiis fugit ab adipisci commodi.
Hic vero doloribus deserunt nisi a perferendis maiores minus? Id quos debitis, rerum nulla quasi non tenetur libero, ducimus aspernatur iste accusantium nihil eos ad itaque hic eius natus consequuntur?
Deleniti suscipit eaque, provident tempora vel illum ad magni, soluta at quidem aliquid quo commodi? Officiis fugit aliquam iusto ipsum sint, sunt minus error eligendi et quas ratione ut recusandae.
</textarea>
<br>
<input type="checkbox" name="agreement" id="agreement" required> <label for="agreement"> * 이용약관 동의(필수)</label>
</p>
<p>
<textarea name="selected-content" id="selected-content" cols="50" rows="10" disabled>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda perferendis aut, numquam quis voluptas doloribus cum non atque tempora, praesentium, quos nesciunt quam mollitia porro explicabo sed in! Blanditiis, eveniet!
Delectus possimus ipsam sint voluptates asperiores. Qui, deleniti deserunt, accusantium eum saepe vitae sint culpa exercitationem autem quo ex nihil consectetur labore animi recusandae voluptas sit quam voluptatum totam veritatis.
Temporibus laborum tempore in aspernatur at quisquam totam, odio dolor doloremque dolores, harum animi dolore mollitia tempora facere pariatur dolorem repellat! Numquam cum et deleniti officiis fugit ab adipisci commodi.
Hic vero doloribus deserunt nisi a perferendis maiores minus? Id quos debitis, rerum nulla quasi non tenetur libero, ducimus aspernatur iste accusantium nihil eos ad itaque hic eius natus consequuntur?
Deleniti suscipit eaque, provident tempora vel illum ad magni, soluta at quidem aliquid quo commodi? Officiis fugit aliquam iusto ipsum sint, sunt minus error eligendi et quas ratione ut recusandae.
</textarea>
<br>
<input type="checkbox" name="selected" id="selected"> <label for="selected">이용약관 동의(선택)</label>
</p>
<p>
<strong><*정보 보유 기간></strong>
<br>
<input type="radio" name="information-retention-period" id="1-year" required> <label for="1-year">1년</label>
<input type="radio" name="information-retention-period" id="2-year"> <label for="2-year">2년</label>
<input type="radio" name="information-retention-period" id="3-year"> <label for="3-year">3년</label>
</p>
<p>
<input type="checkbox" name="select-promotion" id="select-promotion"> <label for="select-promotion">프로모션 정보 수신 동의(선택)</label>
</p>
<a href="../index.html"><button type="button">취소</button></a>
<input type="submit" value="확인">
</fieldset>
</form>
</section>
<footer>
<hr>
<address>
Address: <strong>그린 컴퓨터</strong>
<br>
Tel: <a href="tel:010-1234-1234">010-1234-1234</a>
<br>
E-mail: <a href="mailto:hans.park.dev@gmail.com">hans.park.dev@gmail.com</a>
<br>
©copy all reserve.
</address>
</footer>
</body>
</html>↓terms-agreement.html 완성본
↓ sign-up.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>sign-up Page</title>
</head>
<body>
<header>
<hr>
<h1><a href="../index.html">DGBook</a></h1>
<ul>
<li><a href="./main.html">메인으로 이동하기 ></a></li>
<li><a href="./sign-up.html">회원가입 하러 가기 ></a></li>
</ul>
<hr>
</header>
<section>
<form action="./main.html">
<fieldset>
<legend>
필수정보
</legend>
<p>
<label for="member-id"> * 아이디:</label>
<br>
<input type="text" name="member-id" id="member-id" required>@
<select name="member-id-adress" id="member-id-adress" required>
<option value="">선택</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="kakao.com">kakao.com</option>
</select>
</p>
<p>
<label for="member-pw"> * 비밀번호:</label>
<br>
<input type="password" name="member-pw" id="member-pw" required>
</p>
<p>
<label for="member-pw-check"> * 비밀번호 재확인:</label>
<br>
<input type="password" name="member-pw-check" id="member-pw-check" required>
</p>
</fieldset>
<br>
<fieldset>
<legend>
개인 정보
</legend>
<p>
<label for="member-name">* 이름</label>
<br>
<input type="text" name="member-name" id="member-name" required>
</p>
<p>
<label for="member-year">생년월일:</label>
<br>
<input type="text" placeholder="년" maxlength="4" name="member-year" id="member-year">
<select name="member-month" id="member-month">
<option value="">월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<input type="text" placeholder="일" maxlength="2">
</p>
<p>
<label for="member-gender">*성별:</label>
<br>
<select name="member-gender" id="member-gender" required>
<option value="">성별</option>
<option value="famale">여자</option>
<option value="male">남자</option>
</select>
</p>
<p>
<label for="member-phone">휴대전화:</label>
<br>
<select name="member-phone" id="member-phone">
<option value="">선택하세요</option>
<option value="korea">대한민국 +82</option>
<option value="usa">미국 +1</option>
<option value="makao">마카오 +853</option>
</select>
<input type="tel" name="member-phone" id="member-phone" placeholder="010" disabled> - <input type="tel" name="member-phone" id="member-phone" maxlength="4"> - <input type="tel" name="member-phone" id="member-phone" maxlength="4">
</p>
</fieldset>
<br>
<fieldset>
<legend>
기타 정보
</legend>
<p>
취미:
<br>
<input type="checkbox" name="member-habit-sketch" id="member-habit-sketch"> <label for="member-habit-sketch">그림</label>
<input type="checkbox" name="member-habit-cook" id="member-habit-cook"> <label for="member-habit-cook">요리</label>
<input type="checkbox" name="member-habit-health" id="member-habit-health"> <label for="member-habit-health">헬스</label>
<input type="checkbox" name="member-habit-etc" id="member-habit-etc"> <label for="member-habit-etc">기타</label
</p>
<p>
<label for="member-job">직무:</label>
<br>
<select name="member-job" id="member-job">
<option value="">선택하세요</option>
<option value="publisher">퍼블리셔</option>
<option value="designer">디자이너</option>
<option value="planner">기획자</option>
</select>
</p>
</fieldset>
<input type="submit" value="가입하기">
</form>
</section>
<footer>
<hr>
<address>
Address: <strong>그린 컴퓨터</strong>
<br>
Tel: <a href="tel:010-1234-1234">010-1234-1234</a>
<br>
E-mail: <a href="mailto:hans.park.dev@gmail.com">hans.park.dev@gmail.com</a>
<br>
©copy all reserve.
</address>
</footer>
</body>
</html>
↓ sign-up.html 완성본
↓ main.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>main Page</title>
</head>
<body>
<header>
<hr>
<h1><a href="../index.html">DGBook</a></h1>
<ul>
<li><a href="./main.html">메인으로 이동하기 ></a></li>
<li><a href="./sign-up.html">회원가입 하러 가기 ></a></li>
</ul>
<hr>
</header>
<section>
<h1>
주간 베스트 정보입니다
</h1>
<table border="1" width="80%">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<tr>
<th>주간 베스트</th>
<th>책 표지</th>
<th>책 정보</th>
<th>비고</th>
</tr>
<tr>
<th rowspan="2">
<ul>
<li>종합</li>
<li>가정</li>
<li>경제</li>
<li>고전</li>
</ul>
</th>
<th><img src="../image/top77.jpg" alt="top77" title="top77" width="100%"></th>
<th>
지은이: 염승환
<br>
출판사: 메이트북스
</th>
<th>
<a href="#top77"><button type="button">둘러보기</button></a>
</th>
</tr>
<tr>
<th><img src="../image/illusion.jpg" alt="illusion" title="illusion" width="100%"></th>
<th>
지은이: 염승환
<br>
출판사: 메이트북스
</th>
<th>
<a href="#illusion"><button type="button">둘러보기</button></a>
</th>
</tr>
</table>
<hr>
<h2 name="top77" id="top77"> <탑 77></h2>
<h4>‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블!</h4>
<p>
2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다.<br>
세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많은 이들이 주식투자 정보 방송을 즐겨보고 듣기 시작했다.<br>
주린이들의 사랑을 받으며 주목받는 스타도 생겨났다. 이 책의 저자인 염승환이 바로 그 대표주자다.<br>
매일 아침 유튜브 방송 〈삼프로 TV〉에 출연하며 주식시황 및 투자정보를 친절하고 성실하게 전달하는<br>
그에게 많은 주린이들이 신뢰와 감사 메시지를 보냈다.
</p>
<h2>북소믈리에 한마디!</h2>
<video src="../video/top77.mp4" controls width="50%"></video>
<hr>
<h2 name="illusion" id="illusion"> <공정하다는 착각></h2>
<h4>‘염블리’ 염승환이 전하는 주식투자 시 필수지식과 태도, 경험을 담은 주식투자 바이블!</h4>
<p>
2020년 100조 원이 넘는 주린이들의 자금이 주식시장에 유입되었다.<br>
세대를 막론하고 주식투자가 건전한 재테크 및 노후준비 수단으로 부상하며 많은 이들이 주식투자 정보 방송을 즐겨보고 듣기 시작했다.<br>
주린이들의 사랑을 받으며 주목받는 스타도 생겨났다. 이 책의 저자인 염승환이 바로 그 대표주자다.<br>
매일 아침 유튜브 방송 〈삼프로 TV〉에 출연하며 주식시황 및 투자정보를 친절하고 성실하게 전달하는<br>
그에게 많은 주린이들이 신뢰와 감사 메시지를 보냈다.
</p>
<h2>북소믈리에 한마디!</h2>
<video src="../video/illusion.mp4" controls width="50%"></video>
</section>
<footer>
<hr>
<address>
Address: <strong>그린 컴퓨터</strong>
<br>
Tel: <a href="tel:010-1234-1234">010-1234-1234</a>
<br>
E-mail: <a href="mailto:hans.park.dev@gmail.com">hans.park.dev@gmail.com</a>
<br>
©copy all reserve.
</address>
</footer>
</body>
</html>
↓ main.html 완성본
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_26] HTML에 아이콘을 넣어보자! (0) | 2021.03.09 |
|---|---|
| [코딩 공부_17] 절대경로? 상대경로? 경로 표기법에 대해 알아보자! (0) | 2021.03.04 |
| [코딩 공부_11] <button> 태그 관련 버그 해결 (0) | 2021.02.24 |
| [코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? (0) | 2021.02.23 |
| [코딩 공부_09] DEFLIX 완성하기 (0) | 2021.02.22 |
댓글