[STS] 화면 구현-1 (Header, Footer, Body)

 

 

 

 목차

1. Header 구현
2. Footer 구현
3. Body 구현
4. 파트 분류

 

 

 

1. Header 구현

1. 구글에 "w3schools" 검색
2. Bootstrap > B4
3. BS4 Navbar > Try Yourself
4. 좌측 코드 전체 복사
5. index.jsp 생성
6. BS4 Navbar 에서 복사한 코드 붙여넣기 (상황에 맞게 커스터마이징)
7. Controller 패키지 생성

 

1. 구글에 "w3schools" 검색

 

2. Bootstrap > B4

 

3. BS4 Navbar > Try Yourself

 

4. 좌측 코드 전체 복사

 

5. index.jsp 생성

 

6. BS4 Navbar 에서 복사한 코드 붙여넣기 (상황에 맞게 커스터마이징)

 

7. Controller 패키지 생성

 

8. 주소 입력 후 정상 작동 확인

 

 

 

2. Footer 구현

1. BS4 Basic Template > Demo
2. 하단 Footer 우클릭 > 요소 검사
3. Footer를 갖고 있는 <div> 우클릭 > 복사
4. index.jsp 하단부에 붙여넣기
5. 입맛에 맞게 커스텀

 

1. BS4 Basic Template > Demo

 

2. 하단 Footer 우클릭 > 요소 검사

 

3. Footer를 갖고 있는 <div> 우클릭 > 복사

 

4. index.jsp 하단부에 붙여넣기

 

5. 입맛에 맞게 커스텀

 

 

 

3. Body 구현

1. BS4 Cards > Example 코드 복사
2. index.jsp <div class="container"> 하단에 붙여넣기
3. 정상 작동 확인

 

1. BS4 Cards > Example 코드 복사

 

2. index.jsp <div class="container"> 하단에 붙여넣기

 

3. 정상 작동 확인

 

 

 

 

4. 파트 분류

1. views 하위에 layout 폴더 생성 후 footer.jsp / header.jsp 생성
2. index.jsp 폴더에 JS 태그는 </body> 태그 바로 위로 이동
3. index.jsp 파일 최하단 부분을 footer.jsp에 복사 붙여넣기
4. index.jsp 파일 최상단 부분은 header.jsp 에 복사 붙여넣기
5. 사이트 정상 작동 확인
6. index.jsp 나머지 코드 위 아래에 header와 footer를 include 하는 코드 입력
7. 정상 작동 확인

 

1. views 하위에 layout 폴더 생성 후 footer.jsp / header.jsp 생성

 

2. index.jsp 폴더에 JS 태그는 </body> 태그 바로 위로 이동

 

3-1. index.jsp 파일 최하단 부분을

 

3-2. footer.jsp에 복사 붙여넣기

 

4. index.jsp 파일 최상단 부분은 header.jsp 에 복사 붙여넣기

 

5. 사이트 정상 작동 확인

 

6. index.jsp 나머지 코드 위 아래에 header와 footer를 include 하는 코드 입력

 

7. 정상 작동 확인