728x90 반응형 코딩31 [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. 더보기 ›› [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. 더보기 ›› 728x90 반응형 이전 1 2 3 4 5 6 7 다음
