[HTML5] - 9 - 게시글 작성 기능 만드는 법 (2)
728x90
반응형
728x90
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
게시물이 작성이 되려면 <script>를 작성해주어야 한다.
<script>는 해당 형식에 맞게 작동되게 해주는 역할이다.
네모난 구멍에는 네모 블럭을 끼우게 만드는 것 처럼 말이다.
아래는 <script>의 예시이다. </style> 밑에 작성해주면 된다.
<script>
function addPost() {
// 제목과 내용을 가져옴
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
// 게시글을 추가할 div 태그 생성
var postDiv = document.createElement("div");
postDiv.className = "card";
// 제목 추가
var titleElement = document.createElement("h3");
titleElement.className = "title";
titleElement.innerText = title;
postDiv.appendChild(titleElement);
// 내용 추가
var contentElement = document.createElement("p");
contentElement.className = "content";
contentElement.innerText = content;
postDiv.appendChild(contentElement);
// 이미지 추가
var imageElement = document.createElement("img");
imageElement.className = "image";
imageElement.src = "images/3.webp";
imageElement.alt = "이미지";
postDiv.appendChild(imageElement);
// Read More 버튼 추가
var buttonElement = document.createElement("button");
buttonElement.className = "btn";
buttonElement.innerHTML = "<a href='post.html'>Read More</a>";
postDiv.appendChild(buttonElement);
// 게시글 추가
var postsDiv = document.getElementById("posts");
postsDiv.insertBefore(postDiv, postsDiv.firstChild);
// 폼 초기화
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
</script>역시나 혹시나 하는 마음에 전체적인 코드 내용을 작성해주겠다.
놓친 부분이 있다면 천천히 읽어보고 따라와도 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이리의 맥 이야기</title>
<style>
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.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;
}
.image {
width: 300px;
height: 200px;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.content {
font-size: 16px;
margin-bottom: 10px;
}
form {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
input[type=submit] {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #0069d9;
}
</style>
<script>
function addPost() {
// 제목과 내용을 가져옴
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
// 게시글을 추가할 div 태그 생성
var postDiv = document.createElement("div");
postDiv.className = "card";
// 제목 추가
var titleElement = document.createElement("h3");
titleElement.className = "title";
titleElement.innerText = title;
postDiv.appendChild(titleElement);
// 내용 추가
var contentElement = document.createElement("p");
contentElement.className = "content";
contentElement.innerText = content;
postDiv.appendChild(contentElement);
// 이미지 추가
var imageElement = document.createElement("img");
imageElement.className = "image";
imageElement.src = "images/3.webp";
imageElement.alt = "이미지";
postDiv.appendChild(imageElement);
// Read More 버튼 추가
var buttonElement = document.createElement("button");
buttonElement.className = "btn";
buttonElement.innerHTML = "<a href='post.html'>Read More</a>";
postDiv.appendChild(buttonElement);
// 게시글 추가
var postsDiv = document.getElementById("posts");
postsDiv.insertBefore(postDiv, postsDiv.firstChild);
// 폼 초기화
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
</script>
</head>
<body style="background-color: black;">
<div class="hero">
<h1 style="color: white; text-align: center;">이리의 맥 이야기</h1>
<h2 style="color: white; text-align: center;">컴온!!!!</h2>
</div>
<form onsubmit="addPost(); return false;">
<label for="title">제목</label>
<input type="text" id="title" name="title" placeholder="제목을 입력하세요...">
<label for="content">내용</label>
<textarea id="content" name="content" placeholder="내용을 입력하세요..." style="height: 200px;"></textarea>
<input type="submit" value="게시글 작성">
</form>
<div id="posts">
<div class="card">
<h3 class="title">환영합니다.</h3>
<p class="content">완성하시면 이런 모습입니다.</p>
<img src="images/1.webp" alt="이미지" class="image">
<button class="btn"><a href="post.html">Read More</a></button>
</div>
<div class="card">
<h3 class="title">할 수 있습니다.</h3>
<p class="content">포기하지 마세요.</p>
<img src="images/2.webp" alt="이미지" class="image">
<button class="btn"><a href="post.html">Read More</a></button>
</div>
</div>
<div>
<button class="btn"><a href="second.html">두번째 페이지</a></button>
<button class="btn"><a href="#">세번째 페이지</a></button>
<button class="btn"><a href="#">네번째 페이지</a></button>
</div>
</body>
</html>작성이 완료 되었다면 저장을 누르고 켜보자.
게시물 작성 버튼을 눌러보자.
버튼을 누르고 나면 아래 사진처럼 게시글이 작성된 모습을 볼 수 있다.
여기까지 이해하고 따라오셨다면 html 구조와 원리에 대해서는 이해했다고 생각한다.
저 글을 작성하고 껐다 켰을때 저장이 되지 않는다.
왜 저장이 안되는데?
서버를 만들지 않았기 때문이다.
다음에는 서버를 만들기 전에 임시로 글을 저장 할 수 있게 만들어 볼 것이다.
반응형
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 11 - 삭제 기능 만드는 법 (0) | 2023.05.05 |
|---|---|
| [HTML5] - 10 - 게시글 저장 기능 만드는 법 (2) | 2023.05.04 |
| [HTML5] - 8 - 게시글 작성 기능 만드는 법 (1) (0) | 2023.05.02 |
| [HTML5] - 7 - 더보기 기능 만드는 법(Read More) (5) | 2023.05.02 |
| [HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법) (0) | 2023.05.02 |
댓글