ݺߣ

ݺߣShare a Scribd company logo
몰빵
With HTML/CSS/JS
201301966 신우진
소개 및 개요
소개 및 개요
• 소개
몰빵은 제비뽑기 기능을 제공하는 정적 웹
• 개요
- 제비뽑기의 예시로는 사다리타기, 가위바위보, 동전던지기, 주사위 등 다양한 종류가 있음
- 점심값내기, 꼴지정하기 등에서 제비뽑기를 주로 사용
- 하지만 게임에서 결과에 승복하지 못하고 재게임을 하거나 제시하는 사람들이 존재
- 이것을 해결하는 것이 목적
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
운영 및 개발환경
운영 및 개발환경
• 개발환경
- 언어: HTML/CSS/JS
- IDE 및 편집기 : Sublime Text, Eclipse
• 운영환경
- 서버: CentOS 6.7
- WEB 서버: NGINX 1.10.2 (WAS 겸용)
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
웹 구조
웹 구조
/ (root)
┖ static_credit // 자기소개서, 회원가입, 계산기 등 과제 구현을 위한 폴더
┖ devtools
┖ login
┖ profile
┖ register
┖ webapp // 몰빵 구현을 위한 폴더
┖ dice
┖ ladder
┖ result
┖ rockpaper // 구현보류
index.html // 시작점
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
※ 루트를 포함한 각 서브디렉토리에는 js와 css폴더가 별도로 존재
기능 소개
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
메인페이지
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
계산기 및 문자열 인코딩 기능
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
회원가입 및 로그인 윈도우
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
webapp의 주사위굴리기
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
webapp의 사다리타기
기능 소개
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
webapp의 게임 결과 목록
시연 및 결론
시연 및 결론
QnA
감사합니다
소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
Ad

Recommended

Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
Kichul Jung
Bootstrap 살펴보기
Bootstrap 살펴보기
영배 현
Bootstrap
Bootstrap
Choonghyun Yang
Web Standards Seminar 2006
Web Standards Seminar 2006
Taeyoung Yoon
Jsp convert to Servlet
Jsp convert to Servlet
JU Chae
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
민태 김
Bootstrap
Bootstrap
SangHun Lee
모바일 코딩의 종류
모바일 코딩의 종류
승제 이
웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?
Joone Hur
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
bootstrap-scaffolding
bootstrap-scaffolding
SangHun Lee
브라우저는 어떻게 동작하는가?
브라우저는 어떻게 동작하는가?
Minseok Jang
HTML5 & CSS 살펴보기
HTML5 & CSS 살펴보기
Suan Lee
00. orientation
00. orientation
동우 주
프로젝트 [철수와 영화] 포트폴리오
프로젝트 [철수와 영화] 포트폴리오
Hyemin Lee
과정 커리큘럼
과정 커리큘럼
John Seo
00. orientation
00. orientation
동우 주
CSGG: Database Team Project
CSGG: Database Team Project
Seong Heum Park
Meet Me! project
Meet Me! project
hyunyoonkim
CoreDot TechSeminar 2018 - Session1 Park Jihun
CoreDot TechSeminar 2018 - Session1 Park Jihun
Core.Today
신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
Yurim Jin
20131217 html5
20131217 html5
DK Lee
정해균 포트폴리오
정해균 포트폴리오
Haegyun Jung
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
web study 1day
web study 1day
준호 우
Portfolio
Portfolio
MyeongSeokKim2
Learning HTML5
Learning HTML5
Jin Joong Kim
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
Yong Joon Moon
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
Seung kyoo Park

More Related Content

What's hot (9)

웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?
Joone Hur
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
bootstrap-scaffolding
bootstrap-scaffolding
SangHun Lee
브라우저는 어떻게 동작하는가?
브라우저는 어떻게 동작하는가?
Minseok Jang
HTML5 & CSS 살펴보기
HTML5 & CSS 살펴보기
Suan Lee
00. orientation
00. orientation
동우 주
프로젝트 [철수와 영화] 포트폴리오
프로젝트 [철수와 영화] 포트폴리오
Hyemin Lee
과정 커리큘럼
과정 커리큘럼
John Seo
00. orientation
00. orientation
동우 주
웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?
Joone Hur
비개발자를 위한 Javascript 알아가기 #4.1
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
브라우저는 어떻게 동작하는가?
브라우저는 어떻게 동작하는가?
Minseok Jang
HTML5 & CSS 살펴보기
HTML5 & CSS 살펴보기
Suan Lee
프로젝트 [철수와 영화] 포트폴리오
프로젝트 [철수와 영화] 포트폴리오
Hyemin Lee
과정 커리큘럼
과정 커리큘럼
John Seo

Similar to 171105 웹프로그래밍 static web 몰빵 발표자료 (20)

CSGG: Database Team Project
CSGG: Database Team Project
Seong Heum Park
Meet Me! project
Meet Me! project
hyunyoonkim
CoreDot TechSeminar 2018 - Session1 Park Jihun
CoreDot TechSeminar 2018 - Session1 Park Jihun
Core.Today
신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
Yurim Jin
20131217 html5
20131217 html5
DK Lee
정해균 포트폴리오
정해균 포트폴리오
Haegyun Jung
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
web study 1day
web study 1day
준호 우
Portfolio
Portfolio
MyeongSeokKim2
Learning HTML5
Learning HTML5
Jin Joong Kim
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
Yong Joon Moon
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
Seung kyoo Park
Web and server
Web and server
민정 김
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
NAVER D2
Embedded project presentation
Embedded project presentation
Jae-yeol Lee
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
JoonHee Lee
hexa core
hexa core
Seungbae Ji
Web devmobile 8회열린세미나
Web devmobile 8회열린세미나
Pumsuk Cho
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술
jaypi Ko
CoreDot TechSeminar 2018 - Session1 Park Jihun
CoreDot TechSeminar 2018 - Session1 Park Jihun
Core.Today
신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
Yurim Jin
20131217 html5
20131217 html5
DK Lee
정해균 포트폴리오
정해균 포트폴리오
Haegyun Jung
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
Yong Joon Moon
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
ᅡᆱᄋƵᄑƧᆫᅵᅳᆫ_ᆨᄋƦᆫᅳƢᄇơᆯᅡᅵᅵᆨ.
Seung kyoo Park
[152] 웹브라우저 감옥에서 살아남기
[152] 웹브라우저 감옥에서 살아남기
NAVER D2
Embedded project presentation
Embedded project presentation
Jae-yeol Lee
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
JoonHee Lee
Web devmobile 8회열린세미나
Web devmobile 8회열린세미나
Pumsuk Cho
웹개발자가 알아야할 기술
웹개발자가 알아야할 기술
jaypi Ko
Ad

More from 우진 신 (15)

Image processing - Histogram Equalization
Image processing - Histogram Equalization
우진 신
비교논문 분석 - 디지털 IoT 도어락 DDiT
비교논문 분석 - 디지털 IoT 도어락 DDiT
우진 신
INSTAGRatio 소개영상 (instagram 서드파티 어플리케이션)
INSTAGRatio 소개영상 (instagram 서드파티 어플리케이션)
우진 신
Windows API Programming Project Report
Windows API Programming Project Report
우진 신
Mlp logical input pattern classfication report doc
Mlp logical input pattern classfication report doc
우진 신
171220 웹프로그래밍 web app 토렌트 관리체계
171220 웹프로그래밍 web app 토렌트 관리체계
우진 신
주차관리 시스템 프로토타입 제안서
주차관리 시스템 프로토타입 제안서
우진 신
유비쿼터스 IoT 도어락 프로토타입 발표자료
유비쿼터스 IoT 도어락 프로토타입 발표자료
우진 신
유비쿼터스 Gps원리 발표자료
유비쿼터스 Gps원리 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 모델링 발표자료
데이터베이스(상) 수업 요구분석 및 모델링 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 Er d 변형 2차 발표자료
데이터베이스(상) 수업 요구분석 및 Er d 변형 2차 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 Er d 변형 1차 발표자료
데이터베이스(상) 수업 요구분석 및 Er d 변형 1차 발표자료
우진 신
데이터베이스(상) 12년도 da설계 공모대전 풀이
데이터베이스(상) 12년도 da설계 공모대전 풀이
우진 신
사물인터넷을 활용한 디지털 도어락 DDiT 비교논문 발표자료 1차
사물인터넷을 활용한 디지털 도어락 DDiT 비교논문 발표자료 1차
우진 신
C# 재무관리 프로그램(주제고정) 발표자료
C# 재무관리 프로그램(주제고정) 발표자료
우진 신
Image processing - Histogram Equalization
Image processing - Histogram Equalization
우진 신
비교논문 분석 - 디지털 IoT 도어락 DDiT
비교논문 분석 - 디지털 IoT 도어락 DDiT
우진 신
INSTAGRatio 소개영상 (instagram 서드파티 어플리케이션)
INSTAGRatio 소개영상 (instagram 서드파티 어플리케이션)
우진 신
Windows API Programming Project Report
Windows API Programming Project Report
우진 신
Mlp logical input pattern classfication report doc
Mlp logical input pattern classfication report doc
우진 신
171220 웹프로그래밍 web app 토렌트 관리체계
171220 웹프로그래밍 web app 토렌트 관리체계
우진 신
주차관리 시스템 프로토타입 제안서
주차관리 시스템 프로토타입 제안서
우진 신
유비쿼터스 IoT 도어락 프로토타입 발표자료
유비쿼터스 IoT 도어락 프로토타입 발표자료
우진 신
유비쿼터스 Gps원리 발표자료
유비쿼터스 Gps원리 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 모델링 발표자료
데이터베이스(상) 수업 요구분석 및 모델링 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 Er d 변형 2차 발표자료
데이터베이스(상) 수업 요구분석 및 Er d 변형 2차 발표자료
우진 신
데이터베이스(상) 수업 요구분석 및 Er d 변형 1차 발표자료
데이터베이스(상) 수업 요구분석 및 Er d 변형 1차 발표자료
우진 신
데이터베이스(상) 12년도 da설계 공모대전 풀이
데이터베이스(상) 12년도 da설계 공모대전 풀이
우진 신
사물인터넷을 활용한 디지털 도어락 DDiT 비교논문 발표자료 1차
사물인터넷을 활용한 디지털 도어락 DDiT 비교논문 발표자료 1차
우진 신
C# 재무관리 프로그램(주제고정) 발표자료
C# 재무관리 프로그램(주제고정) 발표자료
우진 신
Ad

171105 웹프로그래밍 static web 몰빵 발표자료

  • 3. 소개 및 개요 • 소개 몰빵은 제비뽑기 기능을 제공하는 정적 웹 • 개요 - 제비뽑기의 예시로는 사다리타기, 가위바위보, 동전던지기, 주사위 등 다양한 종류가 있음 - 점심값내기, 꼴지정하기 등에서 제비뽑기를 주로 사용 - 하지만 게임에서 결과에 승복하지 못하고 재게임을 하거나 제시하는 사람들이 존재 - 이것을 해결하는 것이 목적 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
  • 5. 운영 및 개발환경 • 개발환경 - 언어: HTML/CSS/JS - IDE 및 편집기 : Sublime Text, Eclipse • 운영환경 - 서버: CentOS 6.7 - WEB 서버: NGINX 1.10.2 (WAS 겸용) 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론
  • 7. 웹 구조 / (root) ┖ static_credit // 자기소개서, 회원가입, 계산기 등 과제 구현을 위한 폴더 ┖ devtools ┖ login ┖ profile ┖ register ┖ webapp // 몰빵 구현을 위한 폴더 ┖ dice ┖ ladder ┖ result ┖ rockpaper // 구현보류 index.html // 시작점 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 ※ 루트를 포함한 각 서브디렉토리에는 js와 css폴더가 별도로 존재
  • 9. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 메인페이지
  • 10. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 계산기 및 문자열 인코딩 기능
  • 11. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 회원가입 및 로그인 윈도우
  • 12. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 webapp의 주사위굴리기
  • 13. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 webapp의 사다리타기
  • 14. 기능 소개 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론 webapp의 게임 결과 목록
  • 16. 시연 및 결론 QnA 감사합니다 소개 및 개요 운영 및 개발환경 웹 구조 기능 소개 시연 및 결론