728x90 반응형 스크립트16 [HTML5] - 19 - 게시글 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 현재까지 만든 코드에 문제점이 있다. 바로 웹페이지를 껐다 켰을때 삭제버튼이 제대로 작동하지 않는 것이다. 삭제 버튼이 작동하지 않는 문제는 getPosts() 함수의 문제이다. 각 게시글의 삭제 버튼에 이벤트 핸들러를 등록하는 부분이 수정되지 않아 발생한 것이다. 이리의 맥 이야기 컴온!!!! 제목 내용 게시글 작성 이전 1 2 3 다음 getPosts() 함수를 수정해 준 것이다. 개발 이야기/[HTML5] 2023. 5. 6. 더보기 ›› [HTML5] - 18 - 반응형 게시판 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 게시글의 제목만 보이고 마우스를 올리면 내용까지 보이게 만들어 볼 것이다. 우선 태그에 아래의 코드를 넣어준다. .card-text { display: none; /* 카드 내용 숨김 */ } .card-title:hover + .card-text { display: block; /* 제목에 마우스를 올리면 카드 내용 보임 */ } 그리고 JavaScript 코드에서는 addPost() 함수를 수정한다. 카드 내용을 숨기고, 제목에 마우스를 올리면 내용을 보이도록 만들어 줄 것이다. function addPost() {.. 개발 이야기/[HTML5] 2023. 5. 6. 더보기 ›› [HTML5] - 17 - Visual Studio 추천 확장 프로그램 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 Visual Studio를 사용해 코딩을 하면서 같이 쓸만한 확장 프로그램 몇개 추천해려고 한다. 아직까지 많은 확장프로그램을 써보진 않았기 때문에 이게 전부가 아님을 유의하기 바란다. 1. Live Server Live Server - Visual Studio Marketplace Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages marketplace.v.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5]- 16 - 작성 시간 표시 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이제 게시글을 작성하면 작성한 시간이 나오게 만들어 볼 것이다. 날짜를 표시하기 위해서는 각 게시글이 작성된 시간을 저장해야 한다. 이를 위해 게시글을 저장할 때, 게시글의 내용과 함께 작성된 시간도 함께 저장하도록 addPost() 함수를 수정해야 한다. 아래는 수정된 addPost() 함수다. function addPost() { var title = document.getElementById("title").value; var content = document.getElementById("content").value; va.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 15 - 게시글 작성 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이전 14번 글에서 작성했던 코드에 오류가 있다. 게시글을 작성하면 저장되지 않았다. 바로 수정해 주도록 하자. 갈아엎었다면 게시글이 저장될 것이다. 웹페이지를 나가도, 새로고침 해도 유지될 것이다. 전의 코드에서 addPost() 함수가 수정되었다. 또한 getPosts() 함수가 추가되어 로컬 스토리지에서 게시글을 불러오는 기능이 추가했다. 마지막으로 getPosts() 함수를 호출하여 페이지가 로드될 때마다 저장된 게시글을 불러와서 화면에 출력하도록 구현했다. 역시나 혹시나 하는 마음에 전체 코드를 아래에 적어놓겠다. 이리.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› 728x90 반응형 이전 1 2 3 4 다음
