Guidelines
Practice
연락 Form 만들기
비즈니스 페이지에는 사용자와의 소통을 위한 연락(Contact) 양식이 필수적입니다. 이를 통해 방문자는 문의사항, 제안 또는 피드백을 보낼 수 있으며, 기업은 이러한 정보를 기반으로 서비스를 개선하거나 사용자의 요구를 충족시킬 수 있습니다.
HTML
-
<form>
: 연락 양식의 시작으로, 이 태그 내부에 모든 입력 필드와 버튼이 위치합니다. -
.contact-input
: 사용자가 이름이나 이메일 주소와 같은 정보를 입력할 수 있는 텍스트 입력 필드입니다. -
.contact-textarea
: 사용자가 자신의 문의사항이나 피드백을 자세히 작성할 수 있는 텍스트 영역입니다. -
#send-button
: 연락 양식을 제출하는 버튼으로, 클릭하면 양식에 입력된 데이터가 서버로 전송됩니다.
<form> <!-- 이름 입력 필드 --> <input type="text" class="contact-input" placeholder="이름" /> <!-- 이메일 입력 필드 --> <input type="email" class="contact-input" placeholder="이메일" /> <!-- 문의사항 및 피드백 영역 --> <textarea class="contact-textarea" placeholder="메시지를 입력하세요." ></textarea> <!-- 제출 버튼 --> <button id="send-button">제출하기</button> </form>
CSS
-
.form
: 연락 양식의 스타일. 여기서는 위쪽 여백과 flexbox를 사용하여 아이템 간 간격 및 방향을 정의합니다. -
.contact-input
및.contact-textarea
: 입력 필드와 텍스트 영역의 기본 스타일. 배경색, 여백, 테두리 모서리 반올림 등을 설정합니다. -
#send-button
: 제출 버튼의 스타일. 버튼의 배경색, 텍스트 색상, 글꼴 크기, 텍스트 간격 등을 설정합니다.
CSS
form { margin-top: 20px; flex: 1; display: flex; flex-direction: column; gap: 18px; } .contact-input { background: #f3f3f3; padding: 16px 8px; border-radius: 4px; } .contact-textarea { background: #f3f3f3; border-radius: 4px; padding: 16px 8px; height: 120px; resize: none; } #send-button { height: 50px; display: flex; justify-content: center; align-items: center; background: #000; color: #fff; font-size: 16px; letter-spacing: 2.4px; text-transform: uppercase; cursor: pointer; }
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help