public 하위에 create_todo.html 파일을 생성.해당 페이지에서 할일 목록을 작성하는 기능을 수행할 수 있도록 할 예정이다.일정 작성하기create_todo.html 작성1차 수정   일정 생성시 서버 측에서 오류가 발생하였다. POST 비즈니스 로직을 수행하는 함수에 @Transactional(readOnly = false) 를 적용하여 해결하였다. 제출이 되었는지 확인하기 위해 알람추가 및 새로고침 추가.then(data => { alert('제출이 완료되었습니다!'); location.reload();}) 금주 진행률과 금일 진행률 추가하자.해당 기능은 api를 설계할때는 고려하지 못했기 때문에 api에 해당 기능을 추가해줘야한다.일단 html을 먼저 작성해보자.와이어프레임..

프론트와 백엔드 둘다 접속한뒤 연결이 제대로 되었는지 확인해보자F12를 눌러 Network탭 확인해보면 fetch가 제대로 잘 작동하며 200OK 응답이 표시되어있는것을 확인할 수 있다.하지만 현재 API의 각 목록들을 가져오지는 않는 상황이다.코드를 다시 살펴보자.첫번째 줄인 fetch()함수를 이용해서 api에 HTTP요청을 보냄.then(response => response.json())을 통해 response를 json형태로 변환함.const todayList = document.getElementById('today_list'); : HTML에서 id가 today_list인 요소를 찾아서 todayList에 저장.const li = document.createElement('li'): 새로운 를..

API와 연결할 간단한 웹페이지를 HTML과 CSS를 이용해서 만들어보자일단 전체적인 도면을 그리기 위해 FIGMA로 와이어프레임을 그려보았다.https://www.figma.com/design/mWEBF54vyH7iuLlBxTdnzp/PLANNER?node-id=0-1&t=y3WinJFjbGGEyUCG-1 FigmaCreated with Figmawww.figma.com  메인페이지작성하기 페이지, 일정 수정,확인 페이지대충 이런식으로 웹사이트를 만들어서 적용할 생각이다.  메인페이지의 금일 진행률과 금주 진행률은 오늘,이번주 할일 목록에서 완료한 %를 나타낼 예정이라 추후에 API에 추가해야한다. 초간단 ver 웹페이지 Planner ..

css로 표현할 수 있는 애니메이션으로 transition 애니메이션이 있다. (key frame 애니메이션은 다루지 않을 예정) transitiontransition-property효과를 적용할 css속성 지정transition-property: background-color, margin-left;transition-duration효과를 적용할 시간 지정transition-duration:100ms;transition-delay효과가 발생하기까지의 시간 지정transition-delay:0ms;transition-timing-function변화 방식 지정(fade in fade out같은)transition-timing-function: ease-in; input[type="submit"]:hover..

간단한 초대 사이트를 만들어보자  HOME Date Form Scroll Message 해당 사이트는 HTML과 CSS를 연습하기 위한 목적이며 반응형 웹사이트를 만드는것이 목표입니다. 기본적인 양식은 웨딩 초대장 사이트 형식이며 페이지 하단 폼을 통해 반응형 기능을 구현하고자 함 프로젝트 시작 날짜 2024.11.25 MON Start 13:30~ ..

header 위치 여백 조정header{ width: 1240px; margin: 0 auto 50px;} header의 nav 위치 조정 및 글꼴,배경 색깔, 테두리 지정 header nav ul{ display: flex; justify-content: center; border-top: 2px solid #000000; border-bottom: 2px solid #000000; background-color: aquamarine; padding:12px 0 10px; li{ margin: 0 20px; a{ font-size: 20px; font-weight: bold; color: darkgreen; } a:hover{ t..