본문 바로가기

IT96

[SpringBoot, react] 전기차 충전소 관련 페이지 제작 프로젝트 1 프로그래밍 세계를 탐구합시다. 전기차 충전소 관련 페이지 제작 프로젝트를 수행했습니다. SpringBoot, react 활용하여 페이지를 구성하였습니다. [메인페이지] 1. 로딩 화면 자동차가 도로 위를 주행하는 듯한 효과를 적용하여 메인페이지 로딩 화면을 적용하였습니다. 코드는 아래 코드를 수정하여 작성하였습니다. https://jsfiddle.net/woosuna/roan2fwz/12/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net 2. 번개, 텍스트, 이미지 효과 메인페이지에 움직이는 번개 효과를 구현하였습니다. 텍스트와 이미지가 움직이면서 나타나는 효과를 적용하였습니다. 글자 이동 효과에 대한 코드는 아래와 같습니다. 백만 볼트의 시대, Are y.. 2023. 11. 1.

[Spring Boot] 페이지에 상단 바 코딩하기 프로그래밍 세계를 탐구합시다. Spring Boot를 활용하여 페이지에 상단 바와 카테고리를 구현할 수 있습니다. 5개의 카테고리로 구성되어 있고, 하위 항목이 있는 카테고리일 경우 마우스를 올리면 하위 항목이 내려옵니다. 구현 화면 작성 코드 header.html 충전소 찾기 게시판 공지사항 Q&A 정보마당 통계정보 서비스안내 미디어 전기차 뉴스 전기차 영상 전기차 주행거리 전기차 게임 멤버십 코인교환 쿠폰함 가입하기 나의 멤버십 header2.html 충전소 찾기 게시판 공지사항 Q&A 정보마당 통계정보 서비스안내 미디어 전기차 뉴스 전기차 영상 전기차 게임 멤버십 코인교환 쿠폰함 구독하기 나의 멤버십 위와 같은 코드를 작성하여 페이지에 상단 바를 구현할 수 있습니다. 2023. 11. 1.

[Spring Boot] 페이지에 사이드 바 코딩하기 프로그래밍 세계를 탐구합시다. Spring Boot를 활용하여 페이지에 사이드 바를 나타낼 수 있습니다. 오른쪽에 번개 모양 이모티콘을 누르면 사이드바가 슬라이드 형식으로 열립니다. 로그인 전, 후에 생성되는 항목이 다르며 하위 요소가 있는 목록은 마우스를 올렸을 때 사이드바가 하나 더 열리면서 하위 항목이 나타납니다. 사이드 바의 움직임에 따라 번개 모양 이모티콘도 함께 움직입니다. 구현 화면 작성 코드 nav.html ⚡ 홈 충전소 찾기 게시판 공지사항 Q&A 정보마당 통계정보 서비스안내 미디어 전기차 뉴스 전기차 영상 전기차 게임 멤버십 코인교환 쿠폰함 가입하기 나의 멤버십 로그인 회원가입 [[ ${session.user_info.name} + '님 반갑습니다.' ]] 나의 찌리릿: 개 Mypage.. 2023. 11. 1.

[Spring Boot] 페이지에 팝업 창 띄우기 프로그래밍 세계를 탐구합시다. 오늘은 Spring Boot와 HTML을 활용하여 팝업 창을 구현하는 방법에 대해 알아보겠습니다. 오늘 하루 이 창을 열지 않기와 닫기 버튼 또한 추가하겠습니다. 구현 화면 작성 코드 popupmembership.html 오늘 하루 이 창을 열지 않습니다. 닫기 PopupController.java @GetMapping("/popupmembership") public String pop() { return "membership/popupmembership"; } index.html // 쿠키 불러오기 function getCookie(name) { var obj = name + "="; var x = 0; while (x 2023. 11. 1.

이전 1 ··· 13 14 15 16 17 18 19 ··· 24 다음

티스토리툴바