-
(박스몰 프로젝트) 2 - 부트스트랩 연결하기 + 브랜드 로고 제작 + 파비콘 설정개발/프로젝트 2024. 7. 7. 23:24
DB Navigator 연결했으니 부트스트랩으로 디자인에 대한 부분을 덜고자 했다.
(디자인 못하는 1인)
https://startbootstrap.com/template/shop-homepage
Start Bootstrap
startbootstrap.com
제품 소개가 목적인 사이트이니 해당 부트스트랩 선택 후 진행했다.
html 구조를 사용하는 인텔리제이로서 thymeleaf 사용하기로 했다.
(배우면서 만들어야 할 듯..ㅎ)
우선 부트스트랩 압축 파일 풀어주고
다음에 적절하게 압춘 푼 파일 넣어줬다.
그런데 파비콘 경로는 제대로 불러오는데,
css 와 js 못 불러오는 오류가 발생했다...ㅠㅠ
나의 친구 챗지피티에게 물어보니
원래 기본 세팅이 ../static/bootstrap ~~~ 이렇게 돼 있었는데 이는 상대 경로를 나타내 문제가 생긴 것이였다.
절대 경로로 바꿔주고
상단에 thymeleaf 문구 넣어주니
짜잔 제대로 불러오기 성공!!! (뿌-듯)
로고도 2가지 졸귀탱 버전으로 만들어봤다.
파비콘도 만들었다.
1.
아래 사이트 icons 탭에서 박스 모양 아이콘 선택하고 svg 다운받기
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
2. svg 파일 png 변환
Convert SVG files to PNG Online
This free online SVG to PNG converter allows you to convert SVG files to PNG images, quickly and easily.
svgtopng.com
3. 파비콘 html 소스 내 head 태그 내 소스 추가해주기
4. 귀요미 파비콘 확인 완료
[다음글]
https://hjsong96.tistory.com/185
(박스몰 프로젝트) 3 - 인텔리제이 thymeleaf + mysql + mybatis DB 연결하기
★ 오늘의 할 일1. 서버 데이터값 출력해보기 서버 데이터값 출력을 위해 질문게시판 qnaboard db를 만들었다. 오늘은 서버 연결 후 값 출력이 목표이기 때문에 정말 데이터 확인용으로 만들
hjsong96.tistory.com
[이전글]
https://hjsong96.tistory.com/183
(박스몰 프로젝트) 1 - 계획 세우기
개인 프로젝트 박스몰 웹페이지 만들기로 함 1. 개발의 범위 어느 정도 할 것인지?오랜만의 개발이므로 최소 필수 개발만 하되,필요 시, 기능 추가 예정 2. 제공해야 할 목록 [사용자단]- 회사
hjsong96.tistory.com
'개발 > 프로젝트' 카테고리의 다른 글
(박스몰 프로젝트) 4 - 메인 스와이프 + 부트스트랩 아이콘 및 css 적용 (0) 2024.07.30 (박스몰 프로젝트) 3 - 인텔리제이 thymeleaf + mysql + mybatis DB 연결하기 (0) 2024.07.19 (박스몰 프로젝트) 1 - 계획 세우기 (0) 2024.07.07 (기업프로젝트) 3 - 유라클 프로젝트 실습교육 (1) 2023.10.16 (기업프로젝트) 4 - 유라클 프로젝트 git 교육 (2) 2023.10.16