내용 목록

• 시작 동기
• 구현 방법
• 주요 기능 및 구현
• 향후 개선 사항

시작 동기

우리 집에 있는 작은 주황색 고양이는 성격이 좋아서, 그 고양이의 일상을 기록하는 간단한 블로그를 만들어 보기로 했습니다. 이를 통해 고양이와 함께하는 생활과 느낌을 기록하고자 합니다. 데모: https://unuliha.github.io/zhongqiu/index.html
소스코드: https://gitee.com/unuliha/blog/tree/master/2021/08/29/zhongqiu

구현 방법

필요한 자료: 사진, 비디오, 텍스트 정보
웹 페이지 전체 구조: "JavaScript DOM 프로그래밍 아트" 책을 참고했습니다.
개발 도구: `WebStorm`
아이디어: 기본적인 프레임워크는 유지하면서, 디자인과 원하는 기능을 추가했습니다.

주요 기능 및 구현

기능 1: 마우스 오버 시 탭 하이라이트

각 탭에 두 가지 이벤트(`mouseover`, `mouseout`)를 추가하여 마우스를 올렸을 때 하이라이트 클래스를 적용하고, 마우스가 벗어나면 원래 클래스로 복원합니다.

function highlightTabs() {
    var tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.originalClass = tab.className;
        tab.addEventListener('mouseover', function () {
            this.classList.add('highlight');
        });
        tab.addEventListener('mouseout', function () {
            this.className = this.originalClass;
        });
    });
}

기능 2: 테이블의 홀수와 짝수 행 스타일 설정

테이블의 홀수 또는 짝수 행에 새 클래스 이름을 추가하여 서로 다른 스타일을 적용합니다.

function styleTableRows() {
    var tables = document.querySelectorAll('table');
    tables.forEach(table => {
        var rows = table.rows;
        for (var i = 0; i < rows.length; i++) {
            if (i % 2 === 0) {
                rows[i].classList.add('even-row');
            } else {
                rows[i].classList.add('odd-row');
            }
        }
    });
}

기능 3: 이미지 인덱스 상하 페이지 전환

현재 페이지와 관련된 버튼 상태를 관리하며, 이미지 인덱스 리스트의 `margin-left` 값을 조정하여 페이지를 전환합니다.

function switchImageIndex() {
    var currentIndex = 0;
    var totalImages = document.querySelectorAll('#gallery li').length;
    var imagesPerPage = 6;

    function updateButtons() {
        if (currentIndex <= 0) {
            document.querySelector('.prev-btn').style.display = 'none';
        } else {
            document.querySelector('.prev-btn').style.display = 'block';
        }

        if (currentIndex >= totalImages - imagesPerPage) {
            document.querySelector('.next-btn').style.display = 'none';
        } else {
            document.querySelector('.next-btn').style.display = 'block';
        }
    }

    document.querySelector('.prev-btn').addEventListener('click', function () {
        currentIndex -= imagesPerPage;
        updateButtons();
        document.querySelector('.image-list').style.marginLeft = -(currentIndex * 100) + 'px';
    });

    document.querySelector('.next-btn').addEventListener('click', function () {
        currentIndex += imagesPerPage;
        updateButtons();
        document.querySelector('.image-list').style.marginLeft = -(currentIndex * 100) + 'px';
    });
}

기능 4: 클릭 시 이미지 또는 비디오 표시

이미지 또는 비디오를 클릭하면 해당 콘텐츠를 아래에 표시합니다.

function displayContentOnClick() {
    var gallery = document.getElementById('gallery');
    var placeholder = document.createElement('img');
    placeholder.id = 'mainImage';
    placeholder.src = 'images/default.jpg';
    var videoPlaceholder = document.createElement('video');
    videoPlaceholder.id = 'mainVideo';
    videoPlaceholder.controls = true;
    gallery.appendChild(placeholder);
    gallery.appendChild(videoPlaceholder);

    gallery.addEventListener('click', function (event) {
        if (event.target.tagName === 'A') {
            var src = event.target.href;
            if (src.endsWith('.mp4')) {
                placeholder.style.display = 'none';
                videoPlaceholder.src = src;
                videoPlaceholder.style.display = 'block';
            } else {
                videoPlaceholder.style.display = 'none';
                placeholder.src = src;
                placeholder.style.display = 'block';
            }
        }
    });
}

기능 5: 큰 이미지의 페이지 전환 버튼

큰 이미지에 페이지 전환 버튼을 추가하고, 인덱스의 페이지 전환과 연동합니다.

function addPageSwitchButtons() {
    var imageList = document.querySelectorAll('#gallery li a');
    var currentImageIndex = 0;

    function showCurrentImage(index) {
        if (index < 0 || index >= imageList.length) return;
        currentImageIndex = index;
        var src = imageList[currentImageIndex].href;
        if (src.endsWith('.jpg')) {
            document.getElementById('mainImage').src = src;
            document.getElementById('mainVideo').style.display = 'none';
        } else {
            document.getElementById('mainVideo').src = src;
            document.getElementById('mainImage').style.display = 'none';
        }
    }

    document.querySelector('.prev-btn').addEventListener('click', function () {
        showCurrentImage(currentImageIndex - 1);
    });

    document.querySelector('.next-btn').addEventListener('click', function () {
        showCurrentImage(currentImageIndex + 1);
    });
}

기능 6: 텍스트 제목 클릭 시 해당 섹션 표시

텍스트 제목을 클릭하면 해당 섹션이 표시되고 나머지는 숨깁니다.

function toggleSections(sectionId) {
    var sections = document.querySelectorAll('section');
    sections.forEach(section => {
        section.style.display = section.id === sectionId ? 'block' : 'none';
    });
}

document.querySelectorAll('nav a').forEach(link => {
    link.addEventListener('click', function () {
        toggleSections(this.getAttribute('href').substring(1));
    });
});

향후 개선 사항

• 이미지 인덱스에 선택된 이미지를 강조 표시하기 위한 테두리 추가
• 페이지 전환을 나타내는 작은 점 추가
• 댓글 기능 추가