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">&nbsp;&nbsp;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>&nbsp;&nbsp;시간표 (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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    <tr  bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">12:00-<br>12:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">13:00-<br>13:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">14:00-<br>14:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">15:00-<br>16:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">16:00-<br>16:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">17:00-<br>17:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                    </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    <tr bgcolor=white>
                        <td width=35 align=center><font size="1.5">11:00-<br>11:50</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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">&nbsp;컴퓨터공학 분야 전반에 관심이 있고, 특히 추후 <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">&nbsp;최근 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="이미지 없음">&nbsp;</a>
            <a href = "https://keydi.tistory.com">
                <img src="img/tistory.png" width="50px" height="50px" alt="이미지 없음">&nbsp;</a>
            <a href = "https://github.com/pkd98">
                <img src="img/github.png" width="50px" height="50px" alt="이미지 없음">&nbsp;</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">&nbsp;&nbsp;상품구매폼(폼만들기 연습)</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
반응형