[HTML5] - 8 - 게시글 작성 기능 만드는 법 (1)
728x90
반응형
728x90
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이번에는 게시글 작성 폼을 간단하게 추가해보도록 하자.
<style> 태그에 추가해야한다.
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;
}form과 input 그리고 label을 추가 해주었다.
내용이 점점 길어진다.
슬슬 어렵고 너무 길어...
집중해서 따라하지 못 할 경우 제대로 출력되지 않을 수 있다.
따라서 <style>태그의 전부를 작성해놓겠다.
<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>여기까지 왔다면 저장 한 번 하고 결과물을 확인하자.
결과물을 확인하면 아직 게시물 작성 폼이 생성되지 않은 것을 확인 할 수 있다.
여태 내용을 이해하고 있다면 바로 캐치했을 것이다.
몸통에 폼을 그려주지 않았구나!
바로 <body> 태그에 추가해주자.
<form>
<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>역시나 따라오는데 어려움을 겪는 분들을 위해 전체 코드를 작성해놓겠다.
아래의 코드는 내용의 전부이다.
<!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>
</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>
<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 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>
<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>여기까지 따라왔다면 저장하고 결과물을 확인해보자.
아래는 위에 대한 결과물이다.
제목과 내용을 작성할 수 있는 폼이 만들어졌다.
하지만, 게시물 작성 버튼을 누른다고 해서 게시물이 작성 되는 것이 아니다.
반응형
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 10 - 게시글 저장 기능 만드는 법 (2) | 2023.05.04 |
|---|---|
| [HTML5] - 9 - 게시글 작성 기능 만드는 법 (2) (2) | 2023.05.03 |
| [HTML5] - 7 - 더보기 기능 만드는 법(Read More) (5) | 2023.05.02 |
| [HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법) (0) | 2023.05.02 |
| [HTML5] - 5 - 게시글에 사진 넣는 법 (0) | 2023.05.02 |
댓글