[포트폴리오 페이지] 6단계: 반응형 디자인

반응형 디자인을 확장하여 포트폴리오 웹사이트를 모든 기기에서 최적화된 방식으로 표시하도록 개선해 보겠습니다.

반응형 디자인을 구현하기 위해 추가할 내용은 다음과 같습니다.

1. 헤더 및 네비게이션 메뉴의 반응형 디자인
2. 섹션과 폼 요소의 반응형 디자인
3. 이미지 및 기타 미디어 요소의 반응형 디자인

1. 헤더 및 네비게이션 메뉴의 반응형 디자인

1.1. HTML 수정

헤더와 네비게이션 메뉴를 위한 구조를 조금 더 개선하여 모바일에서의 사용성을 높입니다.

index.html (수정된 부분)

<header>
    <h1>My Portfolio</h1>
    <nav id="navbar">
        <button id="menu-toggle">☰</button> <!-- 모바일 메뉴 버튼 -->
        <ul id="nav-links">
            <li><a href="#about">About Me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <select id="language-selector">
        <option value="en">English</option>
        <option value="kr">한국어</option>
    </select> <!-- 언어 선택기 추가 -->
</header>

1.2. CSS 수정

반응형 디자인을 위해 CSS를 수정합니다. 특히 네비게이션 메뉴가 모바일 장치에서 어떻게 나타나는지 정의합니다.

styles.css (수정된 부분)

/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em 0;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    position: relative;
}

#menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin: 0 1em;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* 미디어 쿼리: 768px 이하에서 적용 */
@media (max-width: 768px) {
    /* 메뉴 토글 버튼을 보이도록 설정 */
    #menu-toggle {
        display: block;
    }

    /* 네비게이션 링크를 숨김 */
    #nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        text-align: left;
        padding: 0;
    }

    /* 네비게이션 링크를 블록으로 설정 */
    nav ul li {
        display: block;
        margin: 1em 0;
    }

    /* 메뉴가 보일 때 스타일링 */
    #nav-links.show {
        display: flex;
    }
}

1.3. JavaScript 추가

메뉴 버튼 클릭 시 네비게이션 메뉴를 표시하거나 숨깁니다.

scripts.js (수정된 부분)

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

    const menuToggle = document.getElementById("menu-toggle");
    const navLinks = document.getElementById("nav-links");

    // 메뉴 버튼 클릭 이벤트를 처리합니다.
    menuToggle.addEventListener("click", function() {
        navLinks.classList.toggle("show");
    });

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

2. 섹션과 폼 요소의 반응형 디자인

2.1. CSS 수정

각 섹션과 폼 요소가 다양한 화면 크기에서 잘 보이도록 CSS를 수정합니다.

styles.css (추가된 부분)

section {
    padding: 2em;
    margin: 2em 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 섹션의 반응형 디자인 */
@media (max-width: 768px) {
    section {
        padding: 1em;
        margin: 1em 0;
    }
}

#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;
}

/* 폼 요소의 반응형 디자인 */
@media (max-width: 768px) {
    #contact-form {
        gap: 0.5em;
    }

    #contact-form input,
    #contact-form textarea {
        padding: 0.5em;
        font-size: 0.9em;
    }

    #contact-form button {
        padding: 0.75em;
        font-size: 0.9em;
    }
}

3. 이미지 및 기타 미디어 요소의 반응형 디자인

3.1. CSS 수정

이미지와 비디오와 같은 미디어 요소가 화면 크기에 맞게 조정되도록 CSS를 수정합니다.

styles.css (추가된 부분)

/* 이미지의 반응형 디자인 */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 비디오의 반응형 디자인 */
video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

3.2. HTML 예시 수정

이미지를 포함하는 섹션에 반응형 이미지 스타일을 적용합니다.

project1.html (수정된 부분)

<section>
    <h2>Project 1 Overview</h2>
    <p>Details about Project 1...</p> <!-- 프로젝트 1에 대한 상세 설명 -->
    <img src="path_to_image" alt="Project 1 Screenshot"> <!-- 반응형 이미지 -->
</section>

커밋과 푸시

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

git add index.html styles.css scripts.js
git commit -m "Add responsive design improvements for header, sections, and media"
git push origin main