홈페이지제작 2

[Spring Boot] header 메뉴 선택 시 jquery로 class 값 변경하기

안녕하세요. hia의 개발 story입니다. header를 만들고 나니 생기는 문제가 있었습니다. 기존 페이지는 페이지별로 header 코딩이 되어있었기 때문에 해당 페이지를 누르면 그에 해당하는 메뉴에 current라는 클래스를 넣어줬습니다. 하지만 header를 분리하게 되면 어떤 페이지에서 header를 불렀는지 알 수가 없어서 선택된 메뉴를 표시해줄 수가 없습니다. 이제 그 부분을 script로 적용하여 변하게 하려고 합니다. 아래의 사진처럼 페이지에는 메인, 소개, 예약, 숙박, 문의 이렇게 다섯 가지의 메뉴가 있습니다. 그 메뉴 중 현재 선택된 메뉴는 메인입니다. 선택된 메뉴를 빨갛게 만드는 것은 main.css에 미리 설정된 스타일로 클래스명이 current인 li 태그에 설정된 스타일입니다..

Springboot 2022.12.22

[Spring Boot] Thymeleaf를 이용한 header, footer 등 공통 페이지 조각 만들기

안녕하세요. hia의 개발 story입니다. 홈페이지를 만들기에 앞서 페이지를 조각내 보려고 합니다. 프런트를 만들 때 보통 공통으로 들어가는 페이지가 있습니다. 특히나 header, footer 파일이 가장 대표적입니다. 쉽게 말해서 홈페이지의 어느 페이지를 들어가더라도 떠있어야 하는 파일을 따로 만들어두는 것입니다. 그러면 페이지마다 같은 부분을 고칠 필요 없이 조각난 파일만 수정을 하면 되기 때문에 선택이 아닌 필수 사항입니다. Thymeleaf에 들어가면 이렇게 공식 문서를 볼 수가 있습니다. 이제 이 문서를 사용해서 fragment 조각들을 만들어봅시다. Thymeleaf Page Layouts - Thymeleaf Summary In this article, we described many w..

Springboot 2022.12.14