[SpringBoot] 웹개발(4) - 다운받은 템플릿 적용

 

https://kkkkims.tistory.com/53

[springBoot] 웹 프로젝트 만들기(3) - bootstrap적용

에서 이어진다.

 

 

 

 

템플릿 같은 경우 구글에서 Bootstrap 5 template free을 쳐서 나오는거 아무거나 다운받는다.

나는 제일 위에있는 애에서 적당한 애를 찾아서 다운받았다.

https://themewagon.com/themes/free-responsive-bootstrap-5-html5-admin-template-sneat/

Sneat - Free Responsive Bootstrap 5 HTML5 Admin Template

 

 

압축을 풀어 html에 아무페이지나 열어보자. 상당히 이쁜 페이지가 나온다

 

이템플릿으로 옮기기로 정했따.

 

 

 

이제 html 소스를 적용할 차례인데 템플릿에서 아무 html 파일이나 열어보자

모든 css파일이나 스크립트 파일 참조하는 것이 asset임을 확인 할 수 있다. 해당 부분을 확인하고 다시 템플릿 파일 구성을 확인해보자

얼추 눈치를 챘겠지만 안에 html파일 들이 저 asset파일을 참조함을 알수 있을것이다. 이파일 통째로 static 폴더에 옮겨주자

이제 어느정도 템플릿을 옮길 준비가 되었다. 이제 템플릿의 html파일중 아무거나 옮겨주자 나는 인덱스를 옮기기로 결정했다. 이 과정까지 완료했다면 한번 켜보자

깨져서 나오는게 보일것이다 당연하다. 경로가 안맞을것이다. 경로를 맞춰주자 우리가 이전에 웹리소스 경로를 static으로 정했기때문에 static이후에 나오는 경로로 바꿔줘야한다.

before

  <link rel="stylesheet" href="../../../../../../sneat-1.0.0/sneat-1.0.0/assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../../../../../../sneat-1.0.0/sneat-1.0.0/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="../../../../../../sneat-1.0.0/sneat-1.0.0/assets/css/demo.css" />

 

after

    <link rel="stylesheet" href="/assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="/assets/css/demo.css" />

 

새로 고침 해보면 잘 나오는것을 확인할수 있다.