본문 바로가기

분류 전체보기

 (224)
[웹 프로젝트]_영화관 홈페이지 제작하기 - 5. 예매 기능을 위한 Javascript 구현 설명 이번에는 예매 기능 구현을 위해 javascript를 어떻게 사용했는지 정리해 보려고 한다. 영화 선택, 좌석 선택, 예매 내역 확인, 상세 내역 확인을 위해 javascript를 이용하여 어떤 함수들을 만들었는지 살펴 보자. 1. 영화 제목과 날짜 선택 함수 - 영화 제목을 선택하면 영화에 해당하는 날짜가 자동으로 선택되게 하였다. 2. 인원 수 선택 함수 - '성인', '청소년'의 각 선택 인원수를 저장, 반환하고 총 인원수를 반환하는 함수이다. 3. 좌석 선택 함수 - 위에서 구한 선택 인원수에 맞게 좌석을 선택하는 함수이다. *좌석 선택 시 check 클래스를 부여하여 선택 된 좌석을 구분할 수 있게 하였다. 4. 결제 금액 계산 함수 - 위에서 구한 인원수에 해당하는 금액을 곱해 계산하는 함수이..
[웹 프로젝트]_영화관 홈페이지 제작하기 - 4. 예매 기능 추가 설명 & 변경된 페이지 설명 앞 페이지들은 모두 html과 css를 사용하여 화면을 보여주는 정도까지 작성하였다. 영화 예매 부분은 javascript를 사용하여 추가적인 구현을 하였는데, 중점을 둔 부분은 js의 작동과 이벤트 핸들러 구현이므로 영화 예매 페이지에서 한 요소를 클릭했을 때 다른 요소를 나타내는 구성 흐름을 중심으로 작성하였다. 예를들면, 영화 제목을 클릭하면 그에 해당하는 시간과 날짜를 선택할 수 있다던지, 예매인 수를 정하던가 좌석을 정하면 그에 맞게 선택할 수 있다던지 하는 아주 간단하고 기초적인 구현이다. (라고 말은 하지만 왕초보 단계인 나는 처음에는 이것도 어려웠다 ㅠㅠ) 우선 js를 사용한 추가 구현을 위해 변경된 페이지가 있다. 예매하기의 상세 기능 구현을 위해 [영화 예매] 페이지 기획 및 화면 설계..
[웹 프로젝트]_영화관 홈페이지 제작하기 - 3. 구현 결과 화면 & 링크 연결 설명 홈페이지 기획과 화면 설계 스케치를 바탕으로 html과 css를 이용하여 화면을 구성하였다. js를 사용하지 않고 홈페이지 모양새만 갖춘 화면이라 섬세하지 못한 면은 감안해야 한다. 영화관 홈페이지의 메인 화면이다. 윗 부분의 이미지는 최대한 내가 기획한 영화관 이미지와 맞는 걸로 찾아와서 넣어봤는데 생각보다 할로윈 느낌이 많이 난다. 영화관 일정부분은 이미지를 가져왔고, 상영 영화의 예고편을 보여주기 위해 외부 url을 삽입하였다. 그리고 이벤트와 공지글을 보여주기 위한 게시판을 배치하였다. (아래부터는 서브 화면들을 차례로 보여줄 예정인데 편의상 공통된 header와 footer 부분은 생략하였다.) 회원가입 폼이 있는 부분으로, 메인화면 우측 상단의 '회원가입'을 누르면 이 페이지로 넘어오게 된다...
[웹 프로젝트]_영화관 홈페이지 제작하기 - 2. 화면 설계 스케치 이번 포스팅은 영화관 홈페이지 기획에 따라 필요한 모든 html 파일들을 스케치한 과정을 정리하였다. 처음에는 목업을 이용하다가 빠르게 끝내고 싶어서 아이패드를 이용하여 수작업 스케치로 진행하였다. 정말 기초적인 html과 css,js를 이용하여 view 페이지만 구현하는 프로젝트라 각 화면 간의 유기성은 떨어진다. 이번 프로젝트의 목표는 내가 공부한 html과 css, js를 어떻게 사용하는지 익히기 위한 것이므로, 눈감고 넘어가야할 부분이 상당히 많을 것이다. 화면 설계 스케치 순서는 앞 포스팅에서 엑셀로 정리했던 홈페이지 기획 구성 순서와 동일하다. , 현재 상영작과 상영 예정작 페이지는 동일하게 구성하였다. 각 영화 정보를 보여주는 페이지로 대표적으로 하나의 view만 구성하였다.
[웹 프로젝트]_영화관 홈페이지 제작하기 - 1. 홈페이지 기획 이제까지 배운 내용들을 종합하여 영화관 홈페이지 제작하는 프로젝트를 진행하였다. 아직 부족한 부분이 많기 때문에, 최대한 기본적인 내용에 공부했던 부분들을 응용하려고 하였다. 우선 홈페이지 제작에 들어가기 전 진행순서는 다음과 같다. 1. 영화관 기획 어떤 스타일의 영화관인지, 어떤 영화를 상영하고 주요 타겟층이 누구인지 등 세부적인 부분에서 사전 기획을 하였다. 내가 설정한 영화관은 '공포 테마 영화관'으로 일주일에 1편 내지 2편의 영화를 상영하며, 인적 드문 시골에 위치해 주변 환경또한 공포스러운 환경을 조성하기 좋은 곳이다. 영화관의 외양부터 내부까지 모두 공포를 테마로 한 디자인으로 설계되어있음을 가정하였다. 2. 타겟층 설정 영화관의 스타일과 장소에 기반하여 타겟층을 주요 20-30대 성인과 ..
2021 제 2회 정보처리기사 실기 후기 정보처리기사 2회차 필기시험에 합격하고 바로 실기 시험 접수를 했다. 7월 10일 토요일이 시험 당일이었는데 필기 시험과는 약 두달 정도 간격이 있었던 것 같다. 이번학기에 졸업 프로젝트와 졸업 시험, 그리고 비대면 수업으로 인한 과도한 과제들 덕분에 자격증 시험을 병행하는 게 결코 쉽지는 않았다. 하루 1시간 이상은 공부하는 것이 목표였는데 일주일 가까이 보지 못한 적도 많았다 ㅠㅠㅠ 종강하고나서 공부하면 되겠지라는 생각이었는데 갑작스럽게 시작된 인턴 생활 덕분에 또 보류..ㅎㅎ 그래도 어찌 저찌 1회독을 끝내고 (목표는 3회독이었음) 7월 10일 시험을 보러 갔다. 시험 장소는 휘경 공업 고등학교! 8시 20분쯤 도착했는데, 이른 시간이었음에도 사람들이 많았다. 코로나 때문에 열체크 하면 오래 기다릴..
html - 웹 스토리지와 기타 API 웹 스토리지란 웹 브라우저에 자료를 저장하기 위한 기능이다. 웹 스토리지의 종류는 로컬 스토리지와 세션 스토리지 두가지로 나뉜다. 로컬 스토리지는 브라우저 종료와 무관하게 자료를 보관하는 반면, 세션 스토리지는 세션이 종료될 시 저장된 자료가 사라진다. ​ - 장치에 데이터를 저장하기 위해 사용한다. (저장 기간 제한이 없음) - key/value 쌍으로 데이터를 저장한다. - windsow.localStorage 객체와 Storage 이벤트, StorageEvent 객체를 이용한다. ​ - window.localStorage.setItem("키이름", "문자열값") : 데이터 저장 - window.localStorage.getItem["키이름"] : 데이터 읽기 - window.localStorage...
html, js 기능 정리 - 멀티미디어 제어, 위치 정보 사용 자바스크립트 API 를 사용하면 멀티미디어 기능 요소를 제어할 수 있다. ​ - 속성 src : 파일 소스 currentTime : 현재 재생 시간 duration : 재생 길이 volume : 볼륨 ​ - 메소드 play() : 재생 시작 pause() : 일시 정지 ​ - 관련 이벤트 canplay : 재생 가능 시 timeupdate : 재생 중 주기적으로 play : 재생될 때 ended : 재생 종료시 ​ ​ GPS가 내장된 모바일 기기에서 정확한 위치 파악이 가능하다. (위,경도 조회) navigator.geolocation 이용 (내장 객체) - getCurrentPosition(성공콜백함수, 에러콜백함수, 옵션) : 단발성 위치 요청으로 현재의 위치 정보를 반환한다. 위치 정보 요청 성공 ..
728x90

티스토리툴바