배경화면
<실제>
전체적인 index 페이지를 만들었다. 왼쪽에는 오버워치 로고가, 오른쪽에는 로그인한 사용자 정보가 왼쪽 아래에는 웹페이지에서 실행할 수 있는 기능들을 정리 및 링크하였다.
CODE
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OVERWATCH</title>
<link rel="stylesheet" href="design.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body class="main"">
<img src="logo.png" alt="logo" style="position:fixed" width=400px>
<div class="list">
<a href="selection.html" alt="영웅 소개">플레이</a><br>
<a href="gallery.html" alt="영웅 갤러리">영웅 갤러리</a><br>
<a href="" alt="하이라이트">하이라이트</a><br>
<a href="league.html" alt="오버워치 리그">오버워치 리그</a><br>
<a style="cursor:pointer" onclick="selfclose()">게임 종료</a>
</div>
<div class="nameplate">
<div id="icon">
<img src="PI_Pachimari.png" alt="playericon" width=60px>
</div>
<div id="name" title="올때메로나">
올때메로나
</div>
</div>
</body>
</html>+) 실행목록에서 게임 종료하기 위한 코드는 a 태그를 이용하여 자바스크립트 함수를 실행한 것이다. a태그onclick cursor설정
+) a 태그 뿐만 아니라 div 태그에서도 title 속성을 쓸 수 있다. 닉네임 위에 커서를 갖다대면 닉네임을 확인할 수 있다.
CSS
.main{ /*배경화면*/
background-image: url("bg1.jpg");
background-size:cover;
}
.list{ /*실행목록 위치*/
position: fixed;
top: 40%;
left:2%;
}
.nameplate{/ *미니 프로필 위치*/
position: fixed;
left:70%;
}
#icon{ /*아이콘과 이름 설정*/
float:left;
}
#name{ /*이름표 크기, 위치, 색상*/
background-color:#464964;
width:180px; line-height: 60px; vertical-align: middle;
padding-left: 70px;
}+) 미니 프로필은 전체적으로 div class=nameplate 에 감싸져 있다. 하지만 각자 div로 감싸져 있어서 조금씩 떨어져 있지만 float 값을 이용하여 붙여놓았다.참고
JavaScript
function selfclose(){
self.close()
}'개발 > 2018 겨울방학 WEB 프로젝트' 카테고리의 다른 글
| 2019 겨울방학 프로젝트#결과 (0) | 2019.03.08 |
|---|---|
| 2019겨울방학 프로젝트#구상 (0) | 2019.03.08 |
| 2019겨울방학 프로젝트#4 (0) | 2019.03.08 |
| 2019겨울방학 프로젝트#3 (0) | 2019.03.08 |
| 2019겨울방학 프로젝트#1 (0) | 2019.03.05 |
