728x90 반응형 vscode13 [HTML5] - 8 - 게시글 작성 기능 만드는 법 (1) #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 게시글 작성 폼을 간단하게 추가해보도록 하자. 여기까지 왔다면 저장 한 번 하고 결과물을 확인하자. 결과물을 확인하면 아직 게시물 작성 폼이 생성되지 않은 것을 확인 할 수 있다. 여태 내용을 이해하고 있다면 바로 캐치했을 것이다. 몸통에 폼을 그려주지 않았구나! 바로 태그에 추가해주자. 제목 내용 역시나 따라오는데 어려움을 겪는 분들을 위해 전체 코드를 작성해놓겠다. 아래의 코드는 내용의 전부이다. 이리의 맥 이야기 컴온!!!! 제목 내용 환영합니다. 완성하시면 이런 모습입니다. Read More 할 수 있습니다. 포.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 7 - 더보기 기능 만드는 법(Read More) #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 앞서 두 번째 페이지까지 만들어 보았다. 이제는 게시글 본문을 볼 수 있게 만들어 볼 것이다. 우선 해당 게시물에 Read more 버튼을 만들어 해당 게시물과 링크시킬 것이다. 앞서 만든 거와 동일하다. 여태 내용을 이해했다면 어떻게 만들면 좋을지 감이 올 것이다. Index.html의 태그에서 카드 부분을 찾는다. 에서 한 줄만 추가하면 된다. Read More 혹시나 하는 마음에 카드 전체 부분을 작성하겠다. 환영합니다. 완성하시면 이런 모습입니다. Read More 각 게시물에 Read More 버튼을 넣어주면 아래와 같.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법) #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이젠 첫번째 페이지에 모든 내용을 담을 수 없다. 게시판의 형식이 그렇다. 물론 스크롤 압박(스압)을 견뎌낸다면 상관없다. 두번째 페이지를 만들어보자. 아래는 여태까지의 코드 내용이다. 이리의 맥 이야기 컴온!!!! 환영합니다. 완성하시면 이런 모습입니다. 할 수 있습니다. 포기하지 마세요. 네이버 다음 구글 야후 이제 두번째 페이지를 만들어 볼 것이다. 그 전에 버튼 만들었던 것을 변경해줄 것이다. 하단에 있는 부분의 링크와 버튼의 이름을 변경해줄 것이다. [1] [2] [3] [4] 3과 4는 2페이지를 만들어 보면 이해 될.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 5 - 게시글에 사진 넣는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 여기까지 따라왔다면 잘했다. 이제 게시글에 사진을 넣어 볼 것이다. 그래서 어떻게 넣는데? 사실 사진을 넣을 수 있는 방법은 여럿 있다. 하지만 나는 폴더 내에 사진을 저장 해 둔 상태에서의 방법이다. Index.html 파일이 있는 폴더 안에 images 라는 폴더를 생성해준다. 그 다음 images 폴더 안에 사진을 넣어준다. 나는 편의상 사진의 이름을 1, 2 로 지정해주었다. 이제 다시 Visual Studio로 돌아가서 경로만 추가해주면 끝이다. 아까 작성했던 에 사진 경로를 추가하는 것이다. 환영합니다. 완성하시면 이.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 4 - 버튼 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이젠 버튼을 추가해 보자. 우선 태그에 버튼 태그를 추가한다. .btn { display: inline-block; background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } .btn:hover { background-color: #0069d9; } 여기까지가 버튼의 크기와 모양 색을 지정해 준 것이다. 그다음 태.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› 728x90 반응형 이전 1 2 3 다음
