본문 바로가기
728x90
반응형

HTML32

[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.
[HTML5] - 14 - 부트스트랩을 이용해서 웹페이지 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 요즘 부스트트랩이 핫하다길래 여태까지의 코드를 기반으로 부스트트랩으로 바꿔보았다. 이제부턴 모바일까지 고려한 홈페이지 만들기 시작이다. 여태까지의 옛 것을 보내주고, 새로운 것을 받아들여보자. 그렇다고 다 새로운 것은 아니니 겁먹지 마라. 이리의 맥 이야기 컴온!!!! 제목 내용 게시글 작성 이전 1 2 3 다음 Index.html 에 옮겼으면 저장하고 실행해봐도 좋다. 자주 봤을 법한 버튼들과 폼이 즐비해있다. 앞으로는 이걸로 진행해보겠다. 개발 이야기/[HTML5] 2023. 5. 5.
[HTML5] - 13 - 로컬 스토리지 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 혹시나 하는 마음에 각 기능별로 주석을 달아서 왔다. 혼자 보고 이해하며 공부하는데 도움이 될 것이다. 참고로 로컬 스토리지에 게시글이 쌓여 지우는 버튼을 추가해보았다. 로컬 스토리지 비우기 한번 넣어두고 쓰면 좋을 듯 하다. 아래는 전체적으로 주석을 넣은 코드이다. 그대로 따라왔다면 복붙해서 공부하는 것도 나쁘지 않다고 생각한다. 이리의 맥 이야기 컴온!!!! 제목 내용 로컬 스토리지 비우기 로컬 스토리지 비우기 버튼을 만들고 눌러보자. 그럼 아래와 같이 깔끔하게 삭제될 것이다. 개발 이야기/[HTML5] 2023. 5. 5.
728x90
반응형

티스토리툴바