주제 : 게임, 오버워치를 테마로 웹상에서 이것저것 구현해보자
기능
- 로그인 페이지
- 배경화면
- 플레이 선택 시 ) 영웅 이미지 + 정보 표시
- 오버워치 리그 선택 시 ) 리그 팀에 대한 코멘트 표시
로그인 페이지
<실제>
아이디를 입력 받고 접속을 클릭하면 웹사이트에 접속할 수 있는 페이지를 만들었다
CODE
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<link rel="stylesheet" href="design.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body class="login">
<p class="text">아이디</p>
<input type="text" id="input"><br><br>
<button onclick="location.href='mainpage.html'; input();" id="button"></button>
</body>
</html>+) button의 onclick 속성에서 따옴표를 유의 깊게 보자.
+) 한 이벤트에 여러 함수를 구현하고 싶으면 ;(세미콜론)을 쓰자
CSS
.login{ /*배경화면 및 입력 설정*/
background-image: url("login.png");
background-size: cover;
background-repeat: no-repeat;
position: fixed;
left: 50%; transform: translateX(-60%); top: 75%;
}
#button{ /*버튼 크기 및 이미지 설정*/
background-image: url("접속.png"); border: none;
width: 166px; height: 20px;
background-size:cover;
position:fixed;
}
body { /*기본설정*/
font-family:나눔고딕;
color:white;
}
a{ /*기본설정*/
color:white;
text-decoration:none;
font-family:"koverwatch";
font-size:50px;
font-style:italic;
}+) 가운데 정렬을 하기 위해 left와 transform을 사용하였다. 중앙정렬
+) 버튼을 외부 이미지로 하고 싶어서 background-image를 사용하였다. button은 항상 테두리가 있기 때문에 border 속성을 조절해야 한다.
JavaScript
var temp;
function input(){
var input = document.getElementById("input").value;
temp = input;
}'개발 > 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겨울방학 프로젝트#2 (0) | 2019.03.05 |
