개발/2018 겨울방학 WEB 프로젝트 썸네일형 리스트형 2019 겨울방학 프로젝트#결과 2019겨울방학 프로젝트#구상 스케치 배경화면 플레이 창 플레이 창 - 영웅 이미지 + 정보 확인 영웅 갤러리 창 - 미구현 영웅 갤러리는 각 영웅을 선택하면 그 영웅의 스킨을 선택할 수 있는 창 영웅 갤러리 - 스킨 변경 - 미구현 스킨을 변경한 후 플레이 창에서 영웅을 선택하면 다른 스킨을 확인할 수 있다 리그 창 리그 창 - 코멘트 확인 팀원은 구현하지 않음 그 외에도 감정표현이나 대사를 들을 수 있는 페이지를 만들면 좋겠다 - 미구현 2019겨울방학 프로젝트#4 * 배경화면에서 오버워치 리그 선택 시 * 오버워치 리그 화면에서 원하는 팀을 선택 시 리그 팀을 선택하면 그에 대한 코멘트가 출력되도록 하였다. CODE HTML 코멘트가 들어갈 공간과 버튼이 들어갈 공간을 div 태그로 마련하였다. +) 자바스크립트를 이용하여 클릭하면 beg() 함수가 실행되고, id가 각각 "b"+i인 버튼 20개를 한 번에 구현할 수 있었다 CSS .league{ /*배경화면*/ background-image: url("bg3.jpg"); background-size:cover; } .select_league{ /*리그 코멘트 및 버튼의 위치, 투명도 설정*/ position:fixed; text-align: center; top:60%; opacity:0.8; } .icon{ .. 2019겨울방학 프로젝트#3 영웅 이미지 + 정보 표시 * 배경화면에서 플레이 선택 시 * 플레이 화면에서 원하는 영웅 정보 선택 시 화면에서 영웅을 클릭하면 전체 이미지와 그에 대한 정보가 출력되도록 하였다 CODE HTML 전체 이미지와 그에 대한 정보를 표현할 공간을 img와 div 태그를 이용하여 마련하였다. 그 다음 select_hero 클래스인 div로 클릭할 버튼의 공간을 마련하였다. 버튼을 구현할 때 필요한 자바스크립트는 모두 한 문서로 모으려고 했지만 동적인 웹페이지 구현이 필요하여 html 문서에 마련하였다. +) 자바스크립트를 이용하여 클릭하면 output() 함수가 실행되고, id가 각각 "a"+i인 버튼 29개를 한 번에 구현할 수 있었다 CSS .selection{/*배경화면*/ background-imag.. 2019겨울방학 프로젝트#2 배경화면 전체적인 index 페이지를 만들었다. 왼쪽에는 오버워치 로고가, 오른쪽에는 로그인한 사용자 정보가 왼쪽 아래에는 웹페이지에서 실행할 수 있는 기능들을 정리 및 링크하였다. CODE HTML 2019겨울방학 프로젝트#1 주제 : 게임, 오버워치를 테마로 웹상에서 이것저것 구현해보자 기능 로그인 페이지 배경화면 플레이 선택 시 ) 영웅 이미지 + 정보 표시 오버워치 리그 선택 시 ) 리그 팀에 대한 코멘트 표시 로그인 페이지 아이디를 입력 받고 접속을 클릭하면 웹사이트에 접속할 수 있는 페이지를 만들었다 CODE HTML 아이디 텍스트, 아이디를 입력 받을 칸, 다음 페이지로 넘어갈 버튼을 구현한다. +) button의 onclick 속성에서 따옴표를 유의 깊게 보자. +) 한 이벤트에 여러 함수를 구현하고 싶으면 ;(세미콜론)을 쓰자 CSS .login{ /*배경화면 및 입력 설정*/ background-image: url("login.png"); background-size: cover; background-repea.. 이전 1 다음
