본문 바로가기
Project/Web | Server

나만의 웹 페이지 만들기

by 코젼 2022. 7. 13.
728x90
반응형

2022-07-13

👩‍💻 개인 프로젝트

▪️ 김지연

🕝 개발 기간

▪️ 2022.07.12 ~ 2022.07.12(1일 단기 프로젝트)

📢 Log

◾ 2022.07.12 - 오전

▪️ homepage.html 생성

▪️ header.html 생성

▪️ menu_bar.html 생성

▪️ main_window.html 생성

◾ 2022.07.12 - 오후

▪️ html 구현 완료

▪️ menu 버튼 각각 클릭했을 때 오른쪽 frame에 각 내용을 출력합니다.

💾 소스코드

📢 zip 용량이 너무 커서 분할 압축하였습니다.

JiyeonWeb.vol1.egg
10.00MB
JiyeonWeb.vol2.egg
10.00MB
JiyeonWeb.vol3.egg
5.77MB

💾 프로젝트 기술서

나만의_홈페이지_만들기.pptx
4.83MB

📝 homepage.html

<frameset>
    <frameset cols="27%, *">
        <frameset rows="33%, *">
            <!-- 상단부 -->
            <frame src="header.html" name="Header" noresize scrolling=no frameborder="0"></frame>
            <!-- 메뉴바 -->
            <frame src="menu_bar.html" name="Menu" noresize scrolling=no frameborder="0"></frame>

        </frameset>
        <!-- 오른쪽 frame -->
        <frame src="main_window.html" name="Main" noresize scrolling=auto frameborder="0"></frame>
    </frameset>
</frameset>

📝 header.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>상단부</title>

    <link rel="stylesheet" href="css\style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>
</head>

<body class="header_body">
    <section>
        <div class="gd_img"><img src="img/gumdoong.jpg" width="200px" height="200px"></div>
        <div>
            <div class="gd_img2"><img src="img/gumdoong2.jpg" width="150px" height="150px"></div>
            <div id="header_text"><a href="main_window.html" target="Main">🌠JYEON🌠</a></div>
        </div>
    </section>
    

</body>

</html>

📝 main_window.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>메인</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>
</head>

<body class="main_body">
    <div class="text"><b>취뽀하자!!!!!😎</b></div>
    <h6>귀요미 김지연 화이팅 아자..아좌좟..!!</h6>
    <div class="box1"><span class="my_img"><img src="img/jiyeon.jpg" width="250" height="350"></span></div>
</body>

</html>

📝 menu_bar.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>메뉴창</title>

    <script type="text/javascript">
        function select_menu() {
            for (i = 0; i < document.myForm.menu.length; i++) {
                if (document);
            }
        }
    </script>

    <link rel="stylesheet" href="css\style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>

</head>

<body class="menu_body">

    <h3 id="menu_key"><b>MENU</b></h3>

    <form name="myForm">
        <div class="box"><a href="introduce.html" target="Main"><span onmouseover="this.style.color='rgb(84, 115, 255)';"
                    onmouseout="this.style.color='black';">
                    📢나의 소개</span></a></div>
        <div class="box"><a href="gumdoong.html" target="Main"><span onmouseover="this.style.color='rgb(84, 115, 255)';"
                    onmouseout="this.style.color='black';">😽져니의 반려묘</span></a></div>
        <div class="box"><a href="bucketlist.html" target="Main"><span
                    onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';">❤️버킷리스트</span></a></div>

        <div class="box"><a href="https://cojyeon.tistory.com/" target="Main"><span
                    onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';">
                    💻블로그</span></a></div>
    </form>

</body>

</html>

📝 introduce.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>나의 소개</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>
</head>

<body class="main_body">
    <section>
        <div class="float_left">
            <img class="box2" src="img/me.jpg"/>
        </div>
        <div class="float_left">
            <ol id="intro">
                <li>이름 : 김지연</li>
                <li>나이 : 23</li>
                <li>성별 : 여</li>
                <li>생년월일 : 2000. 10. 16</li>
                <li>띠 : 🐲</li>
                <li>별자리 : 천칭자리⚖️</li>
                <br>
                <li>희망 직종 : 웹 개발</li>
                <li>사용 언어 : Java, JavaScript, CSS, HTML</li>
                <li>Email : kdelay20@gmail.com</li>
                <li>Tistory : <a href="https://cojyeon.tistory.com/" target="Main" onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';">https://cojyeon.tistory.com/</a></li>
                <li>Instagram : <a href="http://www.instagam.com/0_0.jy" target="Main" onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';">http://www.instagam.com/0_0.jy</a></li>
                <br>

            </ol> 
        </div>
        
    </section>

    <div id="text1">>>> 김지연을 소개합니다😉😉😉</div>    
    <br>
    <li>은진 Blog : <a href=" https://20191281.notion.site/SW-6cd22683ab664fcba20eae2a34bbe7e9" target="Main" onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';"> https://20191281.notion.site/SW-6cd22683ab664fcba20eae2a34bbe7e9</a></li>
    <li>수빈 Blog : <a href="https://blog.naver.com/lsjdltnqls1110" target="Main" onmouseover="this.style.color='rgb(84, 115, 255)';" onmouseout="this.style.color='black';">https://blog.naver.com/lsjdltnqls1110</a></li>
</body>

</html>

📝 gumdoong.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>검둥이</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>
</head>

<body class="main_body">
    <h3>우리 집 반려묘 😽검둥이😽를 소개합니다 ❤️</h3>
    <div class="align_center">
        <img class="box3" src="img/1.jpg"/>
        <img class="box3" src="img/2.jpg"/>
        <img class="box3" src="img/3.jpg"/>
        <img class="box3" src="img/4.jpg"/>
    </div>

    <div class="align_center">
        <img class="box3" src="img/5.jpg"/>
        <img class="box3" src="img/6.jpg"/>
        <img class="box3" src="img/7.jpg"/>
        <img class="box3" src="img/8.jpg"/>
    </div>

    <div class="align_center">
        <img class="box3" src="img/9.jpg"/>
        <img class="box3" src="img/10.jpg"/>
        <img class="box3" src="img/11.jpg"/>
        <img class="box3" src="img/12.jpg"/>
    </div>
</body>

</html>

📝 bucketlist.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>버킷리스트</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
    </style>

    <script type="text/javascript">
        function check_box(check) {
            if(check.checked == true) {
                alert("버킷리스트 성공! 축하드려요🎉");
            }
            else {
                alert("체크를 해제했습니다.");
            }
        }
    </script>
</head>

<body class="main_body">
    <form name="myForm" class="align_center">
        <fieldset class="float_left">
            <legend>2022 Bucket List</legend>
            <table class="float_left">
                <tr>
                    <td>
                        <p><input type="checkbox" name="check" value = "1번" onclick="check_box(this)"> ⭐취업 성공⭐</p>
                        <p><input type="checkbox" name="check" value = "2번" onclick="check_box(this)" checked> 📝정보처리기사 취득</p>
                        <p><input type="checkbox" name="check" value = "3번" onclick="check_box(this)" >📝프로젝트 10개 이상 하기</p>
                        <p><input type="checkbox" name="check" value = "4번" onclick="check_box(this)">📝Tistory</p>
                        <p><input type="checkbox" name="check" value = "5번" onclick="check_box(this)">📝To Do Mate</p>
                        <p><input type="checkbox" name="check" value = "6번" onclick="check_box(this)">📝Github</p>
                        <p><input type="checkbox" name="check" value = "7번" onclick="check_box(this)">📝Back-End</p>
                        <p><input type="checkbox" name="check" value = "8번" onclick="check_box(this)">📝Front-End</p>
                        <p><input type="checkbox" name="check" value = "9번" onclick="check_box(this)">📝졸업작품 PASS</p>
                        <p><input type="checkbox" name="check" value = "10번" onclick="check_box(this)">📘다이어리 꾸준히 적기</p>
                        <p><input type="checkbox" name="check" value = "11번" onclick="check_box(this)">🥄안 먹어본 음식 3가지 이상 도전!</p>
                        <p><input type="checkbox" name="check" value = "12번" onclick="check_box(this)">🥄싫어하던 음식 먹어보기</p>
                        <p><input type="checkbox" name="check" value = "13번" onclick="check_box(this)">🥄좋아하는 음식으로 소확행 챙기기😜</p>
                        <p><input type="checkbox" name="check" value = "14번" onclick="check_box(this)">💊영양제 잘 챙겨먹기</p>
                        <p><input type="checkbox" name="check" value = "15번" onclick="check_box(this)">📚3개월에 1권씩 독서하기</p>
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>

</body>

</html>

📝 style.css

body {
  font-family: "Jua", sans-serif;
}

.box {
  width: 200px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  margin: 30px auto;
  border: 1px dashed rgb(48, 56, 203);
  box-shadow: 0px 0px 1px 1px;
  background-color: white;
}

.box1 {
  width: 30em;
  height: 340px;
  text-align: center;
  margin: 40px auto;
  border: 3px dotted white;
  background-color: #9cb6dc;
  box-shadow: 0px 0px 1px 2px rgb(25, 17, 36);
  padding: 40px;
}

.box2 {
  margin: 30px;
  width: 350px;
  height: 400px;
  border: 3px solid rgb(56, 61, 149);
  border-radius: 50px;
  background-color: gray;
  text-align: center;
  margin-left: 20px;
}

.box3 {
  margin:10px;
  margin-left: 24px;
  width: 180px;
  height: 210px;
  border: 3px solid rgb(56, 61, 149);
  border-radius: 50px;
}

.box4 {
  margin:10px;
  margin-top: 20px;
  width: 25em;
  height: 30em;
  border: 3px solid rgb(56, 61, 149);
}

.box1 > .my_img {
  border-radius: 3px;
}

.text {
  font-size: 40px;
  text-align: center;
}

.align_center {
  text-align: center;
}

#text1 {
  font-size: 25px;
  margin-left: 1em;
  clear:both;
}

.float_left {
  float:left;
}

#intro {
  font-size: 20px;
  margin-top: 3em;
  list-style-type: square;
}

h3 {
  font-size: 35px;
  text-align: center;
}

h6 {
  margin-top: 10px;
  text-align: center;
}

a {
  text-decoration: none;
}

b {
  color: black;
}
#menu_key {
  text-align: center;
  color: white;
  font-size: 40px;
}

p {
  font-size: 17px;
}

legend {
  font-size: 30px;
  color: rgb(48, 56, 203);
  margin: 20px;
}

td {
  text-align: left;
}

fieldset {
  width: 400px;
  height: 700px;
}

#header_text {
  font-size: 20px;
  margin-bottom: 30px auto;
  float: right;
  color: rgb(48, 56, 203);
  text-align: center;
}

.main_body {
  background-color: #cbdcf3;
}

.header_body {
  background-color: #abcaf0;
}

.menu_body {
  background-color: #cbdcf3;
}

.gd_img {
  width: 20px;
  height: 20px;
  text-align: center;
}

.gd_img2 {
  margin-left: 10em;
  text-align: center;
}

#flower {
  vertical-align: top;
}

 

728x90
반응형

'Project > Web | Server' 카테고리의 다른 글

Point API - TDD 개발하기  (0) 2024.06.18
사내 출퇴근 프로그램 API 개발  (0) 2024.06.08

관련글

댓글

티스토리툴바