- CSS : 메인페이지(index.html)
/* 메인페이지 */
.index {width: 900px; margin: 0 auto;}
.index::after {content: ''; display: block; clear: both;}
.index .mainbox {width: 640px; float: left; padding: 20px;}
.index .box {width: 630px; padding: 5px;}
.index .box h2, .index .box h3, .index .box p {margin: 10px 0;}
/* index : top */
.index .top {
width: 630px; height: 200px; background-size: 110%; background-position: -40px -170px; background-repeat: no-repeat;
background-image: url(images/index_top.png);
}
/* index : middle */
.index .character {
width: 295px; height: 80px; float: left; display: inline-flex;
padding: 10px; margin: 0 0 18px;
}
.index .character .text {padding: 15px 0; font-size: 16px;}
.index .character h3 {margin: 0;}
.index .profile {
width: 76px; height: 76px; margin: 0 13px 0 0;
border: 2px solid rgb(208, 95, 20);
}
/* index : bottom */
.index .bottom1 {
height: 180px; background-size: 120%; background-position: -58px -280px; background-repeat: no-repeat;
background-image: url(images/index_bottom1.png);
}
.index .bottom2 {
height: 180px; background-size: 130%; background-position: -100px -300px; background-repeat: no-repeat;
background-image: url(images/index_bottom2.png);
}
.index .bottom3 {
height: 180px; background-size: 100%; background-position-y: -180px; background-repeat: no-repeat;
background-image: url(images/dong_20th.jpg);
}
/* index : sidebar */
.index .sidebar {width: 220px; height: 300px; float: right;}
.index .sidebar a div {
margin: 35px auto 10px; padding: 10px; width: 80%; background-color: gold;
border: 1px solid black; border-radius: 10px;
}
.index .sidebar hr {margin: 5px;}
.index .sidebar a {text-align: center; text-decoration: none; color: rgb(80, 80, 80)}
.index .sidebar a:hover {color: blueviolet;}
.index .sidebar p {text-align: center;}- HTML : 메인페이지(index.html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모여봐요, 동물의 숲</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="homebox">
<a href="index.html" class="logo"></a>
</div>
</header>
<nav>
<div class="menubox">
<ul>
<li><a href="notice.html">공지사항</a></li>
<li><a href="free.html">자유게시판</a></li>
</ul>
</div>
</nav>
<main>
<div class="index">
<div class="mainbox">
<div class="box">
<div class="top">
</div>
<h2>모여봐요, 동물의 숲!</h2>
<p>새로운 생활을 위해 찾아온 이곳은 '자연 그대로의 무인도'. 사람의 손길이 닿지 않은 곳이었다.</p>
</div>
<hr>
<div class="box">
<h2>- 커몬섬의 NPC</h2>
<div class="character">
<div><img src="images/face/npc1.png" class="profile"></div>
<div class="text">
<h3>미소천사, 여울</h3>
<p>웃는 얼굴에 침 못 뱉는다.</p>
</div>
</div>
<div class="character">
<div><img src="images/face/npc2.png" class="profile"></div>
<div class="text">
<h3>척척박사, 부엉</h3>
<p>지혜를 한 번에 드러내지 말 것.</p>
</div>
</div>
<div class="character">
<div><img src="images/face/npc3.png" class="profile"></div>
<div class="text">
<h3>천재파일럿, 로드리</h3>
<p>나비처럼 부드럽게, 벌처럼 빠르게!</p>
</div>
</div>
<div class="character">
<div><img src="images/face/npc4.png" class="profile"></div>
<div class="text">
<h3>명언제조기, 해탈한</h3>
<p>배울수록 어리석어지는 것을 배워야 한다.</p>
</div>
</div>
<hr>
</div>
<div class="box">
<h2>- 우리들의 추억</h2>
<div class="bottom1"></div>
<h3>계절의 흐름에 몸을 맡기고, 모두와 함께 교류하며 생활한다.</h3>
<div class="bottom2"></div>
<h3>내일은 과연 무슨 일이 일어날까?</h3>
<div class="bottom3"></div>
<h3>아무 것도 없던 곳에 지금 보니 모두가 있었다. 모여봐요 동물의 숲</h3>
</div>
</div>
<div class="sidebar">
<a href="signin.html" class="signbox"><div>로그인</div></a>
<hr>
<p><a href="contract.html">회원가입</a> / 아이디·패스워드 찾기</p>
</div>
</div>
</main>
<footer>
<div>
<p>Copyright © 김예찬 all rights reserved</p>
</div>
</footer>
</body>
</html>
- 화면구현 페이지
모여봐요, 동물의 숲
천재파일럿, 로드리 나비처럼 부드럽게, 벌처럼 빠르게!
www.yermi.co.kr