728x90 반응형 자바22 [HTML5] - 20 - 게시글 작성 폼과 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 여러 게시판과 게시글 작성하는 폼을 버튼을 눌렀을때 나오게 만들어 볼 것이다. 각 게시판마다 게시글 작성 버튼을 추가하고, 버튼을 누르면 게시글 작성 페이지로 이동하도록 해야한다. HTML 코드에 button 요소를 추가하고, JavaScript 코드에서 addPostPage() 함수를 만들어야 한다. 이 함수는 boardId를 매개변수로 받아 해당 게시판에 맞는 게시글 작성 페이지로 이동하도록 구현하면 된다. 게시글 작성 페이지에서는 게시글 제목과 내용을 입력할 수 있는 input 요소와 textarea 요소, 그리고.. 개발 이야기/[HTML5] 2023. 5. 7. 더보기 ›› [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. 더보기 ›› 728x90 반응형 이전 1 2 3 4 5 다음
