-
간단한 자기소개 홈페이지 (HTML 실습)Dev 2022. 6. 12. 02:09728x90
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반응형'Dev' 카테고리의 다른 글
맥북 eclipse 갑자기 안열림 (0) 2023.09.05