728x90 반응형 html530 [HTML5] - 15 - 게시글 작성 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이전 14번 글에서 작성했던 코드에 오류가 있다. 게시글을 작성하면 저장되지 않았다. 바로 수정해 주도록 하자. 갈아엎었다면 게시글이 저장될 것이다. 웹페이지를 나가도, 새로고침 해도 유지될 것이다. 전의 코드에서 addPost() 함수가 수정되었다. 또한 getPosts() 함수가 추가되어 로컬 스토리지에서 게시글을 불러오는 기능이 추가했다. 마지막으로 getPosts() 함수를 호출하여 페이지가 로드될 때마다 저장된 게시글을 불러와서 화면에 출력하도록 구현했다. 역시나 혹시나 하는 마음에 전체 코드를 아래에 적어놓겠다. 이리.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 14 - 부트스트랩을 이용해서 웹페이지 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 요즘 부스트트랩이 핫하다길래 여태까지의 코드를 기반으로 부스트트랩으로 바꿔보았다. 이제부턴 모바일까지 고려한 홈페이지 만들기 시작이다. 여태까지의 옛 것을 보내주고, 새로운 것을 받아들여보자. 그렇다고 다 새로운 것은 아니니 겁먹지 마라. 이리의 맥 이야기 컴온!!!! 제목 내용 게시글 작성 이전 1 2 3 다음 Index.html 에 옮겼으면 저장하고 실행해봐도 좋다. 자주 봤을 법한 버튼들과 폼이 즐비해있다. 앞으로는 이걸로 진행해보겠다. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 13 - 로컬 스토리지 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 혹시나 하는 마음에 각 기능별로 주석을 달아서 왔다. 혼자 보고 이해하며 공부하는데 도움이 될 것이다. 참고로 로컬 스토리지에 게시글이 쌓여 지우는 버튼을 추가해보았다. 로컬 스토리지 비우기 한번 넣어두고 쓰면 좋을 듯 하다. 아래는 전체적으로 주석을 넣은 코드이다. 그대로 따라왔다면 복붙해서 공부하는 것도 나쁘지 않다고 생각한다. 이리의 맥 이야기 컴온!!!! 제목 내용 로컬 스토리지 비우기 로컬 스토리지 비우기 버튼을 만들고 눌러보자. 그럼 아래와 같이 깔끔하게 삭제될 것이다. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 12 - 페이지네이션 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 좀 어려울 수 있지만 따라오면 괜찮을 것이다. 한 페이지에 게시글을 4개로 한정하고, 자동으로 다음페이지에 넘어가게 만들 것이다. 우선 addPost 함수를 수정해야한다. 여기에서 게시글이 추가될 때마다 게시글 수를 체크하여 페이지를 추가한다. 페이지 번호에 따라 보여지는 게시글을 조절하도록 수정해야한다. 또한, 페이지 번호를 나타내는 링크를 클릭할 때마다 해당 페이지에 해당하는 게시글만 보여지도록 해야한다. 마지막으로, 페이지 로딩 시 첫 페이지를 보여주도록 만들어 볼 것이다. 에 아래의 코드를 넣어준다. // 게시글.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 11 - 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 삭제기능을 추가해볼 것이다. 우선 전에 만들었던 버튼과는 다른 방식으로 코딩할 것이다. 이유는 자바스크립트를 통해 만들면 자동적으로 게시글마다 삭제버튼이 붙는다. 초반에는 하단에 게시글마다 버튼을 달아주었다. 우선 태그에 아래의 코드를 추가한다. // 삭제 버튼 추가 var deleteButton = document.createElement("button"); deleteButton.className = "btn"; deleteButton.innerText = "삭제"; deleteButton.addEventListen.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› 728x90 반응형 이전 1 2 3 4 5 6 다음
