chaper7. 뭔가 만들어 보죠! (반응형 웹 사이트 만들기)

 

section01. 프로젝트 구조 설계

- 웹의 구조도 작성

1. 웹 앱 구조도

· 앱의 전체 흐름을 파악하는데 도움을 준다.

· 메인 페이지로부터 각 주요 화면의 연결 구조를 계층 구조로 작성하여 표현한다.

· 주요 화면에 딸린 내용이 많을 경우 다시 그에 따른 각각의 하위 화면도 구조에 포함시킨다.

​

- 필요 페이지 명세서

1. 웹 앱의 메인 화면과 주요 화면에 해당하는 페이지의 명세서 작성

· 페이지의 명세서에는 각 페이지가 표시하거나 처리하는 내용등을 간략하게 기술해서 실제로 구현될 때 사용한다.

· 명세서 예시

페이지명	파일명	페이지가 표시하는 내용
[main] 페이지	index.html	사이트의 개략적인 소개와 메인 페이지에서 각 주요 화면으로 이동하는 내비게이션 바 제공
[movies] 페이지	s1.html	좋아하는 영화의 개략적인 설명과 유튜브 링크를 제공 주요 화면으로 이동하는 내비게이션 바 제공
[games] 페이지	s2.html	좋아하는 게임의 개략적인 설명과 유튜브 링크를 제공하느 ㄴ주요 화면으로 이동하는 내비게이션 바 제공
[books] 페이지	s3.html	좋아하는 책의 개략적인 소개와 주요 화면으로 이동하는 내비게이션 바 제공

section02. 프로젝트 작성

 

- 웹 앱 프로젝트 작성 및 구조 생성

· 이클립스에서 웹 앱 프로젝트를 작성하고 프로젝트 구조를 작성한다.

​

1. 웹 앱 프로젝트 작성

· Dynamic Web Project 파일을 생성한다.

​

2. 프로젝트에 필요한 파일을 위한 폴더 구조 작성

· 프로젝트에서 필요한 파일들을 종류별로 저장할 폴더를 작성한다.

​

- HTML5 보일러플레이트를 사용한 반응형 웹 사이트 템플릿 사용

· 예시로 제공되는 템플릿을 제공하는 HTML5 보일러플레이트를 사용할 수 있다.

(https://html5boilerplate.com/)

· 보일러플레이트를 다운로드 받지 않고 자료 제공에서 제공하는 [mfav] 폴더 안의 모든 내용을 이클립스의 [mafav] 프로젝트의

[webapp]에 붙여넣기해서 사용해도 된다.

​

- 필요한 페이지 작성

· [mafav] 프로젝트와 폴더 구조, 템플릿을 얻어낸 후에 index.html 파일을 수정하고 수정한 index.html을 기반으로 하위 페이지를 작성한다.

1. index.html 수정

· 자신의 필요에 맞게 css를 수정한다.

2. 각 페이지 작성

· 각 페이지의 명세서의 맞게 기능을 추가하고 수정한다.

 

section03. 실행 및 배포하기

- 웹 앱 실행하기

· [Start the Server]아이콘을 클릭해서 Tomcat 서버를 시작

· index.html [Run As] - [Run on Server] 

​

- 웹 앱 배포

· WAR 파일로 만들어서 웹서버에 올리고, 웹서버를 재기동 시 서비스 된다.