HTML+CSS/CSS
과제(8)-홈페이지 만들기
두설날
2024. 4. 12. 16:23
*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*
앞서 배운내용으로 과제 만들기 닷홈 홈페이지 연결
1.메인페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>닷홈 호스팅</title>
<link rel="stylesheet" href="./index_style.css">
<style>
a:link {text-decoration: none; color: black;}
a:visited {text-decoration:none; color:black;}
a:active {text-decoration: underline; color: black}
#container {
width: 1000px;
margin: 0 auto;
}
div {
padding: 20px;
border: 5px solid white;
border-radius: 20px;
}
#header {
padding: 20px;
background-color: white;
border: 5px solid black;
margin-bottom: 20px;
text-align: center;
border-radius: 20px;
}
#sidebar1 {
width: 400px;
height: 300px;
float: left;
background-color: white;
margin-right: 20px;
margin-bottom: 20px;
border: 5px solid black;
text-align: center;
line-height: 250px;
}
#sidebar2 {
width: 400px;
height: 300px;
float: right;
background-color: white;
margin-left: 20px;
margin-bottom: 20px;
border: 5px solid black;
text-align: center;
line-height: 250px;
}
#sidebar3 {
width: 400px;
height: 300px;
float: left;
background-color: white;
margin-right: 20px;
margin-bottom: 20px;
border: 5px solid black;
text-align: center;
line-height: 250px;
}
#sidebar4 {
float: right;
width: 400px;
height: 300px;
margin-left: 20px;
margin-bottom: 20px;
background-color: white;
border: 5px solid white;
text-align: center;
line-height: 250px;
}
@import url(https://fonts.googleapis.com/css?family=Lato:300);
.container{
text-align: center;
background-color: white;
overflow: hidden;
}
.box:nth-child(2n-1){
background-color: rgba(0,0,0,0.05);
}
.box{
display: inline-block;
height: 200px;
width: 35%;
position: relative;
/*margin:0 -4px -5px -2px;*/
transition: all .2s ease;
}
.box p{
color: #777;
font-family: Lato,"Helvetica Neue" ;
font-weight: 300;
position: absolute;
font-size: 20px;
width: 100%;
height: 25px;
text-align: center;
bottom: 0px;
margin: 0;
top:160px;
background-color: #fff;
opacity: 0;
text-transform: uppercase;
transition: all .2s ease;
}
.box:hover p{
bottom:0px;
top:175px;
opacity: 1;
transition: all .2s ease;
z-index: 2;
}
@media (max-width: 700px){
.box{
width: 50%;
}
.box:nth-child(2n-1){
background-color: inherit;
}
.box:nth-child(4n),.box:nth-child(4n-3) {
background-color: rgba(0,0,0,0.05);
}
}
@media (max-width: 420px){
.box{
width: 100%;
}
.box:nth-child(4n),.box:nth-child(4n-3){
background-color: inherit;
}
.box:nth-child(2n-1){
background-color:rgba(0,0,0,0.05);
}
}
.clock{
border-radius: 60px;
border: 3px solid #fff;
height: 80px;
width: 80px;
position: relative;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
}
.clock:after{
content: "";
position: absolute;
background-color: #fff;
top:2px;
left: 48%;
height: 38px;
width: 4px;
border-radius: 5px;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
-webkit-animation: grdAiguille 2s linear infinite;
animation: grdAiguille 2s linear infinite;
}
@-webkit-keyframes grdAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes grdAiguille{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.clock:before{
content: "";
position: absolute;
background-color: #fff;
top:6px;
left: 48%;
height: 35px;
width: 4px;
border-radius: 5px;
-webkit-transform-origin: 50% 94%;
transform-origin: 50% 94%;
-webkit-animation: ptAiguille 12s linear infinite;
animation: ptAiguille 12s linear infinite;
}
@-webkit-keyframes ptAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes ptAiguille{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* -------------- Sablier -------------- */
.hourglass{
position: relative;
height: 80px;
width: 80px;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
border: 3px solid #fff;
border-radius: 80px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: hourglass 2s ease-in-out infinite;
animation: hourglass 2s ease-in-out infinite;
}
.hourglass:before{
content: "";
position: absolute;
top:8px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 37px 22px 0 22px;
border-color: #fff transparent transparent transparent;
}
.hourglass:after{
content: "";
position: absolute;
top: 35px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 22px 37px 22px;
border-color: transparent transparent #fff transparent;
}
@-webkit-keyframes hourglass{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes hourglass{
0%{transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
/* load6 */
.loader6{
position: relative;
width: 12px;
height: 12px;
top: 16%;
top: -webkit-calc(50% - 6px);
top: calc(50% - 6px);
left: 46%;
left: -webkit-calc(50% - 6px);
left: calc(50% - 6px);
border-radius: 12px;
background-color: black;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50% ;
-webkit-animation: loader6 1s ease-in-out infinite;
animation: loader6 1s ease-in-out infinite;
}
.loader6:before{
content: "";
position: absolute;
background-color: rgba(255, 255, 255, .5);
top: 0px;
left: 0px;
height: 12px;
width: 12px;
border-radius: 12px;
}
.loader6:after{
content: "";
position: absolute;
background-color: rgba(255, 255 ,255 ,.5);
top: 0px;
left: 25px;
height: 12px;
width: 12px;
border-radius: 12px;
}
@-webkit-keyframes loader6{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes loader6{
0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(180deg);}
}
</style>
</head>
<body>
<div class="container">
<header id="header">
<h1>메인페이지</h1>
</header>
<div id="sidebar1">
<h3><a href="./news.html">뉴스기사</a></h3>
</div>
<div id="sidebar2">
<h3><a href="./favorite.html">즐겨찾기</a></h3>
</div>
<div id="sidebar3">
<h3><a href="./resume.html">이력서</a></h3>
</div>
<div id="sidebar4">
<h3><a href="./login.html"><div class="box">
<div class="loader6"></div>
<p>로그인</p>
</div></a>
</h3>
</div>
</div>
</body>
</html>
2.즐겨찾기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>즐겨찾기 홈</title>
<style>
a:link {text-decoration: none; color: black;}
a:visited {text-decoration:none; color:black;}
a:active {text-decoration: underline; color: black}
#container {width: 100%;}
header {width: 100%;}
header > h1 {
text-align: center;
font-size: 3em;
}
#menus {
width: 100%;
}
#menus > div {
height: 300px;
border: 5px solid black;
margin-bottom: 15px;
position: relative;
border-radius: 20px;
}
#menus h2 {
position: absolute;
right: 3%;
bottom: 10px;
font-size: 2em;
color: white;
text-shadow: 3px 3px 5px white;
margin-bottom: 20px;
}
#menu1, #menu2, #menu3 {
width: 100%;
}
#menu1 {
background: url(./tistory.png) no-repeat center/cover;
margin: 20px;
}
#menu2 {
background: url(./save.png) no-repeat center/cover;
margin: 20px;
}
#menu3 {
background: url(./wanted.png) no-repeat center/cover;
margin: 20px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>즐겨찾기 홈</h1>
</header>
<section id="menus">
<div id="menu1">
<h2><a href="https://young0378.tistory.com/manage/posts/">내 티스토리 블로그로 가기</a></h2>
</div>
<div id="menu2">
<h2><a href="https://www.kua.go.kr/uapcb010/selectEmpmActPlanRgstGudn.do">국민취업지원 수당신청하러 가기</a></h2>
</div>
<div id="menu3">
<h2><a href="https://www.wanted.co.kr/">Wanted 사이트로 가기</a></h2>
</div>
</section>
</div>
<p><h4><a href="./index.html">메인페이지로 돌아가기</a></h4></p>
</body>
</html>
3. 이력서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이력서</title>
</head>
<body>
<h2>이력서 홈</h2>
<table border="1" width="700">
<caption><p><strong>이 력 서</strong></p></caption>
<colgroup>
<col style="width: 100px; background-color: gray;">
<col style="width: 100px; background-color: gray;">
</colgroup>
<tr>
<td rowspan="2">성명</td> <td>한글</td> <td>김대현</td> <td>생년월일</td> <td>1998.12.21</td> <td rowspan="4"> <img src="./project.png" alt="project"></td>
</tr>
<tr>
<td>영문</td> <td>DaeHyon Kim</td> <td>블로그</td> <td>https://young0378.tistory.com/manage/posts/</td>
</tr>
<tr>
<td colspan="2">휴대전화</td> <td>010-7674-0721</td> <td>이메일</td> <td>heonk0378@naver.com</td>
</tr>
<tr>
<td colspan=2>주소</td> <td colspan="3">서울시 광진구 동일로 459</td>
</tr>
</table>
<table border="1" width="700">
<p>핵심역량</p>
<td>
<textarea name="content" cols="95" rows="10"></textarea>
</td>
</table>
<table border="1" width="700">
<p>기타역량</p>
<td>
<textarea name="content" cols="95" rows="10"></textarea>
</td>
</table>
<table border="1" width="700">
<p>경력</p>
<tr>
<td>기간</td><td>회사명</td><td>담당업무</td><td>직위</td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
<tr>
<td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td> <td><textarea name="content"></textarea></td>
</tr>
</table>
<p><h4><a href="./index.html">메인페이지로 돌아가기</a></h4></p>
</body>
</html>
4.뉴스기사 홈페이지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뉴스기사 홈</title>
<style>
a:link {text-decoration: none; color: black;}
a:visited {text-decoration:none; color:black;}
a:active {text-decoration: underline; color: black}
#align-center { text-align: center;}
.under { text-decoration: underline;}
.txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
@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;
}
.fontface { font-family: 'TTLaundryGothicB'}
h2 {font-size: 30px; text-align: center; }
p {background-color: #e5e6e6;}
</style>
</head>
<body>
<h2>뉴스기사 홈</h2>
<p><img src="./news.png" alt="뉴스기사"></p>
<p id="align-center" class="txt fontface">박단 대전협 비대위원장, 용산 방문 내부 공지</p>
<p id="align-center" class="txt fontface align-justify">"대통령이 나오는 것이라 해결 시도해볼 가치"
지난달 31일 서울 용산구 대한의사협회에서 열린 비상대책위원회 회의에 참석한 박단 대한전공의협의회 비대위원장(오른쪽). 연합뉴스
지난달 31일 서울 용산구 대한의사협회에서 열린 비상대책위원회 회의에 참석한 박단 대한전공의협의회 비대위원장(오른쪽). 연합뉴스</p>
<P id="align-center" class="txt fontface">윤석열 대통령과 박단 대한전공의협의회(대전협) 비상대책위원장이 4일 오후 만난다. 윤 대통령이 전공의들에게 직접 대화를 제안한 지 이틀 만이다.</P>
<p id="align-center" class="under txt fontface">
박 비대위원장은 이날 대전협 대의원 내부 공지를 통해 “오늘 윤 대통령과 만난다”며 “비대위 내에서 충분한 시간의 회의를 거쳐 결정한 사안”이라고 밝혔다. 대통령실도 “전공의단체 대표한테서 오늘 오후에 오겠다는 연락을 받았다”고 확인했다.
</p>
<p id="align-center" class="fontface">
박 비대위원장은 “현 사태는 대통령 의지로 시작된 것으로 생각한다”며 “이번 만남은 대통령이 나오는 것이라 10일 총선 전에 한 번쯤 전공의 입장을 직접 전달하고 해결을 시도해 볼 가치가 있다고 판단했다”고 설명했다.
</p>
<p><h4><a href="./index.html" class="txt fontface" color="black">메인페이지로 돌아가기</a></h4></p>
</body>
</html>5.로그인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
a:link {text-decoration: none; color: black;}
a:visited {text-decoration:none; color:black;}
a:active {text-decoration: underline; color: black}
html, body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: springgreen;
}
table {
width: 50%;
border-radius: 20px;
text-align: center;
padding: 8px;
border: 1px solid #dddddd;
border-radius: 20px;
border-color: black;
border: none;
}
#padding1 {
background-color: white;
padding: 10px 30px 20px 40px;
padding-block: white;
border-color: none;
border-radius: 20px;
border: none;
}
.input {
box-sizing: border-box;
border:none;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
input [type='text']{
border-radius: 15px;
}
input[type='text']:focus {
border: 3px dotted black;
}
input [type='password']{
border-radius: 15px;
}
input[type='password']:focus {
border: 3px dotted black;
}
</style>
</head>
<body>
<table border="1" width="300">
<td id="padding1">
<h1>로그인 화면</h1>
<div style="width: 400px; height: 200;" >
<p>아이디: <input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid" id="userid"></p>
<p>비밀번호: <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw"></p>
<div >
<button class="login-btn"> 로그인 하기 </button>
</div>
<a href="./regist.html">회원가입</a>
<a href="">아이디.비밀번호 찾기</a>
</div>
</td>
</table>
</body>
</html>
6.회원가입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
a:link, a:visited {text-decoration: none; color: black;}
a:active {text-decoration: underline; color: black}
#container {
width: 100%;
}
header {
width: 100%;
}
header > h1 {
text-align: center;
font-size: 3em;
}
#cont1 {
position: relative;
width: 800px;
height: 750px;
margin: 0 auto;
display: flex;
align-items: center;
background-color: white;
border: 5px solid black;
border-radius: 20px;
flex-direction: column;
text-align: center;
}
.input {
box-sizing: border-box;
width: 100%;
padding: 10px 20px;
margin: 5px 0;
}
input[type='text']:focus {
border: 3px dotted black;
}
input[type='password']:focus {
border: 3px dotted black;
}
input[type='name']:focus {
border: 3px dotted black;
}
input[type='phone-number']:focus {
border: 3px dotted black;
}
</style>
</head>
<body>
<div class="container">
<header id="padding1">
<h1>회원가입</h1>
</header>
<div id="cont1" style="width: 400px; height: 200;" >
<p>아이디 등록 <br><input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid" id="userid">
<button>중복확인</button>
</p>
<p>비밀번호 등록<br><input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw">
</p>
<p>비밀번호 재확인 <br><input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw">
</p>
<p>이름 <br><input type="name" maxlength="10" placeholder="이름을 입력하세요" name="username" id="username">
</p>
<p>성별: <label for="male">남자</label><input type="radio" name="gender" value="남자" id="male" checked><label for="femail">여자</label><input type="radio" name="gender" value="여자">
</p>
<p>생년월일 선택</p>
<p><input type="date"></p>
<p>휴대전화 등록</p>
<p><input type="phone-number" placeholder="휴대번호를 입력하세요"></p>
<p>이메일 등록</p>
<p><input type="name" placeholder="이메일을 입력하세요"></p>
<button type="botton">회원가입 하기</button>
</div>
</div>
<a href="./login.html">뒤로 돌아가기</a>
</body>
</html>