[광고]홈페이지 만들기 7단원: 글쓰기 기능 만들기 – 사용자 입력 폼

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

홈페이지에서 가장 많이 쓰이는 기능 중 하나가 바로 글쓰기 폼입니다. 회원가입, 게시글 작성, 문의하기… 전부 <form> 태그로 만들 수 있어요.

1. 기본 글쓰기 폼 만들기

<form action="#" method="post">
  <label for="name">이름:</label><br>
  <input type="text" id="name" name="name" required><br>

  <label for="title">제목:</label><br>
  <input type="text" id="title" name="title"><br>

  <label for="content">내용:</label><br>
  <textarea id="content" name="content" rows="6"></textarea><br>

  <button type="submit">작성하기</button>
</form>

2. 주요 입력 요소 정리

• <input type="text">: 한 줄 텍스트 입력
• <textarea>: 여러 줄 입력 (게시글 본문 등)
• <button type="submit">: 폼 전송 버튼
• required: 필수 입력 처리

3. 예쁘게 CSS 스타일링 해보기

form {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fafafa;
}
input, textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  background-color: #2ecc71;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

 

4. 실제 동작은 어떻게 할까?

현재는 action="#" 으로 설정돼 있어서 클릭해도 아무 동작 안 해요. 실제로 글을 저장하려면 서버(백엔드)와 연동이 필요합니다. 이건 9단원에서 다룰 예정이고, 지금은 **입력폼 UI 구현**에 집중해요!

 

방문자가 글을 남길 수 있다는 건 단순한 ‘홈페이지’를 넘어 ‘소통 가능한 웹사이트’로 한 발짝 나아간 거예요! 폼만 잘 만들어도 포트폴리오, 문의폼, 게시판까지 다양하게 활용할 수 있어요.