오늘은 넷플릭스를 모티브로 한 DEFLIX 기획안을 보고 수업시간에 html 페이지를 제작해보았다.
기획안을 보며 웹 사이트와 웹 페이지의 구조, 그리고 하드코딩에 대해 깊게 배운 시간이다.
코딩을 하면 항상 어렵고.. 어렵고.. 어려웠다.. 수업시간 안에 끝내고 싶었지만 못했었다 ..........😅
복습을 하면서 어떤 식으로 버그를 해결해야하는 지 감이 왔다 !! ㅎㅎㅎ 깨닫는 데 시간이 참 오래 걸리는 듯하다 !!
오늘은 프로젝트 코드와 결과, 그리고 나의 문제점, 해결방법, 느낀점에 대해 총 정리하는 시간을 가지겠다!!
↓ Index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index Page</title>
</head>
<body>
<header>
<hr>
<a href="index.html">DEFLIX</a>
<h4><a href="../210222/src/login.html">- 로그인</a></h4>
<hr>
</header>
<section>
<h2>영화, TV 프로그램을 무제한으로</h2>
<p>다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.</p>
<input type="text" placeholder="email 주소">
<a href="../210222/src/login.html"><input type="button" value="시작하기 >"></a>
<hr>
</section>
<footer>
<h5>Address: 대구광역시 중구 그린빌딩<br>
Tel: 054) 111-9121<br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com" title="이메일 보내기">hans.park.dev@dtravel.com</a><br>
<br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
↓ lndex.html
deflix는 넷플릭스를 바탕으로 제작했기 때문에 이메일 주소를 입력해야 컨텐츠를 볼 수 있는 방식으로 기획되었다.
매달마다 이용료를 지불하고 컨텐츠를 제공하기 때문에 많은 이용자들이 유입 될 수 있게 첫 페이지를 제작해야한다.
그래서 "언제든지 해지 할 수 있으니 우리 컨텐츠를 구경해보세요!! 구경하려면 여길 클릭해보세요!"라는 페이지를 첫페이지로 기획한 듯하다!
↓ login.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login Page</title>
</head>
<body>
<header>
<hr>
<a href="../index.html">DEFLIX</a>
<h4><a href="./login.html">- 로그인</a></h4>
<hr>
</header>
<section>
<form>
<p>
ID: <input type="text" placeholder="email 주소" required>
</p>
<p>
PW: <input type="text" placeholder="비밀번호를 추가하세요" required>
</p>
<p>
<input type="checkbox" required> 개인정보 처리방침에 따른 개인정보 수집 및 활용에 동의합니다
</p>
<p>
<a href="./sign-up.html"><input type="button" value="회원가입"></a>
<a href="./main.html"><input type="button" value="로그인"></a>
</p>
</form>
<hr>
</section>
<footer>
<h5>Address: 대구광역시 중구 그린빌딩<br>
Tel: 054) 111-9121<br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com" title="이메일 보내기">hans.park.dev@dtravel.com</a><br>
<br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
↓ login.html
login이나 sign-up 페이지에서 주로 사용하는 form태그!
가끔씩 까먹는 부분 중 하나가 form태그를 전송할 때, input type을 submit로 하지 않고, button을 주었다는 것..!
subbmit를 사용해야 required, 다음 페이지로 연결이 가능하기 때문에 잊지 말아야한다!!
↓ sign-up.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sign-up Page</title>
</head>
<body>
<header>
<hr>
<a href="../index.html">DEFLIX</a>
<h4><a href="./login.html">- 로그인</a></h4>
<hr>
</header>
<section>
<textarea name="article" id="article" cols="50" rows="20" disabled>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem necessitatibus odit ipsam, veniam, iste esse voluptas doloribus commodi amet dolorum a quam, laboriosam alias tempore dolore temporibus earum reiciendis labore!
Qui maiores possimus a molestias reiciendis necessitatibus similique. Iusto id perspiciatis temporibus cupiditate, laborum eveniet aliquid, modi debitis molestiae facere dolor, maxime nemo quae tempora quos repellat quasi corrupti aperiam.
Illo repudiandae quos eveniet itaque reprehenderit libero sit harum architecto, neque temporibus tempora ut, qui corporis ipsam, laudantium tempore. Architecto, doloremque. Officiis labore accusamus blanditiis tempore porro a eum eos.
Soluta iure consectetur voluptatum ipsa obcaecati sapiente facilis quas saepe numquam modi, praesentium, nihil vitae quae culpa corporis aspernatur mollitia nemo veniam error delectus unde fugiat dicta eveniet? Dolorem, commodi?
Corrupti ullam autem id! Voluptatibus quasi modi possimus voluptatum et numquam aliquid tenetur, culpa corporis. Quas, delectus nesciunt molestias quisquam consequuntur voluptatem velit recusandae voluptatibus accusantium accusamus vero nostrum sapiente!
</textarea>
<p>
<input type="checkbox" required> 디플릭스 이용약관 동의
</p>
<form>
<p>
아이디: <input type="text" required>
</p>
<p>비밀번호: <input type="text" required>
</p>
<p>
비밀번호 확인: <input type="text" required>
</p>
<p>
이름: <input type="text" required>
</p>
<p>
생년월일: <input type="month" required>
<input type="number" min="1" max="31" required>
</p>
<p>
<label for="gender">성별: </label>
<select name="gender" id="gender" required>
<option value="">선택</option>
<option value="male">남자</option>
<option value="female">여자</option>
</select>
</p>
<p>
<label for="mobile">전화번호: </label>
<select name="mobile" id="mobile" required>
<option value="">통신사 선택</option>
<option value="">sk</option>
<option value="">kt</option>
<option value="">lg</option>
</select>
<input type="tel" name="mobile-first" id="mobile-first" required maxlength="3" required> -
<input type="tel" name="mobile-second" id="mobile-second" required maxlength="4" required> -
<input type="tel" name="mobile-third" id="mobile-third" required maxlength="4" required>
</p>
<p>
<a href="./main.html"><input type="submit" value="가입완료"></a>
</p>
</form>
<hr>
</section>
<footer>
<h5>Address: 대구광역시 중구 그린빌딩<br>
Tel: 054) 111-9121<br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com" title="이메일 보내기">hans.park.dev@dtravel.com</a><br>
<br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
↓sign-up.html
가장 많이 타이핑해야하는 부분이 sign-up 페이지 였다!
많이 하다보니 적응 해서 이 부분에서 헷갈리거나 어려웠던 부분은 특별히 없었다!
↓main.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>main page</title>
</head>
<body>
<header>
<h1><a href="../index.html">DEFLIX</a></h1>
<ul>
<li><a href="../src/login.html">로그인</a></li>
</ul>
<hr>
</header>
<section>
<table width="100%">
<colgroup >
<col width="25%">
<col width="25%">
<col width="25%">
<col">
</colgroup>
<tr>
<th colspan="4">Deflix 인기 콘텐츠</th>
</tr>
<tr>
<th><a href="../src/detail.html"><img src="../content/image/응답하라-1994.jpg" alt="응답하라1994" title="응답하라1994" width="80%"></a></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-1" title="임시이미지-1"></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-2" title="임시이미지-2"></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-3" title="임시이미지-3"></th>
</tr>
<tr>
<th colspan="4">그린님이 시청 중인 콘텐츠</th>
</tr>
<tr>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="응답하라1994" title="응답하라1994" width="80%"></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-1" title="임시이미지-1"></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-2" title="임시이미지-2"></th>
<th><img src="http://via.placeholder.com/200x130/fff00/ffffff" alt="임시이미지-3" title="임시이미지-3"></th>
</tr>
</table>
</section>
<footer>
<hr>
<h5>
Address : 대구광역시 중구 그린빌딩<br>
Tel : <a href="tel:054)111-9121">054) 111-9121</a><br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
↓main.html
main페이지는 table 태그를 이용하여 칸을 나누었다! table 태그의 td와 th, tr만 잘 외워두면 문제없이 사용할 거 같다!!
main페이지 또한 막힘없이 해서 기분이 좋았다!
↓ detail.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>detail Page</title>
</head>
<body>
<header>
<hr>
<a href="../index.html">DEFLIX</a>
<h4><a href="../index.html">- 로그아웃</a></h4>
<hr>
</header>
<section>
<p id="1994">응답하라 1994</p>
<img src="../image/응답하라_1994.jpg" alt="응답하라_1994" title="응답하라_1994" width="50%">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In omnis vel repellendus tenetur cupiditate eligendi ab at ducimus, sed sit sapiente? Illum, nemo distinctio. Natus iste odio deserunt corporis placeat!
Deleniti nihil libero asperiores impedit dolores. Eligendi alias rerum porro voluptate ab debitis facere sunt, magnam distinctio. Laudantium aliquam reiciendis obcaecati, similique cumque consectetur eos, cum nemo deserunt magni ex.
Ipsum facere maxime eveniet officia praesentium sed similique recusandae tempore voluptatum facilis officiis minima nemo quasi aliquid dolores itaque explicabo ea libero esse ipsa placeat deserunt, non ullam doloremque! Nisi.
Laudantium veniam aliquid ab molestias eveniet libero magni porro eius praesentium voluptatum! Exercitationem praesentium earum voluptatibus esse voluptate a officia enim molestias eius delectus est consectetur, aperiam, tenetur nam neque?
Accusamus vel rerum architecto perspiciatis quod minus assumenda alias obcaecati a laudantium incidunt consectetur delectus, quasi aliquam rem numquam necessitatibus. Fuga facilis voluptatem temporibus id quae qui ea aperiam. Maiores.
</p>
<p><a href="#1994">본문 바로가기</a></p>
</section>
<footer>
<h5>Address: 대구광역시 중구 그린빌딩<br>
Tel: 054) 111-9121<br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com" title="이메일 보내기">hans.park.dev@dtravel.com</a><br>
<br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
↓ detail.html
마지막으로 detail 페이지이다. main 페이지에 있는 콘텐츠를 클릭하면 넘어가는 페이지로, 콘텐츠 관련 내용을 보여주는 페이지이다. 제일 쉽고 간단했다!!
deflix를 하며 느꼈던 부분이 아직 링크 걸때, 상대경로와 절대경로를 헷갈려하고 있다고 느낀다!!
다음에 상대경로와 절대경로에 대해 포스팅을 한번 해야겠다는 생각이 들었다
그리고 아직 미숙한 부분이 많아서 더 연습해야겠다!! 화이팅☺
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_11] <button> 태그 관련 버그 해결 (0) | 2021.02.24 |
|---|---|
| [코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? (0) | 2021.02.23 |
| [코딩 공부_08] 웹 사이트와 웹 페이지의 구조 알아보기 (0) | 2021.02.19 |
| [코딩 공부_07] form 태그 사용하기 (0) | 2021.02.17 |
| [코딩 공부_06] HTML로 위키피디아 페이지 만들기! (0) | 2021.02.16 |
댓글