(박스몰 프로젝트) 2 - 부트스트랩 연결하기 + 브랜드 로고 제작 + 파비콘 설정

DB Navigator 연결했으니 부트스트랩으로 디자인에 대한 부분을 덜고자 했다. 

(디자인 못하는 1인)

 

https://startbootstrap.com/template/shop-homepage

Start Bootstrap

 

제품 소개가 목적인 사이트이니 해당 부트스트랩 선택 후 진행했다.

 

html 구조를 사용하는 인텔리제이로서 thymeleaf 사용하기로 했다.

(배우면서 만들어야 할 듯..ㅎ)

 

우선 부트스트랩 압축 파일 풀어주고 

 

 

다음에 적절하게 압춘 푼 파일 넣어줬다.

 

그런데 파비콘 경로는 제대로 불러오는데, 

css 와 js 못 불러오는 오류가 발생했다...ㅠㅠ

 

나의 친구 챗지피티에게 물어보니 

 

 

원래 기본 세팅이 ../static/bootstrap ~~~ 이렇게 돼 있었는데 이는 상대 경로를 나타내 문제가 생긴 것이였다.  

 

 

절대 경로로 바꿔주고

 

 

상단에 thymeleaf 문구 넣어주니

 

 

 

짜잔 제대로 불러오기 성공!!! (뿌-듯)

 

 

로고도 2가지 졸귀탱 버전으로 만들어봤다.

 

파비콘도 만들었다.

 

1. 

아래 사이트 icons 탭에서 박스 모양 아이콘 선택하고 svg 다운받기

 

https://fontawesome.com/

Font Awesome

 

2. svg 파일 png 변환

https://svgtopng.com/

Convert SVG files to PNG Online

 

3. 파비콘 html 소스 내 head 태그 내 소스 추가해주기

 

4. 귀요미 파비콘 확인 완료

 

 

 

[다음글]

https://hjsong96.tistory.com/185

(박스몰 프로젝트) 3 - 인텔리제이 thymeleaf + mysql + mybatis DB 연결하기

 

[이전글]

https://hjsong96.tistory.com/183

(박스몰 프로젝트) 1 - 계획 세우기