[Spring Project] 프로젝트에 디자인 적용하기

안녕하세요!

오늘은 프로젝트에 디자인 적용하는 방법에 대해 알아보겠습니다.

---

1. 디자인 찾기

먼저, 적용할 디자인을 찾아봅시다.

아래 사이트(colorlib)에서는 다양한 무료 디자인을 제공하고있습니다.

Best Free WordPress Themes 2020 - Colorlib

colorlib에서 디자인을 찾던 도중 제가 원하는 디자인을 발견했습니다.

아래 링크를 통해 사이트에 접속합니다.

Photon - Free Photo Website Template 2020 - Colorlib

2. 디자인 다운로드

하단으로 내리다 보면 아래와 같은 화면이 보입니다.

Download 버튼을 클릭합니다.

3. 압축 파일 해제

다운로드 된 경로로 들어가서 압축 파일을 해제합니다.

해제하고 나면 아래와 같은 파일이 들어있습니다.

4. 디자인 파일 프로젝트에 추가하기

 아래 5개의 파일을 드래그 하여 프로젝트의 src\main\webapp\resources에 붙여넣습니다.

아래와 같은 팝업이 뜨면 Copy files > OK 를 클릭합니다.

이제 5개의 html 파일도 드래그하여 src\main\webapp\WEB-INF\views에 추가해줍니다.

파일이 아래와 같이 추가된 것을 확인할 수 있습니다.

5-1. 디자인 적용 확인하기

이제 디자인이 제대로 나오는지 확인해봅시다.

 

PathVariable을 이용하여 모든 파일의 컨트롤러를 설정해줍니다.

@RequestMapping(value = "/{var}", method = RequestMethod.GET)
	public String base(@PathVariable String var) {
		return var;
	}

<참고>

PathVariable은 @RequestMapping 의 value 값에서 {}에 있는 변수를 받아옵니다.

@PathVariable을 이용하여 URI에서 어떤 파라미터를 가져올지 결정할 수 있습니다.

사용법:

① 컨트롤러에서 변수로 받을 값을 {}안에 넣어줍니다.

② 파라미터 안에 선언해줍니다. 파라미터 안에 선언하는 방법은 총 두가지입니다.

    ⑴괄호 ' ( ) ' 를 포함하는 방법

    ⑵ 괄호 ' ( ) ' 를 생략하는 방법

        괄호는 생략가능하지만 값이 같아야합니다.

5-2. 디자인 적용 확인하기-오류 발생

이제 톰캣을 가동하여 디자인이 잘 나오는지 확인해봅시다.

( 경로: localhostL8082/index.html )

아래와 같이 디자인이 잘 나오지 않습니다. 문제가 무엇일까요?

6. 디자인 적용 오류 해결

html 파일에서 css/**로 요청을 하고있지만

servlet-context.xml 파일에서는 resources/**로 매핑되어있기 때문에 css 적용이 안되어서 발생한 문제입니다.

아래와 같이 resources/** -> /** 로 변경하여 문제를 해결합니다.

ex) css/bootstrap.min.css로 요청이 들어오면 /resources/css/bootstrap.min.css로 매핑시켜줍니다.

6. 오류 해결 후 확인

xml 파일 수정 후 서버를 재가동하여 확인해봅시다.

아래와 같이 디자인이 제대로 적용된 것을 확인할 수 있습니다.

---

이렇게 프로젝트에 디자인 적용하는 방법, PathVariable, resources 매핑에 대해 알아보았습니다.

도움이 되셨다면 ❤와 구독하기 눌러주세요! :)