6.2 완성된 웹사이트 제작

약 8분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

6.2 완성된 웹사이트 제작

이번 섹션에서는 앞서 배운 내용을 바탕으로 완성된 반응형 웹사이트를 제작해보겠습니다. 이 프로젝트는 기업 홈페이지를 모델로 하여 진행하며, HTML, CSS 및 JavaScript를 결합하여 실제로 운영할 수 있는 웹사이트를 만드는 과정입니다.

먼저, 기본적인 HTML 구조를 구성합니다. 다음은 기업 홈페이지의 기본 서울 구조입니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기업 홈페이지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <h1>기업 로고</h1>
            <ul>
                <li><a href="# 소개">소개</a></li>
                <li><a href="# 서비스">서비스</a></li>
                <li><a href="# 포트폴리오">포트폴리오</a></li>
                <li><a href="# 연락처">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="소개">
            <h2>우리에 대해</h2>
            <p>우리의 기업은 최고의 서비스 제공을 목표로 ...</p>
        </section>
        <section id="서비스">
            <h2>우리의 서비스</h2>
            <!-- 서비스 내용 추가 -->
        </section>
        <section id="포트폴리오">
            <h2>포트폴리오</h2>
            <!-- 포트폴리오 내용 추가 -->
        </section>
        <section id="연락처">
            <h2>연락하기</h2>
            <form>
                <label for="name">이름:</label>
                <input type="text" id="name" name="name">
                <label for="email">이메일:</label>
                <input type="email" id="email" name="email">
                <button type="submit">제출</button>
            </form>
        </section>
    </main>
    <footer>
        <p>© 2023 기업 이름. 모든 권리 보유.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

다음으로, 스타일링을 위한 CSS 코드를 작성합니다. CSS에서는 Flexbox 및 Grid 레이아웃을 활용하여 반응형 웹 디자인을 구현합니다.

코드 css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

nav h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    display: flex;
}

nav li {
    margin-left: 20px;
}

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

main {
    padding: 20px;
}

section {
    margin-bottom: 40px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
    }
    nav ul {
        flex-direction: column;
        padding: 0;
    }
    nav li {
        margin-left: 0;
        margin-bottom: 10px;
    }
}

JavaScript를 통해 상호작용 기능을 추가합니다. 이 예제에서는 간단한 스크롤 애니메이션을 구현하여 방문자가 페이지를 부드럽게 탐색할 수 있도록 합니다.

코드 javascript

document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        target.scrollIntoView({ behavior: 'smooth' });
    });
});

마지막으로, 브라우저에서 다양한 화면 크기로 반응형 웹사이트를 테스트하고 수정 사항을 반영합니다. Chrome DevTools의 Device Toolbar를 사용하여 가상 장치에서 웹사이트를 확인하는 방법을 배웠습니다.

이 프로젝트를 통해 핵심 반응형 웹 디자인 개념을 더욱 확고히 이해하고, 실제 웹사이트를 제작하는 경험을 쌓을 수 있었습니다. 다음 강의에서는 복습 문제와 실습 과제를 통해 학습한 내용을 보강해보세요.

6.2 완성된 웹사이트 제작

6.2 완성된 웹사이트 제작

댓글 0