마케터 실무도구/HTML

카테고리 클릭 시 제품 목록을 표시하는 방법

신마성 2025. 5. 5. 14:13
침실 거실 주방

 

웹페이지에서 카테고리 클릭 시 해당 카테고리의 제품 목록을 하단에 표시하고,

제품 클릭 시 해당 페이지로 이동하는 기능을 구현할 수 있어요. 아래 방법을 따라 해 보세요.

1. HTML 코드 작성

먼저, HTML에서는 카테고리 항목과 제품 목록을 표시할 자리를 만들어야 해요.

<div class="category-menu">
    <a class="category-item" href="#" data-category="침실">침실</a>
    <a class="category-item" href="#" data-category="거실">거실</a>
    <a class="category-item" href="#" data-category="주방">주방</a>
    <!-- 추가 카테고리들 -->
</div>

<div id="product-list" class="product-list">
    <!-- 클릭한 카테고리의 제품 목록이 여기에 표시됩니다. -->
</div>

2. CSS 코드

CSS는 카테고리 메뉴와 제품 목록을 깔끔하게 스타일링하는 부분이에요.

.category-menu {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
}

.category-item {
    text-decoration: none;
    font-size: 18px;
    color: #000;
    cursor: pointer;
}

.category-item:hover {
    color: #007bff;
}

.product-list {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.product-item {
    text-align: center;
    width: 150px;
}

.product-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.product-item a {
    text-decoration: none;
    color: #007bff;
    display: block;
    margin-top: 10px;
}

.product-item a:hover {
    text-decoration: underline;
}

3. JavaScript 코드 (GitHub에 업로드 후 사용)

자바스크립트는 GitHub에 파일을 업로드하고, 그 Raw URL을 사용해 연결하는 방법이에요.

  1. GitHub에 자바스크립트 파일 업로드:
    • script.js  라는 파일을 GitHub에 업로드하고, 해당 파일에 아래의 자바스크립트 코드를 넣어요.
  2. GitHub에서 Raw URL 가져오기:
  3. 자바스크립트 연결:
    • 아래처럼 <script> 태그로 Raw URL을 사용해 자바스크립트 파일을 연결해 주세요.
    • 자바스크립트 파일은 HTML 파일 하단에 추가해야 합니다. 이렇게 해야 페이지가 로드된 후 자바스크립트가 실행됩니다.
<script src=" 나의_raw_url_ 주소입력"></script>

4. JavaScript 코드 

자바스크립트는 카테고리 클릭 시 해당 카테고리 제품 목록을 동적으로 표시하는 기능을 담당해요.

document.addEventListener("DOMContentLoaded", function() {
    const categoryItems = document.querySelectorAll('.category-item');
    const productList = document.getElementById('product-list');

    // 각 카테고리별 제품 목록
    const products = {
        '침실': [
            { name: '침대', url: '침대_URL', img: '침대_이미지_URL' },
            { name: '서랍장', url: '서랍장_URL', img: '서랍장_이미지_URL' },
            { name: '옷장', url: '옷장_URL', img: '옷장_이미지_URL' },
        ],
        '거실': [
            { name: '소파', url: '소파_URL', img: '소파_이미지_URL' },
            { name: '커튼', url: '커튼_URL', img: '커튼_이미지_URL' },
            { name: 'TV', url: 'TV_URL', img: 'TV_이미지_URL' },
        ],
        '주방': [
            { name: '냉장고', url: '냉장고_URL', img: '냉장고_이미지_URL' },
            { name: '식탁', url: '식탁_URL', img: '식탁_이미지_URL' },
            { name: '조리기구', url: '조리기구_URL', img: '조리기구_이미지_URL' },
        ]
    };

    categoryItems.forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault();
            const category = item.dataset.category;

            // 해당 카테고리의 제품 목록을 표시해요.
            const categoryProducts = products[category] || [];

            // 제품 목록 초기화
            productList.innerHTML = '';

            // 카테고리 제품 목록 표시
            categoryProducts.forEach(product => {
                const productElement = document.createElement('div');
                productElement.classList.add('product-item');
                productElement.innerHTML = `
                    <img src="${product.img}" alt="${product.name}">
                    <a href="${product.url}" target="_blank">${product.name}</a>
                `;
                productList.appendChild(productElement);
            });
        });
    });
});

5. 결과 확인

이제 웹페이지에서 카테고리 클릭 시 해당 카테고리의 제품 목록이

하단에 표시되고, 각 제품 클릭 시 해당 페이지로 이동할 수 있어요.

페이지를 새로 고침한 후, 자바스크립트 파일이 제대로 동작하는지 확인해 주세요.