spring mvc homepage 스프링 홈페이지 만들기 2

spring  mvc homepage  스프링 홈페이지 만들기 2

adminlte를 붙여볼게요. 

여기에 복사

경로는 src -> main -> webapp -> resources 에 압축을 푼 adminlte를 복사를 해요. 

※AdminLTE-3.0.4 가 길어보여서 AdminLTE로 이름 변경했어요. 

샘플소스

복사를 모두 해도 되겠지만 일단 조금씩 해볼께요. 용량이 큰지라 top-nav.html 기준으로 가져와 볼게요.

top-nav.html 파일을 메모장에서 열어요. 대충 보니까 두 군데 파일이 필요해 보이는데 2 폴더 용량이 61메가나 되네요.

모든 소스가 다 포함되어 있어서 사용하는 파일만 하나하나 복사할까 했지만 그냥 다 복사할게요.

그리고 home.jsp파일내용을 top-nav.html내용으로 수정해줍니다. 경로도 수정야 하는데요. 첨부파일을 참고해주세요.

home.jsp

0.01MB

실행하여 결과를 보면요. 

home.jsp수정후 결과

결과를 잘 보았는데요. 이제 이걸 쪼갤 예정입니다. 위쪽 메뉴 부분과 아래쪽 부분은 다른 페이지에서 공통으로 사용하는 영역이고요. 

본문 내용만 계속 수정이 이루어질 예정이기 때문에 그래요.

페이지 소스를 보니 보니 <!-- Content Wrapper. Contains page content --> 부분 위쪽과 <!-- /.content-wrapper --> 부분 아래쪽으로 나누면 될 거 같아요. 

views안에 하위 폴더를 만들어요 저는 include라는 폴더를 만들었어요. 

그리곤 home.jsp파일을 복사를 했어요. 

파일명은 top과 bottom이라고 지었어요 주석을 보니 헤더와 풋터로 해야 할 것 같은 느낌인데 그냥 진행할게요. 

top bottom.

top는 <!-- Content Wrapper. Contains page content --> 위쪽만 남기고 bottom은 <!-- /.content-wrapper -->아래쪽만남겨요.

home.jsp 파일내용도 수정을 해요. 

<!-- Content Wrapper. Contains page content --> 와  <!-- /.content-wrapper --> 사이내용만 남기고 위아래를 지워요. 

그리고 위아래로 두파일을 포함시켜요. 

<%@include file="include/top.jsp"%>
<%@include file="include/bottom.jsp"%>

그럼 이렇게 파일3개가 수정되었어요. 첨부한 파일을 참고하세요. 

home.jsp

0.00MB

top.jsp

0.01MB

bottom.jsp

0.00MB

그리고 결과를 확인해보면 이렇게 나와요. 

아까와 결과가 같지요? 

이제 로그인이라던지 가입하기 같은 걸 해볼 거예요. db를 설치하고 해야 할 텐데 

전 mysql을 사용할 예정이에요. 버전은 상관없어요. 

참고자료 book.naver.com/bookdb/book_detail.nhn?bid=9425458

코드로 배우는 스프링 웹 프로젝트

참고 카페 cafe.naver.com/gugucoding

구멍가게코딩단 : 네이버 카페