Web
나만의 웹 사이트 꾸미기..? 4
dustKim
2024. 4. 14. 17:25
이번에는 웹 사이트 홈, 즐겨찾기, 이력서 페이지 모두 조금 건드려보았다.
(로그인과 회원가입, 뉴스기사 페이지는 지난번에 했기 때문에 제외함)
예전 홈페이지
정말 아~~무것도 없다.
이번에 꾸민 홈페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김원진의 홈페이지</title>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
* { font-family: 'TTLaundryGothicB'; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; color: gray; }
a:hover { text-decoration: underline; }
body {
text-align: center;
background-image: url(./index배경.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
h2 { font-size: 50px; }
}
</style>
</head>
<body>
<p><a href="./login.html">로그인</a> <a href="./regist.html">회원가입</a></p>
<h2>김원진의 홈페이지</h2>
<p>환영합니다!</p>
<img src="./github.png" alt=""><br><br><br>
<a href="./news.html"><img src="./축구.png" alt="축구" width="20" height="20">스포츠 뉴스(축구)</a><br><br>
<a href="./favorite.html"><img src="./star.png" alt="즐겨찾기" width="20" height="20">즐겨찾기</a><br><br>
<a href="./resume.html"><img src="./이력서 이미지.png" alt="이력서" width="20" height="20">이력서</a>
</body>
</html>
예전 즐겨찾기 페이지
여기도 휑하다...
이번에 꾸민 즐겨찾기 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즐겨찾기</title>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
body {
background-image: url(./favorite배경.png);
h2 { text-align: center; }
color: white;
padding: 10px;
font-family: 'TTLaundryGothicB';
}
li {
background-color: rgb(113, 128, 141);
border: 2px solid black;
border-radius: 20px;
margin-bottom: 10px;
padding-top: 10px;
padding-left: 20px;
}
#back {
margin: 0 auto;
a { color: white; }
a:visited { text-decoration: none; color: gray; }
a:hover { text-decoration: underline; }
}
</style>
</head>
<body>
<h2>즐겨찾기 목록</h2>
<div id="list">
<li id="video">인터넷강의 사이트
<p><a href="https://www.ddazua.com/#"><img src="https://www.ddazua.com/theme/oklassedu/pix/images/hd_logo.png" alt="따즈아" width="150" height="100"></a></p>
</li>
<li id="youtube">유튜브
<p><a href="https://www.youtube.com/"><img src="./유튜브.png" alt="유튜브" width="150" height="100"></a></p>
</li>
<li id="webtoon">웹툰
<p><a href="https://comic.naver.com/index"><img src="./네이버웹툰.png" alt="네이버 웹툰" width="150" height="100"></a></p>
</li>
</div>
<p id="back"><a href="./index.html">뒤로가기</a></p>
</body>
</html>
어두운 느낌으로 해보고 싶어서 나름 열심히 만들어 봤지만... 디자인과는 안 친한 걸로..
예전 이력서 페이지
여기는 그냥 배경만 좀 넣으려고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이력서</title>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
body {
background-image: url(./resume배경.png);
font-family: 'TTLaundryGothicB';
text-align: center;
}
a:hover { text-decoration: underline; }
a:visited { text-decoration: gray; }
table {
margin: 10px auto;
background-color: white;
}
</style>
</head>
<body>
<table border="2" width="1200" height="1500">
<caption><p><strong>이력서</strong></p></caption>
<colgroup>
<col style="width: 100px; background-color: rgb(192, 186, 186);">
</colgroup>
<tr>
<th width="70">성명</th>
<th colspan="2">김00</th>
<th rowspan="5" width="300"><img src="./고양이.jpg" alt="냥이" width="350" height="400"></th>
</tr>
<tr>
<th>생년월일</th>
<th colspan="2">1990.00.00</th>
</tr>
<tr>
<th>연락처(핸드폰)</th>
<th colspan="2">010-0000-0000</th>
</tr>
<tr>
<th>e-mail</th>
<th colspan="2">kim0000@kim0000.com</th>
</tr>
<tr>
<th>현 주소</th>
<th colspan="2">서울시 동작구</th>
</tr>
<tr>
<th rowspan="4">학력사항</th>
<th style="background-color: rgb(192, 186, 186);">학교명</th>
<th style="background-color: rgb(192, 186, 186);">기간</th>
<th style="background-color: rgb(192, 186, 186);">전공</th>
</tr>
<tr>
<th height="50">00중학교</th>
<th>0000.00.00~0000.00.00</th>
<th>중학생</th>
</tr>
<tr>
<th height="50">00고등학교</th>
<th>0000.00.00~0000.00.00</th>
<th>고등학생</th>
</tr>
<tr>
<th height="50">00대학교</th>
<th>0000.00.00~0000.00.00</th>
<th>대학생</th>
</tr>
<tr>
<th rowspan="4">경력사항</th>
<th style="background-color: rgb(192, 186, 186);">직장명</th>
<th style="background-color: rgb(192, 186, 186);">기간</th>
<th style="background-color: rgb(192, 186, 186);">주요 업무</th>
</tr>
<tr>
<th height="50"></th>
<th></th>
<th></th>
</tr>
<tr>
<th height="50"></th>
<th></th>
<th></th>
</tr>
<tr>
<th height="50"></th>
<th></th>
<th></th>
</tr>
<tr>
<th rowspan="4">자격증 취득사항</th>
<th style="background-color: rgb(192, 186, 186);">자격증명</th>
<th style="background-color: rgb(192, 186, 186);">취득일</th>
<th style="background-color: rgb(192, 186, 186);">취득기관</th>
</tr>
<tr>
<th height="50">정보처리기사</th>
<th>0000.00.00</th>
<th></th>
</tr>
<tr>
<th height="50">컴퓨터활용능력 1급</th>
<th>0000.00.00</th>
<th></th>
</tr>
<tr>
<th height="50"></th>
<th></th>
<th></th>
</tr>
<tr>
<th height="400">지원동기</th>
<th colspan="3">지원동기.....</th>
</tr>
</table>
<a href="./index.html">뒤로가기</a>
</body>
</html>
배경을 넣고 위치를 바꿔주고 폰트를 바꿔주는 정도만 했다..