본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그
개인 프로젝트

부스트코스 - 나를 소개하는 홈페이지 만들기

by dhl7799 2024. 2. 27.

홈

 

 

 

자기소개

 

 

 

내사진

 

 

 

현재시간

 

 

코드

aboutme.html

더보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="css/aboutme.css"/>
<script src="js/includeHTML.js"></script>
</head>
<body>
<header data-include-path="common/header.html"></header>

<div id="mainPage">
<div id="textArea">
<h1 style="display: block; margin-bottom: -5px;">이런것을 잘해요?</h1>
<p style="display: block; margin-bottom: 5px;">2024-02-26
10:45:00,017 INFO [@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@]
############ UPDATE BRD_ATCL IMPO_ANCNT_YN ################
2024-02-26 10:45:00,059 DEBUG
[@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@] ooo Using
Connection [@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@]
2024-02-26 10:45:00,059 DEBUG
[@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@] ==> Preparing:
UPDATE brd_atcl SET impo_ancmt_yn = 'N' WHERE impo_ancmt_yn = 'Y'
10:45:00,059 DEBUG
[@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@] ==>
Parameters:</p>

<h1 style="display: block; margin-top: 40px; margin-bottom: 0px;">나의 포트폴리오</h1>
<a href="https://dhl7799.tistory.com/" style="display: block; margin-bottom: -5px;">https://dhl7799.tistory.com/</a>
<p style="display: block; margin-top: 3px;">제 홈페이지 입니다. 이곳에서
많은 개발코드를 볼 수 있습니다.</p>
<a href="https://github.com/dhl7799" style="display: block; margin-bottom: -5px;">https://github.com/dhl7799</a>
<p style="display: block; margin-top: 3px;">제가 주로 개발하는
소스코드입니다. 이곳에서 많은 부분을 확인할 수 있습니다.</p>

<h1 style="display: block; margin-top: 40px;">나의 최근 프로젝트 설명</h1>
<p style="display: block; margin-bottom: -5px;">함께 개발하고 같이 성장하고
싶어요</p>
</div>

</div>

<footer data-include-path="common/footer.html"></footer>
</body>
</html>

index.html

더보기

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/includeHTML.js"></script>
</head>
<body>
<header data-include-path="common/header.html"></header>
<div id="mainPage">
<h2 style="display: block; margin-bottom: 5px; margin-top: -10px">웹프론트엔드
개발자~! dhl7799</h2>
<p style="display: block; margin-bottom: -15px;">함께 개발하고 같이 성장하고
싶어요</p>
<p style="display: block;">부산시 수영구 어딘가 살고 있어요!</p>
<div id="sbgroup">
<Button onclick="window.location.href = 'aboutme.html';"
style="background-color: #8cbbc2; color: white; border: none; width: 130px; height: 130px; margin-right: 10px; font-size: 25px">자기소개</Button>
<Button onclick="window.location.href = 'photo.html';"
style="background-color: #8cbbc2; color: white; border: none; width: 130px; height: 130px; font-size: 25px">내사진</Button>
</div>
<img src="img/img.png"
style="margin-top: 15px; width: 641px; height: 375px;">
</div>
<footer data-include-path="common/footer.html"></footer>
</body>
</html>

photo.html

더보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="css/photo.css"/>
<script src="js/includeHTML.js"></script>
</head>
<body>
<header data-include-path="common/header.html"></header>

<div id="mainPage">
<div id="textArea">
<img src="img/crong.jpg"
style="margin-top: 15px; width: 300px; height: 210px;">
<div id="textArea2">
<p style="display: block; margin-left: 50px;">1997.02.26</p>
<p style="display: block; margin-left: 50px;">어릴적 모습</p>
</div>
</div>
<hr
style="width: 98%; border: 0; height: 3px; background: #ecf1f0; margin-top: 30px; margin-bottom: -10px;">
<div id="textArea">
<img src="img/old.jpg"
style="margin-top: 15px; width: 300px; height: 310px;">
<div id="textArea2">
<p style="display: block; margin-left: 50px;">2024.02.26</p>
<p style="display: block; margin-left: 50px;">현재</p>
</div>
</div>
</div>

<footer data-include-path="common/footer.html"></footer>
</body>
</html>

header.html

더보기

<header class="header">
<div id="buttons">
<button class="headerButtons"
onclick="window.location.href = 'index.html';">홈</button>
<button class="headerButtons"
onclick="window.location.href = 'aboutme.html';">자기소개</button>
<button class="headerButtons"
onclick="window.location.href = 'photo.html';">내사진</button>
<button class="headerButtons"
onclick="window.location.href = 'http://localhost:8080/aboutme/today';">몇시에요</button>
</div>
</header>

footer.html

더보기

<footer>
<p style="display: block; margin-bottom: -15px; color: gray">donghyundhl@naver.com</p>
<p style="display: block; color: gray">https://github.com/dhl7799</p>
</footer>

includeHTML.js

header, footer 같은 공통부분을 import 하기위한 js파일

더보기

// include.js
window.addEventListener('load', function() {
    var allElements = document.getElementsByTagName('*');
    Array.prototype.forEach.call(allElements, function(el) {
        var includePath = el.dataset.includePath;
        if (includePath) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    el.outerHTML = this.responseText;
                }
            };
            xhttp.open('GET', includePath, true);
            xhttp.send();
        }
    });
});

aboutme.css

더보기

.header {
position: relative;
background-color: white;
height: 100px;
padding: 10px 0;
}

body {
margin: 0 auto;
width: 60%;
background-color: #ecf1f0;
}

footer {
background-color: white;
height: 50px;
padding: 10px 0;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
bottom: 0;
width: 100%;
}

#buttons {
position: absolute;
top: 5px;
right: 0;
margin-top: 20px;
margin-right: 10px;
}

#mainPage {
height: 715px;
background-color: white;
margin-top: 10px;
}

#sbgroup {
display: flex;
justify-content: center;
align-items: center;
}

#textArea {
margin-left: 100px;
padding-top: 20px;
width: 1000px;
}

.headerButtons {
font-weight:bold;
width: 150px;
height: 40px;
background-color: #8cbbc2; 
color: #655b98; 
border: none; 
border-radius: 5px; 
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
transition: box-shadow 0.3s ease; 
}

.headerButtons:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); 
}

index.css

더보기

.header {
position: relative;
background-color: white;
height: 100px;
padding: 10px 0;
}

body {
margin: 0 auto;
width: 60%;
background-color: #ecf1f0;
}

img {
border: 3px solid #ecf1f0; 
}

footer {
background-color: white;
height: 50px;
padding: 10px 0;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
bottom: 0;
width: 100%;
}

#buttons {
position: absolute;
top: 5px;
right: 0;
margin-top: 20px;
margin-right: 10px;
}

#mainPage {
height: 715px;
background-color: white;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#sbgroup {
display: flex;
justify-content: center;
align-items: center;
}

.headerButtons {
font-weight:bold;
width: 150px;
height: 40px;
background-color: #8cbbc2; 
color: #655b98; 
border: none; 
border-radius: 5px; 
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
transition: box-shadow 0.3s ease; 
}

.headerButtons:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5); 
}

photo.css

더보기

.header {
position: relative;
background-color: white;
height: 100px;
padding: 10px 0;
}

body {
margin: 0 auto;
width: 60%;
background-color: #ecf1f0;
}

img {
border: 10px solid #ecf1f0; 
}

footer {
background-color: white;
height: 50px;
padding: 10px 0;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
bottom: 0;
width: 100%;
}

#buttons {
position: absolute;
top: 5px;
right: 0;
margin-top: 20px;
margin-right: 10px;
}

#mainPage {
height: 715px;
background-color: white;
margin-top: 10px;
}

#sbgroup {
display: flex;
justify-content: center;
align-items: center;
}

#textArea {
margin-left: 100px;
padding-top: 20px;
width: 1000px;
display: flex;
}

#textArea2 {
display: flex;
flex-direction: column;
margin-top: 10px;
}

.headerButtons {
font-weight:bold;
width: 150px;
height: 40px;
background-color: #8cbbc2; 
color: #655b98; 
border: none; 
border-radius: 5px; 
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
transition: box-shadow 0.3s ease; 
}

.headerButtons:hover {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); 
}

'개인 프로젝트' 카테고리의 다른 글

메이플 보스 결정석 계산기  (0) 2024.05.18
부스트코스 - 네이버 예약  (0) 2024.03.13
부스트코스 - TODO 리스트  (0) 2024.02.27

관련글

티스토리툴바