728x90 반응형 코딩31 [HTML5] - 21 - 이미지첨부 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 게시글 작성할 때 이미지를 첨부할 수 있는 버튼을 만들어 볼 것이다. 게시글 작성 모달 창에 이미지 첨부 기능을 추가한다. postImage라는 id를 가진 input 태그에 change 이벤트 리스너를 등록한다. 그리고, FileReader 객체를 이용하여 선택한 이미지 파일을 읽어와 미리 보기를 제공한다. 미리보기는 img 태그를 생성하여 postDiv에 삽입한다. 이미지 파일 선택 후 게시글을 작성하면, input 태그의 value를 초기화한다. 아래의 코드를 넣어주면 된다. 이미지 첨부 아래는 전체적인 코드이다... 개발 이야기/[HTML5] 2023. 5. 7. 더보기 ›› [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. 더보기 ›› 728x90 반응형 이전 1 2 3 4 5 6 7 다음
