5.2 쇼핑몰 메인 페이지

약 8분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.2 쇼핑몰 메인 페이지

이번 장에서는 실전 쇼핑몰 메인 페이지를 제작해보면서 반응형 웹 디자인의 원리를 실제의 UI에 적용하는 방법을 배워보겠습니다. 이 프로젝트를 통해 HTML, CSS, JavaScript를 통합적으로 사용하는 능력을 기를 것입니다.

1. 레이아웃 구성하기

우선, 쇼핑몰 메인 페이지의 구조를 정의합니다. 주요 요소로는 헤더, 상품 목록, 사이드바, 푸터가 있습니다. CSS Flexbox와 Grid를 활용하여 레이아웃을 구성할 것입니다.

코드 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>
        <h1>우리 쇼핑몰</h1>
        <nav>
            <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 class="products">
            <article class="product">
                <h2>상품 1</h2>
                <p>상품 설명</p>
                <button>구매하기</button>
            </article>
            <article class="product">
                <h2>상품 2</h2>
                <p>상품 설명</p>
                <button>구매하기</button>
            </article>
            <!-- 상품 추가 -->
        </section>
        <aside>
            <h3>카테고리</h3>
            <ul>
                <li><a href="#">의류</a></li>
                <li><a href="#">전자기기</a></li>
                <li><a href="#">가전제품</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2023 우리 쇼핑몰</p>
    </footer>
</body>
</html>

2. 스타일링 적용하기

해당 HTML 구조에 CSS를 적용하여 기본적인 스타일을 완성합니다. 반응형 디자인을 위해 Flexbox와 Grid 레이아웃을 활용할 것입니다.

코드 css

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

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

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

nav li {
    display: inline;
    margin-right: 15px;
}

main {
    display: flex;
    flex-wrap: wrap;
}

.products {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px;
}

.product {
    background: #f4f4f4;
    border: 1px solid #ccc;
    padding: 10px;
}

aside {
    flex: 1;
    background: #eee;
    padding: 10px;
}

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

@media (max-width: 768px) {
    main {
        flex-direction: column;
    }
}

3. JavaScript 추가하기

상호작용을 위한 기본적인 JavaScript 코드를 추가하여 버튼 클릭 시 이벤트가 발생하도록 설정하겠습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

코드 javascript

const buttons = document.querySelectorAll('.product button');

buttons.forEach(button => {
    button.addEventListener('click', () => {
        alert('구매가 완료되었습니다!');
    });
});

4. 테스트 및 디버깅

Chrome DevTools의 Device Toolbar를 사용하여 다양한 디바이스에서 페이지를 테스트합니다. 반응형 레이아웃이 정상적으로 작동하는지 확인하고, 필요시 CSS 조정을 통해 문제를 해결합니다.

이로써 쇼핑몰 메인 페이지의 기본 구현이 완료되었습니다. 다음 단계에서는 사용자 경험을 더욱 개선하기 위한 다양한 추가 기능과 최적화를 진행하겠습니다.

복습 문제

Flexbox와 Grid를 사용하여 레이아웃을 구성하는 방법은 무엇인가요?
Media Query를 사용하여 특정 뷰포트에서 스타일을 변경하는 방법을 설명해보세요.

5.2 쇼핑몰 메인 페이지

5.2 쇼핑몰 메인 페이지

1. 레이아웃 구성하기

2. 스타일링 적용하기

3. JavaScript 추가하기

4. 테스트 및 디버깅

복습 문제

댓글 0