diff --git a/aboutme.html b/aboutme.html
new file mode 100644
index 0000000..cc6817a
--- /dev/null
+++ b/aboutme.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html >
+<head>
+<meta charset="EUC-KR">
+<title>메인화면</title>
+<style>
+	*{margin:0; padding:0; border:1px solid red;}
+	body{width:100%; margin:0 auto;
+		 background:#e6e6e6;}
+	a{text-decoration:none;}
+	ul{list-style:none;}
+	li{list-style:none;}
+	
+	nav{background:white; margin:10px 0px; padding:30px 0px; text-align:right; }
+
+	nav ul{display : inline-block; margin-right:80px; }
+	nav li {display : inline-block;
+			background-color:#48D1CC;
+			margin-left:10px;
+		   	width:160px;
+		   	height:40px;
+		   	line-height:40px; color:purple; font-weight:bold;
+			text-align:center; box-shadow: 2px 2px 20px grey;}
+	#content{margin-bottom:10px; padding:10px 100px 30px 100px;background:white;}
+	#content h2 {margin-top:30px;}
+	
+	footer{padding:20px; background-color:white; text-align:center; color:grey;}
+	
+		
+</style>
+</head>
+<body>
+	<nav>
+		<ul>
+			<li><a href="index.html">홈</a></li>
+			<li><a href="aboutme.html">자기소개</a></li>
+			<li><a href="photo.html">내사진</a></li>
+			<li><a href="http://localhost:8080/aboutme/today">몇시예요</a></li>			
+		</ul>
+	</nav>
+	<section id="content">
+		<h2>이런 것을 잘해요?</h2>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et ligula fermentum, mattis justo et, ultricies mauris.
+		Donec enim felis, elementum non leo sit amet, dignissim aliquet lacus. Donec suscipit, ex eget tempus interdum, 
+		eros tortor laoreet ipsum, quis ultrices dolor nunc non neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
+		posuere cubilia curae; Sed eu arcu metus. Proin urna dui, sodales id sem in, blandit consectetur augue. 
+		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
+		Aenean sit amet risus non mi cursus iaculis.</p>
+		
+		<h2>나의 포트폴리오</h2>
+		<p><a href="http://www.naver.com">www.my.com</a><br>제 홈페이지 입니다. 이곳에서 많은 개발코드를 볼 수 있습니다.</p>
+		<p><a href="http://www.naver.com">github.com/crong</a><br>제가 주로 개발하는 소스코드입니다. 이곳에서 많은 부분을 확인할 수 있습니다.</p>
+		
+		
+		<h2>나의 최근 프로젝트 설명</h2>
+		<p>최근 만든 프로젝트는 xxx입니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et ligula fermentum, mattis justo et, ultricies mauris.
+		Donec enim felis,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et ligula fermentum, mattis justo et, ultricies mauris.
+		Donec enim felis,</p>
+		
+		
+	</section>
+	<footer>
+		<p>crong@codesquad.kr</p>
+		<p>http://github.com/crong</p>
+	</footer>
+
+</body>
+
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0f3353f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html >
+<head>
+<meta charset="EUC-KR">
+<title>메인화면</title>
+<style>
+	*{margin:0; padding:0; border:1px solid red;}
+	body{width:100%; margin:0 auto;
+		 background:#e6e6e6;}
+	a{text-decoration:none;}
+	ul{list-style:none;}
+	li{list-style:none;}
+	
+	nav{background:white; margin:10px 0px; padding:30px 0px; text-align:right;}
+	nav ul{display : inline-block; margin-right:80px;}
+	nav li {display : inline-block;
+			background-color:#48D1CC;
+			margin-left:10px;
+		   	width:160px;
+		   	height:40px;
+		   	line-height:40px; color:purple; font-weight:bold;
+			text-align:center; box-shadow: 2px 2px 20px grey;}
+	#content{margin-bottom:10px; padding:30px; background:white; text-align:center}
+	#content h1, h4, ul{margin:10px;}
+	#content ul li {display: inline-block; background-color:#48D1CC; width:160px; height:160px; line-height:160px; margin:5px;
+					color:white; font-size:22px; box-shadow: 2px 2px 20px grey;}
+	footer{padding:20px; background-color:white; text-align:center; color:grey;}
+	
+		
+</style>
+</head>
+<body>
+	<nav>
+		<ul>
+			<li><a href="index.html">홈</a></li>
+			<li><a href="aboutme.html">자기소개</a></li>
+			<li><a href="photo.html">내사진</a></li>
+			<li><a href="http://localhost:8080/aboutme/today">몇시예요</a></li>			
+		</ul>
+	</nav>
+	<section id="content">
+		<h1>웹프론트엔드 개발자!! crong</h1>
+		<h4>함께 개발하고 같이 성장하고 싶어요<br>경기도 시흥시 장곡동 어딘가 살고 있어요!</h4>
+		<ul>
+			<li><a href="aboutme.html">자기소개</a></li>
+			<li><a href="photo.html">내사진</a></li>
+		</ul>
+		
+		<img alt="지도" src="img/worldmap.jpg" width="600px" height="400px"/>
+	</section>
+	<footer>
+		<p>crong@codesquad.kr</p>
+		<p>http://github.com/crong</p>
+	</footer>
+
+</body>
+
+</html>
diff --git a/photo.html b/photo.html
new file mode 100644
index 0000000..82a388b
--- /dev/null
+++ b/photo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html >
+<head>
+<meta charset="EUC-KR">
+<title>메인화면</title>
+<style>
+	*{margin:0; padding:0;}
+	body{width:100%; margin:0 auto;
+		 background:#e6e6e6;}
+	a{text-decoration:none;}
+	ul{list-style:none;}
+	li{list-style:none;}
+	
+	nav{background:white; margin:10px 0px; padding:30px 0px; text-align:right; }
+
+	nav ul{display : inline-block; margin-right:80px; }
+	nav li {display : inline-block;
+			background-color:#48D1CC;
+			margin-left:10px;
+		   	width:160px;
+		   	height:40px;
+		   	line-height:40px; color:purple; font-weight:bold;
+			text-align:center; box-shadow: 2px 2px 20px grey;}
+	#content{margin-bottom:10px; background:white;}
+	.article{padding:80px;  overflow:auto;}
+	.article p{font-size: 18px;font-weight:bold; margin-bottom:10px;}
+
+	.photo{border:8px solid grey; float:left; margin-right:100px;}
+	
+	
+	footer{padding:20px; background-color:white; text-align:center; color:grey;}
+	
+		
+</style>
+</head>
+<body>
+	<nav>
+		<ul>
+			<li><a href="index.html">홈</a></li>
+			<li><a href="aboutme.html">자기소개</a></li>
+			<li><a href="photo.html">내사진</a></li>
+			<li><a href="http://localhost:8080/aboutme/today">몇시예요</a></li>			
+		</ul>
+	</nav>
+	<section id="content">
+		<div class="article">
+			<img class="photo" alt="크롱" src="img/crong.jpg" width="400px" height="300px"/>
+			<p>2001.03.11</p>
+			<p>제가 크롱일때 찍은 사진입니다.</p>
+			<p>이 때는 뽀로로의 집에서 신나게 놀던 때입니다.</p>
+		</div>
+		<div class="article">
+			<img class="photo" alt="심슨" src="img/simpson.png" width="400px" height="300px"/>
+			<p>2031.03.11</p>
+			<p>결혼 후에는 이런 모습이네요.. @.@</p>
+			<p>건강한 모습을 유지하고 있습니다.</p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+			<p>Fusce et ligula fermentum, mattis justo et, ultricies mauris.
+			Donec enim felis</p>
+		</div>
+		
+		
+		
+	</section>
+	<footer>
+		<p>crong@codesquad.kr</p>
+		<p>http://github.com/crong</p>
+	</footer>
+
+</body>
+
+</html>
