CSS (7) 썸네일형 리스트형 [웹 프로젝트]_영화관 홈페이지 제작하기 - 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대 성인과 .. html을 이용한 예약 페이지 만들기-<form> 이번에는 html의 태그를 이용하여 간단한 식당 예약 페이지를 만들어보는 실습을 다뤄보려고 한다. 은 사용자와 애플리케이션 사이의 상호작용 역할을 하는데, 다양한 입력 양식을 그룹 필하고 방법을 설정해 사용자의 입력 값들을 한 번에 애플리케이션으로 전달해 준다. 자세한 것은 실습을 해 보면서 하나하나 설명할 것이다. 이번 실습에서 만족시켜야 할 조건은 다음과 같다. 1. 예약자 정보와 일자, 시간 선택을 구분하여 입력받는다. 2. 예약자 정보 부분은 을, 일자, 시간 선택 부분에는 을 포함한다. 3. 휴대폰 번호는 01로 시작해야 하며 국번은 3자리 or 4자리로 제한한다. 4. 예약인원은 2명에서 8명까지만 선택 가능하다. 5. 예약 시간은 오전 9시부터 오후 8시까지로 제한한다. ※ head .. html, css를 이용한 플라워 제작 이번 포스팅에서는 html과 css를 이용하여 '플라워 모형'을 제작해보려고 한다. css의 다양한 속성을 적용시키기 위한 연습을 위해 과제용으로 작성했던 것이다. 이번에도 역시 조건을 설정한 후 이를 만족시키는 페이지를 제작할 예정이다. 조건은 다음과 같다. 1. 색이 다른 4개의 꽃잎 모양으로 이루어진 플라워 만들기 2. 마우스 포인터를 꽃잎 위로 이동했을 시 꽃잎이 1초 동안 빠르게 회전하도록 하기 3. 창의 크기가 변해도 꽃잎의 모양은 변하지 않도록 하기 4. 꽃잎의 각 중앙에 'WWW', 'HTML', 'CSS', 'JS' 글자를 입력하기 5. 꽃잎의 테두리에 변화 주기 6. 꽃잎에 그림자 설정하기 이번에 만족시키고자 하는 조건들이 꽤 많으므로 주의해서 살펴보아야 한다. 이번 실습에서.. html, css로 시간표 만들기 이번 포스트에서는 html과 css로 시간표 만드는 법을 소개하려고 한다. html 태그로는 웹 페이지의 세세한 부분까지 케어하는 데 한계가 있으므로, css로 웹 문서의 세밀한 디자인적 요소를 다루는 법을 익히는 것이 중요하다. 코드를 설명하기에 앞서 css의 기본 문법에 대해 설명하자면 다음과 같다. 우선 css 선언 방법은 -내부 스타일 시트 선언 -외부 스타일 시트 선언 두 가지로 나눌 수 있는데, 내부 스타일 시트 선언의 경우 의 태그에서 선언해 주면 된다. (자세한 코드는 밑에서 확인 바란다.) 외부 스타일 시트 선언의 경우 에서 태그를 이용하여 연결한다. 보통 하나의 css 파일을 여러 개의 html 파일에서 공통으로 사용할 때 이 방법을 이용한다. 이외에도 인라인 스타일 .. 이전 1 다음
