Dev
간단한 자기소개 홈페이지 (HTML 실습)
KeyDi
2022. 6. 12. 02:09
728x90
https://github.com/pkd98/simple-introductionPage/tree/master/Self-introduction_Hompage
GitHub - pkd98/simple-introductionPage
Contribute to pkd98/simple-introductionPage development by creating an account on GitHub.
github.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Keydi-Self-Introduction</title>
<style>
html, body { margin: 0; padding: 0px; height: 100%; }
.header { width: 100%; height: 5%; border-bottom: 5px solid red;}
.nav { width: 25%; height: 120%; float: left;
background: rgb(218, 218, 218); border-right:1px solid black; }
.section { width: 70%; height: 100%; float: left; padding:20px; font-size:20px; }
.footer { width: 100%; height: 100%; clear: both; padding:30px; background: rgb(231, 231, 231); border-top:3px solid black }
p.a{font-size:20px;}
hr { height: 1.5px; background-color: gray; }
</style>
</head>
<body>
<script>
function calc(){
var cost = document.querySelector('input[name="purchase"]:checked').value;
var count = document.querySelector('input[id="num"]').value;
document.getElementById("calc_result").innerHTML= "<b>결제금액: "+cost*count+"원</b>";
}
</script>
<header class="header">
<h1 style="text-align:left"> Keydi
<span style="color:gray; font-style: italic; font-size:20px;">[HTML,CSS이용 자기소개 웹페이지]</span>
<audio style="float:right" src="" controls autoplay loop> </audio>
</span></h1>
</header>
<nav class="nav">
<div id="profile" align="center">
<br><br>
<img src="img/myface.jpg" width="75%" height="30%" border="3px" alt="이미지 없음">
<h3>Keydi</h3>
<p style="font-style: italic; font-size:13px;"><strong>baum12345@naver.com</strong></p>
<br><p style="color: rgba(0, 41, 175, 0.87)"><strong>열심히 성실하게 살자</strong></p>
</div>
<div>
<br><br><br><br>
<h3> 시간표 (Schedule)</h3>
<table border="1" width="300" height="50" align="center">
<thead>
<tr bgcolor=orange height=28>
<th width=35 align=center><font color="white">시간</font></th><th width=53 align=center><font color="white">월</font></th><th width=53 align=center><font color="white">화</font></th><th width=53 align=center><font color="white">수</font></th><th width=53 align=center><font color="white">목</font></th><th width=53 align=center><font color="white">금</font></th>
</tr>
</thead>
<tbody>
<tr bgcolor=white><font size="1">
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">12:00-<br>12:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">13:00-<br>13:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">14:00-<br>14:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">15:00-<br>16:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">16:00-<br>16:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">17:00-<br>17:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr bgcolor=white>
<td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</tbody>
</table>
</div>
</nav>
<section class="section">
<h2 style="font-size: 30px">관심분야(Interest)</h2>
<ul>
<li><b>인공지능(AI) 관련</b>
<ul>
<li>딥러닝(Deep Learning)</li>
<li>컴퓨터비전(Computer Vision)</li>
</ul>
</li><br>
<li><b>웹 개발(Web Development)</b>
<ul>
<li>백엔드 개발자(Backend Developer) </li>
</ul>
</li><br>
<li><b>소프트웨어 테스팅 (Software QA)</b></li>
</ul>
<p class="a"> 컴퓨터공학 분야 전반에 관심이 있고, 특히 추후 <strong>인공지능 분야</strong>에 더 공부해보고 싶습니다.</p>
<hr>
<span>
<h2 style="font-size: 30px">장래희망(My Dream Job)</h2>
<ul>
<li><b>대기업 취업</b>
</li><br>
<li><b>공기업 취업</b>
</li><br>
</ul>
<p class="a"> 최근 SoftWare에 관한 흥미도가 더욱 높아져서 백엔드 개발 또는 SW QA 직무 취업이 현재 목표입니다.
</span>
<span>
<h2 style="font-size: 30px">취미(Hobby)</h2>
<table>
<tr><td>
<img src="img/hangang.jpg" width="300px" height="330px" border="3px" alt="이미지 없음">
</td><td>
<ul>
<li><b>산책</b>
<ul>
<li>산책하며 걷는 것을 좋아합니다 :)</li>
</ul>
</li><br>
<li><b>맛집 탐방</b>
<ul>
<li>다양하고 맛있는 음식을 먹는 것을 너무 좋아합니다.</li>
</ul>
</li><br>
<li><b>재태크</b></li>
<ul><li>주식 및 코인투자에 관심이 많습니다</li></ul>
</ul>
</td>
</tr>
</table>
<hr>
</span>
<span>
<h2 style="font-size: 30px">SNS(Contact)</h2>
<a href = "https://blog.naver.com/baum12345">
<img src="img/blog.png" width="50px" height="50px" alt="이미지 없음"> </a>
<a href = "https://keydi.tistory.com">
<img src="img/tistory.png" width="50px" height="50px" alt="이미지 없음"> </a>
<a href = "https://github.com/pkd98">
<img src="img/github.png" width="50px" height="50px" alt="이미지 없음"> </a>
<br><br><br> <font size="3px"> 이미지를 클릭하면 사이트로 이동합니다.</font><br><br><br>
<hr>
</span>
</section>
<footer class="footer">
<span style="text-align:center">
<h2 style="font-size: 30px"> 상품구매폼(폼만들기 연습)</h2>
</span> <hr>
<h2 style="font-size: 25px">상품선택<font color="red">*</font></h2> <br>
<form name="select" method="get">
<span Style="font-size: 20px; text-align:left">
<img src="img/phone.jpg" width="200px" height="200px" alt="이미지 없음">
<img src="img/tablet.jpg" width="200px" height="200px" alt="이미지 없음">
<img src="img/TV.png" width="200px" height="200px" alt="이미지 없음"><br>
<input id="phone" type="radio" name="purchase" value="500000" onclick="calc(event)"> 스마트폰(500,000원)
<input id= "tablete" type="radio" name="purchase" value="600000" onclick="calc(event)"> 태블릿(600,000원)
<input id= "TV" type="radio" name="purchase" value="1000000" onclick="calc(event)"> TV(1,000,000원)<br><br>
</span>
<h2 style="font-size: 25px">수량 입력 (0~99)<font color="red">*</font></h2> <br>
<span Style="font-size: 20px; text-align:left">
<input id="num" type="number" min="0" max="99" step="1" size="15" value="1" onchange="calc()"><br><br>
</span>
<h2 style="font-size: 25px">전화번호<font color="red">*</font></h2> <br>
<input type="tel" placeholder="010-1234-5678"><br><br>
<h2 style="font-size: 25px">배송지 주소<font color="red">*</font></h2> <br>
<input type="number"> <button type="button">우편번호</button><br>
<input type="text" size="40" value=""> <input type="text" size="40" value=""><br><br>
<h2 style="font-size: 25px">결제 방법<font color="red">*</font></h2> <br>
<span Style="font-size: 20px; text-align:left">
<form name="buy">
<input type="radio" name="way" value="1"> 신용카드
<input type="radio" name="way" value="2"> 무통장 입금
<input type="radio" name="way" value="3"> 휴대폰 결제
<input type="radio" name="way" value="4"> KeydiPAY<br><br><br>
<input type="checkbox" value=""> <b>위 상품의 구매조건 확인 및 결제진행 동의</b><font color="red">*</font>
</span>
<span>
<div align="center">
<p id="calc_result" style="font-size: 30px"><b>결제금액: </b></p> <br>
<input type="submit" value="구매하기">
</div>
</span>
</form>
</footer>
</body>
</html>
HTML을 이용하여 제작한 간단한 자기소개 홈페이지 입니다.
728x90
반응형