개발/Html & css
HTML로 처음 만들었던 개인 홈페이지
actt
2017. 12. 12. 22:16
대학교 입학하고 1학년 1학기 중간고사에 html & css로 개인 홈페이지를 제작하는 것이 과제였다.
그 때 뭐하다가 시간이 촉박했는지는 기억이 안나는데 어쨌든, 하루만에 급하게 제작하느라 퀄리티가 많이 안좋다.
교수님이 간단하게 메인페이지랑 로그인, 회원가입만 구현하라고 하셨는데 너무 심심해서 그냥 페이지 몇개만 추가했었다.
부끄럽지만 그 당시, css를 외부 스타일 시트로 꺼내서 하는 방법 조차를 몰라서 그냥 내부로 때려박았던 같다. 그래서 페이지 당 평균 코드 200~300줄이다..
하단 푸터 코드를 직접 짜다가 왜인지 자꾸 제대로 적용이 안되서 클론 코딩했고, 로그인 폼과 회원가입 폼도 마찬가지다. 나머지 코드는 직접 짰다. 매우 허접하지만 그래도 만들고 나니 좀 뿌듯했던 것 같다.
main_page, login_page, join_page, introduce_page, error_page, content_java_page, class_data_page 총 7개 파일로 구성되어 있어 소스 코드는 main_page만 올리고, 전체 파일은 아래 첨부파일에 올렸다.
HTML 개인 홈페이지 프로젝트.zip>Output
>Source
main_page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/* 제작 : Cobox*/
/* 이 홈페이지에 사용된 대부분의 이미지는 저작권 상관 없이 무단 사용 가능한 이미지 공유 사이트 "pixabay"에서
제공받음.*/
/* 만약 실행하는데 문제가 생긴다면 구글 크롬 사용 권장.*/
*{
margin:0;
padding:0;
}
body {
background-color:#f2f0f0;
font-family:"맑은 고딕";
font-size:12px;
color:#444444;
}
ul{
list-style-type:none;
}
ul.item li{
float:left;
width:19%;
margin-left:1%;
text-align:center;
}
ul li:nth-child(5n-4){
margin:0;
}
ul.item li img{
width:300px;
height:300px;
max-width:100%;
}
.clear {
clear:both;
}
#new{
max-width:1600px;
margin:0 auto;
}
#new h3{
margin:20px 0;
}
#new h3 span{
padding-bottom:solid 2px #9bc32a;
}
#new h3 span{
color:#80a727;
}
#new .category{
margin-top:10px;
color:#80a727;
}
#new .title{
margin-top:5px;
color:#888888;
}
#new .view{
margin-top:5px;
color:#ff0000;
font-weight:bold;
}
#header{
height:135px;
position:relative;
/* border:solid 1px #ff0000; */
}
#logo{
position:relative;
top:30px;
left:30px;
/* border:solid 1px #0000ff; */
}
#top_menu{
position:absolute;
top:70px;
left:525px;
/* border:solid 1px #0000ff; */
}
#top_menu li{
display:inline;
}
#main_menu{
position:relative;
top:30px;
font-size:12px;
color:#ffffff;
background-color:#4e4c4d;
margin-top:15px;
padding:12px;
text-align:center;
/* border:solid 1px #0000ff; */
}
#main_menu li{
padding:0 20px 0 20px;
display:inline;
}
/* 하단 푸터*/
footer {
width:100%;
margin: 0 auto;
height:100px;
margin-top:30px;
border-top:solid 1px #bbbbbb;
}
.footer-inner{
max-width:400px;
margin:0 auto;
overflow:hidden;
}
footer .pg-logo {
float:left;
}
footer .pg-logo img{
max-width:100px;
height:auto;
}
footer #address {
float:left;
margin:20px 0 0 50px;
}
footer #footer_sns {
float:right;
margin:20px 10px 0 0;
}
footer #footer_sns li {
display:inline;
}
/* 하이퍼링크 표시 없애고 상황별 색 바꾸기*/
a{
text-decoration:none
}
style type="text/css"
a:link { color: red; text-decoration: none;}
a:visited { color: black; text-decoration: none;}
a:hover { color: blue; text-decoration: none;}
a:active { color:green; text-decoration: none;}
</style>
</head>
<body>
<div id="header">
<a href="main_page.html"><img id="logo" src="img/homepage.jpg" width="200" height="50"></a>
<ul id="top_menu">
<li><a href="main_page.html"> 홈 |</a></li>
<li><a href="login_page.html"> 로그인 |</a></li>
<li><a href="join_page.html"> 회원가입</a> |</li>
<li><a> 마이페이지 |</a></li>
<li><a> 내가 쓴 댓글 보기 |</a></li>
<li><a> 방명록 |</a></li>
<li><a> 이용안내 |</a></li>
<li><a> 문의하기 </a></li>
</ul>
<ul id="main_menu">
<li><a href="introduce_page.html"> 홈페이지 소개 |</a></li>
<li> IT 제품 리뷰 |</li>
<li> IT 이슈 |</li>
<li> 프로그래밍 |</li>
<li> 일상 게시판 |</li>
<li> 후기 게시판 |</li>
<li><a href="class_data.html"> 수업 자료 |</a></li>
</ul>
</div>
<center><img src=img/homepage.jpg width=100% height=250></center>
<!-- 해상도에 따라 간격이 안맞는 문제로 %개념으로 다시 코딩.-->
<div id="new">
<h3><span>HOT</span> 인기글 모아 보기</h3>
<hr color="green"> <br>
<ul class="item">
<li>
<a href="error_page.html"><img src="img/iphone.jpg" alt=""></a>
<b class="category">[IT 제품 리뷰]</b>
<p class="title">신형 스마트폰 전격 비교</p>
<span class="view">조회수 : 20,312</span>
</li>
<li>
<a href="error_page.html"><img src="img/power.jpg" alt=""></a>
<b class="category">[IT 제품 리뷰]</b>
<p class="title">충전기 고장 간단 해결법</p>
<span class="view">조회수 : 18,324</span>
</li>
<li>
<a href="error_page.html"><img src="img/kotlin.png" alt=""></a>
<b class="category">[IT 이슈]</b>
<p class="title">구글, 안드로이드 개발 언어로 코틀린 추가</p>
<span class="view">조회수 : 37,842</span>
</li>
<li>
<a href="error_page.html"><img src="img/in.jpg" alt=""></a>
<b class="category">[IT 이슈]</b>
<p class="title">4차 산업혁명 어떻게 대비해야하나?</p>
<span class="view">조회수 : 31,252</span>
</li>
<li>
<a href="content_java.html"><img src="img/java.jpg" alt=""></a>
<b class="category">[프로그래밍]</b>
<p class="title">JAVA 강의 2강</p>
<span class="view">조회수 : 16,434</span>
</li>
<li>
<a href="error_page.html"><img src="img/html.png" alt=""></a>
<b class="category">[프로그래밍]</b>
<p class="title">html & CSS 강의 1강</p>
<span class="view">조회수 : 15,232</span>
</li>
<li>
<a href="error_page.html"><img src="img/php.png" alt=""></a>
<b class="category">[프로그래밍]</b>
<p class="title">PHP 작업 환경 구축하기</p>
<span class="view">조회수 : 9,123</span>
</li>
<li>
<a href="error_page.html"><img src="img/ele.jpg" alt=""></a>
<b class="category">[일상]</b>
<p class="title">대통령 선거하고 온 날</p>
<span class="view">조회수 : 5,233</span>
</li>
<li>
<a href="error_page.html"><img src="img/dell.jpg" alt=""></a>
<b class="category">[후기 게시판]</b>
<p class="title">델 인스피론 15 7559 노트북 실사용 후기</p>
<span class="view">조회수 : 8,323</span>
</li>
<li>
<a href="error_page.html"><img src="img/movie.jpg" alt=""></a>
<b class="category">[후기 게시판]</b>
<p class="title">영화, 소셜 네트워크 감상 후기</p>
<span class="view">조회수 : 12,313</span>
</li>
</ul>
<div class="clear"></div>
</div><!-- new -->
<link rel="stylesheet" type="text/css" href="css/footer.css">
<footer> <br>
<div class="footer-inner">
<div class="pg-logo"><img src="img/tux.png"></div>
<ul>
<li>대표 : XXX</li>
<li>서울특별시 XX구 XX동 1234 우 : 123-1234</li>
<li>TEL : 032-123-1234 Email : email@domain.com</li>
<li>COPYRIGHT (C) XXX ALL RIGHTS RESERVED</li>
</ul>
</div>
</footer>
</body>
</html>