부트스트랩 템플릿 적용해보기

1. 우선 오픈 소스로 공개된 템플릿 중 적당한 템플릿을 찾아낸다

 

startbootstrap.com/themes/freelancer/

Freelancer - One Page Theme

 

2. 다운로드한 파일의 압축을 풀어준다

 

 

3. 동적 프로젝트(JSP_PRO)를 만들고 WebContent 밑에 Resources 폴더를 만들어준다

4. Resources 안에 아까 압축을 풀어준 파일들을 모두를 복사해서 넣어준다 

 

 

5. 파일 속 index.html 눌러 인덱스 페이지를 띄운다

 

 

6. 마우스 오른쪽을 눌러 소스 보기를 누른다

7. 소스를 모두 복사한다

 

 

8. 동적 프로젝트에 index.html 파일을 만들어 붙여 넣기 해준다

 

 

9. 필요한 부분을 수정해준다

아까 ( 4. )에서 넣어준 css와 js을 사용할 수 있게 경로를 바꿔줘야 한다

 

수정 전 모습

 

( 수정 후 모습 ) 기존의 경로를 지워주고 ./Resources/css 와 ./Resources/js 를 넣어준다

 

10. 성공적으로 페이지는 띄워진 모습이나 사진들의 경로를 바꿔주지 않아 사진들은 뜨지 않았다

 

 

11. 소스 코드를 찾아 마저 수정해준다

 

src = "./Resources/~"

 

끝

 

사진들의 이름과 내용물을 바꿔준다면 오픈 소스 템플릿을 이용하여 나만의 템플릿을 만들 수 있다