[HTML 요약정리] 07-2. 프로젝트 작성

 

 

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

 

이클립스에서 [My Favorites] 웹 앱 프로젝트를 작성하고 프로젝트의 구조를 작성한다

 

• [My Favorites] 웹 앱 프로젝트 작성
  이클립스의 메뉴에서 File-New-Other 메뉴를 선택한다
  New창에서 Web 항목의 하위 항목인 Dynamic Web Project 항목을 선택한 후 Next 버튼을 클릭한다
  
  New Dynamic Web Project 창의 내용이 Dynamic Web Project 화면으로 진행되면
  Project name 항목에 mfav를 입력한 후 Next 버튼을 클릭한다
  
  Java 화면이 표시되면 기본 값을 그대로 사용하고 Next 버튼을 클릭한다
  
  Web Module 화면이 표시되면 Context root 항목과 Content Directory 항목을 기본값으로 하고
  Generate web.xml deployment descriptor 항목을 선택한 후 Finish 버튼을 클릭한다

mfav 프로젝트 작성

 

• 프로젝트 필요 파일을 위한 폴더 구조 작성
  프로젝트의 체계적인 관리를 위해 프로젝트에서 필요한 파일들을 종류별로 저장할 폴더를 작성한다

<기본적으로 필요한 폴더>

작성할 폴더	배치할 파일
html	index.html을 제외한 하위 HTML 페이지
css	스타일 시트 파일(.css)
js	자바스크립트 파일(.js)
img	이미지 파일
audio	오디오 파일
video	동영상 파일

 

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

 

웹 프로젝트를 작성할 때 보일러플레이트(http://html5boilerplate.com/)을 사용하면 좋다

 

http://html5boilerplate.com/  

HTML5 Boilerplate: The web’s most popular front-end template

 

3. 필요 페이지 작성

 

[mfav] 프로젝트와 폴더 구조와 템플릿을 얻어낸 후에는 index.html 파일을 수정하고 수정한 파일을 기반으로 작성한다

 

• index.html 수정
  수정하게되면 PC 브라우저, 태블릿, 스마트폰에서 표시되는 형태의 3가지 화면 구조를 제공한다
  
  
• s1.html 페이지 작성
  index.html을 복사해서 [html]폴더에 붙여넣기 한 후 이름을 s1.html로 변경하고 내용을 수정한다

 

 

2024.09.03