본문 바로가기

Thymeleaf4

JSON-LD란 무엇인가요? 스프링에 적용 방법 쉽게 설명해 드릴게요. 만약 여러분이 웹사이트를 운영하고 있다면, 구글 검색 결과에서 내 콘텐츠를 더 잘 보여주고 싶다는 생각을 해본 적 있을 거예요. 이때 유용한 것이 '구조화 데이터 마크업'입니다. 그 중에서도 JSON-LD는 구조화 데이터를 추가하는 인기 있는 방법이에요. 자, 이제 JSON-LD가 무엇인지, 그리고 이를 Java Spring 프로젝트에 어떻게 적용할 수 있는지 차근차근 알아볼까요? JSON-LD란?" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스JSON-LD(JavaScript Object Notation for Linked Data)는 웹페이지의 데이터를 보다 이해하기 쉽도록 구조화하는 방법이에요. 주로 검색 엔진에 정보를 제공하기 위해 사용하죠. 쉽게 말해, 웹페이지에 있는.. 2024. 11. 7.
미디어 쿼리 적용 반응형 웹 사이트 만들기 와이드 모니터용 고해상도 와이드 모니터에 맞는 반응형 웹을 만들어 보려 합니다. 큰 와이드 모니터에선 네이버가 밑의 사진과 같이 나오는데 학습 겸 해서 반응형 웹으로 만들어 보려 합니다. 요즘 적응형 웹도 많은데 해상도에 맞춰 사진이나 내용 구성물이 달라지는 것이다 반응형 웹은 해상도에 맞춰 객체가 내려가거나 안 나오게 하는 등 미디어 쿼리를 이용하여 레이아웃의 위치를 바꿔 주는 식으로 진행할 예정입니다. 그리고 와이드 모니터에 맞게 나온 사이트도 찾아보지 못했고 넷플릭스 같은 경우 사진만 대빵 크게 나와서 좀 난감하긴 한대 그래도 영화 볼 땐 21:9 모니터 만한 게 없답니다. 미디어 쿼리 사용 일단 적응형웹은 만들어 본 적도 없고 미디어 쿼리를 예전에 조금 써보았기에 3840*1600 해상도에 맞는 반응형 웹을 만들.. 2023. 2. 5.
스프링 부트 머티리얼디자인 적용 시키기 머티리얼 디자인을 적용시키기 위해 홈페이지의 나와 있는 Github의 Repository를 방문하게 되었다. 들어가게 되면 Material Desingn Web Components에 대해 나오는 거 같은데 퀵가이드를 봐도 Node 쪽 관련된 거 같아 저장소의 상위 쪽으로 가게 되면 웹에 적용시키기 적당한 내용들이 나온다. https://github.com/material-components/material-components-web GitHub - material-components/material-components-web: Modular and customizable Material Design UI components for the web Modular and customizable Material.. 2023. 2. 2.
webflux Thymeleaf3.1 template, Layout 변경된 부분 마이그레이션 (feat LiveReload++) Thymeleaf 3.1 스프링 6.0을 지원하게 되었다. webflux 초기에 한번 사용해 보았는데 sec태그가 잘 작동하지 않아서 난감했던 기억이 있는데 이제 그런 건 없을 거라 기대한다. 현재 스프링 부트 3.0대의 버전을 사용중인데 스프링은 6점대인지라 3.1을 사용하면 될 거 같다. 전에는 Thymeleaf Page Layouts 를 같이 사용해서 공통으로 묶이는 부분을 또 템플릿 해서 사용했는데 아마 이것도 잘 작동하겠지? spring initialzr에서 thymeleaf를 선택하면 현재 버전에선 thymeleaf와 thymeleaf-security까지 같이 종속성이 추가돼서 예전처럼 thymeleaf-security를 추가해 주지 않아도 sec 태그를 쓸 수 있습니다. thymeleaf-l.. 2023. 1. 23.