Web
4. (과제1) 닷홈 호스팅을 이용한 웹 페이지 만들기
muru_
2024. 4. 5. 16:23
다음 기능이 있는 웹 페이지 만들기
결과 : http://ehdguschkf47.dothome.co.kr/
1. 메인 페이지(index.html)
- 자유롭게 작성
2. 뉴스기사(news.html)
- 포털 기사 중 하나를 선택하여 뉴스기사 이미지를 포함한 기사 내용의 문서를 작성
3. 즐겨찾기(favorite.html)
- 자신이 자주 방문하는 사이트 3곳이상 캡쳐화면을 포함하여 링크를 작성
4. 이력서(resume.html)
- 테이블을 이용해서 이력서 양식 만들기
5. 로그인 (login.html)
- 아이디와 비밀번호를 입력받는 로그인 페이지 만들기
6. 회원가입 (regist.html)
- 회원가입에 필요한 정보를 입력받는 회원가입 페이지 만들기
< HTML 코드 >
1) 메인페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메인 페이지</title>
</head>
<body>
<h2 >[메인메뉴]</h2>
<img src="./img/dog1.png" alt="강아지"> <br> <br>
<a href="./2. 하이퍼링크/news.html">1. 뉴스</a><br><br>
<a href="./2. 하이퍼링크/favorite.html">2. 즐겨찾기 </a><br><br>
<a href="./2. 하이퍼링크/resume.html">3. 이력서</a><br><br>
<a href="./3. 로그인 화면/login.html">4. 로그인</a><br><br>
</body>
</html>
2) 뉴스기사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뉴스</title>
</head>
<body>
<h2>[네이버 뉴스]</h2>
<img src="https://mimgnews.pstatic.net/image/upload/office_logo/014/2020/09/18/logo_014_6_20200918175030.png" alt="파이낸셜뉴스">
<h1>"학폭 의혹 또 터졌다" '여배우 J' 누구길래</h1>
<p>입력2024.04.04. 오전 8:28</p>
<img src="https://imgnews.pstatic.net/image/014/2024/04/04/0005166649_001_20240404082814108.jpg?type=w647" alt="J">
<p>[파이낸셜뉴스] 최근 익명 게시판에 올라온 여배우 학폭 이슈가 온라인을 뜨겁게 달구고 있다. <br> <br>
4일 각종 온라인 커뮤니티 등을 통해 여배우 J씨에 대한 학교폭력 폭로 게시물이 확산하고 있다. <br> <br>
이 폭로글은 한 익명 게시판을 통해 공개됐다. 작성자는 J씨와 같은 중학교 출신이라며 "툭하면 애들 체육복이나 교복 훔치거나 뺏고 애들이 안 주면 욕하고 괴롭히는 대상이 됐다"고 주장했다. <br> <br>
이어 "저도 한때 체육복 안줬다가 J한테 '미친X' 소리 들으며 학교 다녔다. 화장실까지 쫓아와 문을 발로차 무서워 조용해지면 밖에 나가기도 했다"고 떠올렸다. <br> <br>
작성자뿐 아니라 또 다른 피해자들이 글을 꾸준하게 올리고 있지만, 해당 글이 지워진다고도 했다.
해당 글에는 J씨로부터 학폭을 당했다는 피해자들의 댓글도 달리는 상황이다. <br> <br>
이렇다 보니 J씨에 대한 학폭 이슈가 커지면서 누리꾼들의 여러 반응이 이어지고 있다.
다수 누리꾼들은 "사실이면 밝혀지겠지" "피해자가 한 둘이 아닌가 보네" "피해자들 곧 모아질 듯" 등 관심을 보이고 있다. <br> <br>
다만 섣부른 판단은 조심해야 한다는 의견도 이어진다. 아직 진위 여부가 밝혀지지 않은 상황에 무분별한 억측과 비난 등은 자제해야 한다는 목소리도 나오고 있다. <br> <br>
한승곤 기자 (hsg@fnnews.com)</p>
<a href="./../index.html" style="font-size: 20px;">돌아가기</a>
</body>
</html>
3) 즐겨찾기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즐겨찾기</title>
</head>
<body>
<h2>[즐겨찾기 화면]</h2>
<a href="https://pedia.watcha.com/ko-KR"> >>1. 왓챠피디아 바로가기<< </a> <br> <br>
<img src="./../img/왓챠피디아.png" alt="왓챠피디아" width="1000px"> <br>
<hr> <br>
<a href="https://www.weather.go.kr/w/image/vshrt/rain.do"> >>2. 초단기 강수예측 바로가기<< </a> <br> <br>
<img src="./../img/초단기강수예측.png" alt="초단기강수예측" width="1000px"> <br>
<hr> <br>
<a href="https://dacon.io/"> >>3. 데이콘 바로가기<< </a> <br>
<img src="./../img/데이콘.png" alt="데이콘" width="1000px"> <br> <br>
<hr>
<a href="./../index.html" style="font-size: 20px;">돌아가기</a>
</body>
</html>4) 이력서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이력서</title>
</head>
<body>
<h2 align="center">이력서</h2>
<!-- 인적사항 -->
<table align="center" border="3" width="650" style="border-collapse: collapse;">
<tr align="center" > <!-- 1행 -->
<td rowspan="5" style="background-color:aliceblue;">인<br>적<br>사<br>항</td>
<td rowspan="5" width="120">사진</td>
<td rowspan="3" style="background-color:aliceblue;">성명</td>
<td style="background-color:aliceblue;">한글</td>
<td width="100px"></td>
<td colspan="2" style="background-color:aliceblue;">업무/지역</td>
<td colspan="3"></td>
</tr>
<tr align="center"> <!-- 2행 -->
<td style="background-color:aliceblue;">영문</td>
<td></td>
<td colspan="2" style="background-color:aliceblue;">주민등록번호</td>
<td colspan="3"></td>
</tr>
<tr align="center"> <!-- 3행 -->
<td style="background-color:aliceblue;">한자</td>
<td></td>
<td colspan="2" style="background-color:aliceblue;">성    별</td>
<td width="60px"></td>
<td width="60px" style="background-color:aliceblue;">연령</td>
<td width="60px"></td>
</tr>
<tr align="center"> <!-- 4행 -->
<td colspan="2" style="background-color:aliceblue;">
현 주 소 <br> (실거주지)</td>
<td colspan="6"></td>
</tr>
<tr align="center"> <!-- 5행 -->
<td colspan="2" style="background-color:aliceblue;" >전화번호<br>(휴 대 폰)</td>
<td></td>
<td colspan="2" style="background-color:aliceblue;">E - Mail</td>
<td colspan="3"></td>
</tr>
</table>
<!-- 학력 -->
<table align="center" border="3" width="650" height="150" style="border-collapse: collapse;">
<br>
<tr align="center" style="background-color:aliceblue; font-weight: bold;">
<td rowspan="4" width="40" >학 <br>력</td>
<td height="30" >기간(년, 월)</td>
<td>출신학교</td>
<td>전공</td>
</tr>
<tr align="center">
<td></td><td></td><td></td>
</tr>
<tr align="center">
<td></td><td></td><td></td>
</tr>
<tr align="center">
<td></td><td></td><td></td>
</tr>
</table>
<!-- 자격면허 -->
<table align="center" border="3" style="width: 650px; height: 300px; border-collapse: collapse;">
<br>
<tr style="height: 30px; background-color: aliceblue; font-weight: bold;" align="center" >
<td style="height: 50; writing-mode:vertical-lr; width: 40px;"rowspan="7">
자격면허&교육사항</td>
<td >자격증</td><td>기간</td><td>발급기관</td>
</tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<!-- 자격면허 -->
<table align="center" border="3" style="width: 650px; height: 300px; border-collapse: collapse;">
<br>
<tr style="height: 30px; background-color: aliceblue; font-weight: bold;" align="center" >
<td style="height: 50; writing-mode:vertical-lr; width: 40px;"rowspan="7">
경력사항</td>
<td >기간</td><td>기관</td><td>담당업무</td>
</tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<br>
<a href="./../index.html" style="font-size: 20px;">돌아가기</a>
</body>
</html>
4) 로그인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<h2>로그인 화면</h2>
<form action="./regist" method="post">
<p> 아이디: <input type="text" maxlength="40" placeholder="아이디를 입력하세요."
name="userid" id="userid"></p>
<p> 비밀번호: <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요."
name="userpw" id="userpw"> </p>
<p><input type="submit" value="로그인"
style="font-size: 15px; width: 100px; height: 20px;">
<a href="./regist.html" style="font-size: 15px;">회원가입하기</a></p>
</form>
<a href="./../index.html" style="font-size: 20px;">돌아가기</a>
</body>
</html>
5) 회원가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<h2>회원가입 화면</h2>
<form action="./regist" method="pos">
<p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요." name="userid" id="userid"> <button type="button"> 중복확인</button></p></p>
<p>비밀번호: <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요." name="userpw" id="userpw"></p>
<p>이름: <input type="text" maxlength="20" placeholder="이름"
name="username" id="username">
<p>생년월일: <input type="date"></p>
<p>성별: <label for="male">남자</label>
<input type="radio" name="gender" id="male" checked>
<label for="female">여자</label>
<input type="radio" name="gender" id="female"></p>
<p>전화번호: <input type="tel"></p>
<p>직업:
<select name="job" id="job">
<option value="학생">학생</option>
<option value="무직">무직</option>
<option value="회사원">회사원</option>
<option value="자영업자">자영업자</option>
<option value="프리랜서">프리랜서</option>
</select>
</p>
<p><input type="reset" value="리셋하기"></p>
<p><input type="submit" value="가입하기"
style="width: 200px; height: 50px; font-size: 15px;"></p>
<p><a href="./login.html" style="font-size: 15px;">돌아가기</a></p>
</form>
</body>
</html>