[포트폴리오 페이지] 4단계: Contact 섹션 추가

4단계: Contact 섹션 추가

4.1 Contact 섹션 HTML 작성

index.html 파일에서 Contact 섹션에 내용을 추가합니다.

index.html (수정된 부분)

<section id="contact">
    <h2>Contact</h2>
    <form id="contact-form">
        <input type="text" id="name" placeholder="Your Name" required>
        <input type="email" id="email" placeholder="Your Email" required>
        <textarea id="message" placeholder="Your Message" required></textarea>
        <button type="submit">Send</button>
    </form>
</section>

4.2 Contact 섹션 스타일링

styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.

styles.css (추가된 부분)

#contact {
    background-color: #f9f9f9; /* 배경색을 설정합니다. */
    padding: 2em; /* 패딩을 설정합니다. */
    margin-top: 2em; /* 상단 여백을 설정합니다. */
    border-radius: 8px; /* 모서리를 둥글게 만듭니다. */
}

#contact h2 {
    color: #333; /* 제목 색상을 설정합니다. */
}

#contact-form {
    display: flex; /* 플렉스 박스로 설정합니다. */
    flex-direction: column; /* 수직 방향으로 아이템을 정렬합니다. */
    gap: 1em; /* 아이템 간의 간격을 설정합니다. */
}

#contact-form input,
#contact-form textarea {
    padding: 1em; /* 패딩을 설정합니다. */
    border: 1px solid #ddd; /* 테두리를 설정합니다. */
    border-radius: 4px; /* 모서리를 둥글게 만듭니다. */
    font-size: 1em; /* 폰트 크기를 설정합니다. */
}

#contact-form button {
    padding: 1em; /* 패딩을 설정합니다. */
    background-color: #007BFF; /* 배경색을 설정합니다. */
    color: #fff; /* 텍스트 색상을 설정합니다. */
    border: none; /* 테두리를 제거합니다. */
    border-radius: 4px; /* 모서리를 둥글게 만듭니다. */
    cursor: pointer; /* 마우스 커서를 포인터로 변경합니다. */
    font-size: 1em; /* 폰트 크기를 설정합니다. */
}

4.3 JavaScript로 Contact Form 이벤트 처리

scripts.js 파일에서 Contact Form의 이벤트를 처리하는 코드를 추가합니다.

scripts.js (수정된 부분)

document.addEventListener("DOMContentLoaded", function() {
    // 프로젝트 리스트 코드 생략

    const contactForm = document.getElementById("contact-form");
    contactForm.addEventListener("submit", function(event) {
        event.preventDefault(); // 폼 제출을 막습니다.
        alert("Form submitted!"); // 폼 제출 시 알림을 표시합니다.
    });
});

4.4 커밋과 푸시

변경된 내용을 커밋하고 GitHub에 푸시합니다.

git add index.html styles.css scripts.js
git commit -m "Add Contact section with form and submission handler"
git push origin main

저작자표시

Javascript 개발자